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.