Firebase Authentication in Github using Javascript – Coding Shiksha

Firebase Authentication in Github using Javascript – Coding Shiksha

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

READ  Login with Instagram using Javascript

 

 

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.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Github Auth</title>
    </head>
    <body>

      

    </body>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.11.1/firebase-auth.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyBaaR3NfTRH8Nn_lBU2g9FD586YPDfzqdg",
    authDomain: "convertimagetopdf-94d3a.firebaseapp.com",
    databaseURL: "https://convertimagetopdf-94d3a.firebaseio.com",
    projectId: "convertimagetopdf-94d3a",
    storageBucket: "convertimagetopdf-94d3a.appspot.com",
    messagingSenderId: "688742065326",
    appId: "1:688742065326:web:f9b11a9568b7c095"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
</html>

 

READ  Authenticate your users in Node with Passport.js

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.

 

<!-- the place for holding github profile pic-->

        <div id="user-image">
            
        </div>

        <!-- the place for holding hithub email address-->
        
        <h1 id="user-email">

        </h1>

 

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.

 

<script>
    var provider = new firebase.auth.GithubAuthProvider();
    provider.addScope('repo');

    firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a GitHub Access Token. You can use it to access the GitHub API.
  var token = result.credential.accessToken;
  console.log(token);
  // The signed-in user info.
  var user = result.user;
  console.log(user.email);
  var userImage = document.querySelector("#user-image");

  // appending the user profile image

  var userPic = document.createElement("img");
  userPic.src=user.photoURL;
  userImage.append(userPic);

  // appending the user email address

  var userEmail = document.querySelector("#user-email");
  userEmail.innerHTML = user.email;

  
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});
</script>

 

READ  Redis Caching in Node.js

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.auth().signInWithRedirect(provider);

firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    var token = result.credential.accessToken;
    // ...
  }
  // The signed-in user info.
  var user = result.user;
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

 

Firebase Github SignOut Code

 

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

 

Leave a Reply

Close Menu