GitHub Authentication in Action

Let’s Develop a web application that implements GitHub authentication using Firebase. The application should allow users to sign in using their GitHub credentials, using Firebase’s authentication system.

Upon successful sign-in, the application should display a success message and log the user information. Additionally, the application should handle sign-in errors simply and displaying an appropriate error message to the user.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Authentication with Firebase</title>
<!-- Firebase App (the core Firebase SDK) -->
<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js"></script>
<!-- Firebase Auth (for authentication) -->
<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-auth.js"></script>
</head>
<body>
<h1>GitHub Authentication</h1>
<p>Click the button below to sign in with GitHub:</p>
<button onclick="signInWithGitHub()">Sign in with GitHub</button>

<script>
const firebaseConfig = {
    apiKey: "AIzaSyDmaZAcK7xwQTAsQJxaGnG56oB8RIJDMnc",
    authDomain: "samplep-d6b68.firebaseapp.com",
    projectId: "samplep-d6b68",
    storageBucket: "samplep-d6b68.appspot.com",
    messagingSenderId: "398502093281",
    appId: "1:398502093281:web:5d685b0733d4d6d66472a0",
    measurementId: "G-9E6K9YD8D1"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Create a GitHub authentication provider
const provider = new firebase.auth.GithubAuthProvider();

// Sign in function
function signInWithGitHub() {
    firebase.auth().signInWithPopup(provider)
        .then((result) => {
            // User signed in successfully
            const user = result.user;
            console.log('User:', user);
            alert('Signed in successfully!');
        })
        .catch((error) => {
            // Handle errors here
            console.error('Error during sign-in:', error.message);
            alert('Failed to sign in. Please try again.');
        });
}
</script>
</body>
</html>

Output:

GitHub Authentication with Firebase

GitHub Authentication in Firebase allows users to sign in to our web application using their GitHub credentials. This integration uses GitHub’s OAuth authentication system which provides a secure and convenient way for users to access your app. By integrating GitHub authentication, we can enhance user experience and speed up the sign-in process.

In this article, We will learn about GitHub Authentication with Firebase, also Setting Up the Firebase Project with the examples in detail.

GitHub Authentication in Action

GitHub Authentication with Firebase

Similar Reads

Contact Us