Firebase Authentication in Github using Javascript

You are currently viewing Firebase Authentication in Github using Javascript

Welcome Folks I am back with another post. In this post we will be implementing Firebase Authentication in Github using Javascript. Just Follow the steps given below to make this application.


Before you Begin


Sign in to Firebase


Create a Firebase Project


Before you add Firebase to your application you need to create a firebase project in the firebase console



Click Add App button and select web appplication



Give a suitable name to your app as shown below



After that add Firebase SDK to the app by copy paste the following code. This code is auto generated and is different for each project.



After you have created Firebase Project you need to make a Github Project by going to their developers website


Create Github Project


You can go to Github Developer Website to signup and create project as shown below






When you create a Github OAuth App there will be four fields Application Name,Homepage Url of App,Description and Callback URL of app. You must copy paste the same url of your firebase project and then use this same callback url for your github project as shown below



Copy paste the same Callback url in firebase console in github project as shown below



Click on the Register button to Register the OAuth App


After Registering the application you will get the client id and client secret as shown below



First of all go to Authentication in Firebase Console and set up Authentication method of Github and enable it as shown below and also copy paste the client id and client secret which we gained in the earlier step and copy paste in the firebase console as shown below and then press the save button



Now Create a brand new project in your favourite text editor such as atom, sublime text or any text editor. I am using Visual Studio Code as my editor. And i am using XAMMP as my localhost server for testing purposes. Create an index.html file and copy paste this following code into it.



In these lines of code we are just importing the neccessary Firebase libraries such as the firebase itself and the firebase auth library. All this are imported by cdn (content delivery network) method which is fast and reliable for production applications.



In this we are just declaring two div sections. In these sections we will be holding the github profile pic and the github email address of the user respectively.



Now we are adding the business logic of the application i.e. the javascript required to generate the access token from github and fetches the user profile information and displaying in the browser. All the code is self explanatory you can see and if we execute this script now we will be having a consent screen of github asking the user to grant access to the application as shown below




Sign in with Github using Redirect



Firebase Github SignOut Code



Leave a Reply