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.

What is GitHub Authentication?

• GitHub authentication in Firebase allows users to sign in to your web application using their GitHub credentials. This feature integrates GitHub's OAuth authentication system with Firebase Authentication, providing a secure and convenient way for users to access our app.
  
• OAuth Integration: Firebase integrates with GitHub's OAuth authentication system, allowing users to sign in with their GitHub account.

• User Identity Verification: GitHub authentication verifies the identity of users, ensuring that only authenticated users can access our app's resources.
  
• Single Sign-On (SSO): GitHub authentication supports single sign-on and allowing users to sign in to multiple applications with their GitHub credentials without having to create separate accounts.
  
• Access Control: We can use GitHub authentication to control access to our app's features and resources based on the user's GitHub account status and permissions.

Setting Up Firebase Project

Before we learn about the implementation, we need to set up a Firebase project and integrate it into our app:

• To create a Firebase project, go to the Firebase Console, create a new project, and follow the setup instructions.
  
• Add Firebase to Your App: Firebase provides detailed guides for adding Firebase to various platforms. Follow the instructions specific to your platform (Web, iOS or Android) to include Firebase in our project.
  
• Enable GitHub Authentication:
  
  
  • Go to the Authentication section in the Firebase Console.
    
  • Select the Sign-in method tab.
    
  • Enable GitHub and provide the Client ID and Client Secret obtained from the GitHub Developer Settings.

Implementing GitHub Authentication

1. Adding GitHub SDK and Firebase SDK to Your Project

For a web application, include the Firebase SDK in your HTML file:

<!-- 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>

2. Initialize Firebase

Initialize Firebase in your JavaScript file using the configuration details from our Firebase project settings:

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);

3. Set Up GitHub Authentication

Create an instance of the GitHub provider:

const provider = new firebase.auth.GithubAuthProvider();

Explanation: This code creates a new instance of the GitHubAuthProvider class, which can be used for GitHub authentication in Firebase.

4. Implement GitHub Sign-In

Create a function to handle the sign-in process with GitHub:

function signInWithGitHub() {
 firebase.auth().signInWithPopup(provider)
 .then((result) => {
 // User signed in successfully
 const user = result.user;
 console.log('User:', user);

 // Access token
 const credential = result.credential;
 const accessToken = credential.accessToken;

 console.log('Access Token:', accessToken);
 })
 .catch((error) => {
 // Handle errors here
 console.error('Error during sign-in:', error.message);
 });
}

Explanation:This function uses Firebase's signInWithPopup method with a GitHubAuthProvider to sign in a user using GitHub. If successful, it logs the user information and access token. If there's an error, it logs the error message.

5. Handling User Authentication State

Monitor the user's authentication state to check if they are signed in

firebase.auth().onAuthStateChanged((user) => {
 if (user) {
 // User is signed in
 console.log('User is signed in:', user);
 } else {
 // No user is signed in
 console.log('No user is signed in');
 }
});

Explanation:This code sets up a listener for authentication state changes using Firebase Authentication. When there's a change in the authentication state (like a user signing in or out), the callback function you provide gets called. If a user is signed in, it logs the user information. If no user is signed in, it logs a message indicating that

Example: 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

Conclusion

Overall, GitHub Authentication in Firebase offers a powerful way to authenticate users in your web application. By using GitHub's authentication system, you can provide users with a seamless sign-in experience and enhance the security of your app. Integrating GitHub authentication is a valuable addition to any web application and offering both convenience and security to your users.