Authenticate Users with GitHub Authentication using Firebase
Authenticating your users using GitHub
Authenticating users using Google, Facebook, Twitter and GitHub can provide a smoother user onboarding experience. I have already covered an article for google authentication using Firebase. Here is the link to the article:
Google Authentication using Firebase => ArticleToday we will add authentication via GitHub using Firebase. GitHub Authentication required you to create an OAuth GitHub Application with application name and application callback URL and domain URL. Will cover this later on.
Overview
- We will create an OAuth app in GitHub Profile -> Settings -> Developer Settings -> OAuth Apps
- Add callback URL, domain name, application name and create the OAuth App
- Save clientSecret and clientID for a further Firebase Console.
- Add clientSecret and clientID on the Firebase Console.
- Create a GitHub provider from the firebase method.
- Add firebase authentication via GitHub using the provider
Create OAuth apps in GitHub Developer Settings. Here is the link =>
GitHub Developer Settings => https://github.com/settings/developersInside the developer OAuth apps, you need to enter callback URL and URL, you will get callback URL from Firebase console. After entering the above details you were redirected to the OAuth app page with your credentials details. Save the clientID and clientSecret, we will need that for further process. The last step is to add a callback URL below on this page, you will get your callback URL from the Firebase console.
Getting CallbackURL
• Go to Firebase Console => Authentication => sign-in-method
• Enable the Authentication via Github method by switching the switch
• Enter the above clientID and clientSecret and copy-paste the callbackURL
• Enter the copies callbackURL to Github Developer OAuth App.
Enter your clientID and clientSecret in the inputs and copy your callback URL and paste it on GitHub OAuth apps.
Writing Code
We will use the same repository which we use to add authentication using Email-Password & Google.
* Google Authentication repository using FirebaseFirst, we will create a firebase provider, which Firebase GitHub Auth required. Firebase itself gives a method to create a provider for GitHub authentication.
const provider = new firebase.auth.GithubAuthProvider();
Our handleGithubLogin method first creates the provider and then use this provider to sign-in the user using GitHub for our user. Firebase auth method give signInWithPopup method which accepts the provider as a parameter and in response, it gives us the access token. The accessToken is the most important token as we need this token in future to make a further API request to GitHub API. Also, if your user sign-in using GitHub then do save this accessToken, because you do need some of the user GitHub credentials which can only be accessed via GitHub API using this accessToken.
Lastly, Firebase does provide an error message in response to API if the user you have already sign-in using Google and trying to sign-in using GitHub or other methods. The best practice, in that case, is to give the user the proper indication of errors and messages about his preceeding sign-in methods.
Conclusion
There is another way also to sign-in to your user via GitHub. In that method we can use GitHub API itself to sign-in, I am trying to make that successful without creating any backend server or code. I will cover the article on the same once I accomplish that task.
I will be using Serverless Function to make API calls to GitHub login API. If In case you have no idea What is Serverless Function you can find the link below. The benefit of using Serverless Function is that we don’t need to create our own server for adding GitHub Authentication to our Frontend.
Until, next time, Have a good day, People.
Click to read, What is Serverless Function ? Code repository => https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/GithubAuthenticationUsingFirebase
More content at plainenglish.io
