Firebase GitHub Authentication

This is part - 3 of the firebase authentication series, previously we have seen how we can use Google and Facebook authentication in our application.

This is a continuation of the previous blogs, so it'll be connected, here we'll just add another method of authentication to our app. So, do check out the previous articles before continuing here as we're going to use the previous example to save time and implement multiple authentication types in our application.

Get Started

Firebase configuration

• Click on Add new Provider and select GitHub.

• 

  

  Now we'll need Client ID and Client Secret, for that go to github.com then go to settings than at the bottom you'll see developer settings, click on it then go to Oauth Apps.

• 

• Click on New Oauth App then give a name to your app, let's say example-app then give a homepage URL, i.e., http://example.com then add the authorized callback URL that you'll see in your firebase console and click register application.

• 

• Now, copy the Client ID and Client Secret and paste them into the firebase console and save it.

• Now you'll see that GitHub is enabled.

• 

Code

AuthContext

Here we're going to add another authentication provider that is provided by firebase, GithubAuthProvider. We won't be making many changes to the application that's why we're using previous code examples, see the previous blog.

import { useContext, createContext, useEffect, useState } from "react";
import {
    GoogleAuthProvider,
    FacebookAuthProvider,
    GithubAuthProvider,
    signInWithPopup,
    signOut,
    onAuthStateChanged,
} from "firebase/auth";
import { auth } from "../firebase";

const AuthContext = createContext();

export const AuthContexProvider = ({ children }) => {
    const [user, setUser] = useState({});

    const googleSignIn = () => {
        const provider = new GoogleAuthProvider();
        signInWithPopup(auth, provider);
    };

    const facebookSignIn = () => {
        const provider = new FacebookAuthProvider();
        signInWithPopup(auth, provider);
    };

    // This function provides Github login authentication.
    const githubSignIn = () => {
        const provider = new GithubAuthProvider();
        signInWithPopup(auth, provider);
    };

    const logOut = () => {
        signOut(auth);
    };

    useEffect(() => {
        const unsub = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser);
            console.log(currentUser);
        });
        return () => {
            unsub();
        };
    }, []);
    // update the value of AuthContextProvider with our new login method
    return (
        <AuthContext.Provider
            value={{ githubSignIn, facebookSignIn, googleSignIn, logOut, user }}
        >
            {children}
        </AuthContext.Provider>
    );
};

export const UserAuth = () => {
    return useContext(AuthContext);
};

Signin page

Now add another button on the sign-in page for GitHub login.

import React, { useEffect } from "react";
import { UserAuth } from "../context/AuthContext";
import { useNavigate } from "react-router-dom";

const Signin = () => {
    const { githubSignIn, facebookSignIn, googleSignIn, user } = UserAuth();
    const nav = useNavigate();

    const handleGoogleSignin = async () => {
        try {
            await googleSignIn();
        } catch (error) {
            console.log(error);
        }
    };

    const handleFacebookSignin = async () => {
        try {
            await facebookSignIn();
        } catch (error) {
            console.log(error);
        }
    };

    // method added to login using GitHub
    const handleGithubSignin = async () => {
        try {
            await githubSignIn();
        } catch (error) {
            console.log(error);
        }
    };

    useEffect(() => {
        if (user != null) {
            nav("/account");
        }
    }, [user]);
    return (
        <div className="signin">
            <button onClick={handleGoogleSignin}>Sign in with Google</button>
            <button onClick={handleFacebookSignin}>
                Sign in with Facebook
            </button>
            <button onClick={handleGithubSignin}>Sign in with GitHub</button>
        </div>
    );
};

export default Signin;

This is all you need to change to your previous app to enable GitHub authentication in your existing application.

Conclusion

In this article, we saw how we can integrate GitHub login into our existing application to provide multiple authentication methods to users.

I hope that this was helpful to you, drop a like, comment and follow for more such blogs in the future, you can follow me on Twitter as well.

Thank You :)