How to set up github login firebase

FirebaseHow-ToBeginner · 4 min read

How to Set Up GitHub Login with Firebase Authentication

To set up GitHub login in Firebase Authentication, enable GitHub as a sign-in provider in the Firebase console and configure your GitHub OAuth app with the correct callback URL. Then, use Firebase SDK's signInWithPopup or signInWithRedirect methods to authenticate users with GitHub.

📐

Syntax

To enable GitHub login with Firebase, you need to configure Firebase Authentication and use the Firebase SDK methods to sign in users.

firebase.auth().signInWithPopup(provider): Opens a popup for GitHub login.
firebase.auth().signInWithRedirect(provider): Redirects to GitHub login page.
new firebase.auth.GithubAuthProvider(): Creates a GitHub auth provider instance.

javascript

const provider = new firebase.auth.GithubAuthProvider();
firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // User signed in
    const user = result.user;
  })
  .catch((error) => {
    // Handle errors
  });

💻

Example

This example shows how to enable GitHub login using Firebase SDK in a web app. It opens a popup for the user to sign in with their GitHub account and logs the user info on success.

javascript

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GithubAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_PROJECT_ID.firebaseapp.com',
  // other config values
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GithubAuthProvider();

function githubLogin() {
  signInWithPopup(auth, provider)
    .then((result) => {
      const user = result.user;
      console.log('User signed in:', user);
    })
    .catch((error) => {
      console.error('Error during sign in:', error);
    });
}

githubLogin();

Output

User signed in: { uid: '...', displayName: '...', email: '...', ... }

⚠️

Common Pitfalls

Not enabling GitHub provider in Firebase console: You must enable GitHub under Authentication > Sign-in method.
Incorrect OAuth redirect URI: The GitHub OAuth app must have the Firebase callback URL exactly as https://YOUR_PROJECT_ID.firebaseapp.com/__/auth/handler.
Missing GitHub client ID or secret: These must be set correctly in Firebase console.
Not handling errors: Always catch errors from sign-in methods to debug issues.

javascript

/* Wrong: Missing provider setup */
firebase.auth().signInWithPopup(null)
  .catch(error => console.error(error));

/* Right: Proper provider setup */
const provider = new firebase.auth.GithubAuthProvider();
firebase.auth().signInWithPopup(provider)
  .catch(error => console.error(error));

📊

Quick Reference

Steps to set up GitHub login with Firebase:

1. Create a GitHub OAuth app in GitHub Developer Settings.
2. Set the callback URL to https://YOUR_PROJECT_ID.firebaseapp.com/__/auth/handler.
3. Copy the Client ID and Client Secret.
4. In Firebase Console, enable GitHub provider and enter Client ID and Secret.
5. Use Firebase SDK's GithubAuthProvider and signInWithPopup or signInWithRedirect in your app.

✅

Key Takeaways

Enable GitHub provider and configure OAuth app with correct callback URL in Firebase console.

Use Firebase SDK's GithubAuthProvider with signInWithPopup or signInWithRedirect to authenticate users.

Always handle errors to troubleshoot authentication issues.

Ensure GitHub client ID and secret are correctly set in Firebase.

The OAuth redirect URI must exactly match Firebase's auth handler URL.