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