Firebase Authentication in Facebook using Javascript - Coding Shiksha

Welcome Folks I am back with another post. In this post we will be implementing Firebase Authentication in Facebook 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 Facebook Project by going to their developers website

Create Facebook Project

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

After creating the app in Facebook you will be getting the app id and app secret something as shown below. Copy these two things we will use this in the next step

READ Masonry Instagram Photo Grid With Infinite Scroll - jQuery MasonGram

Now open firebase authentication tab and get into sign in methods and enable facebook in it and copy paste the app id and app secret into it as shown below.

Also copy paste the callback url of your firebase project as shown above in firebase app settings as shown below

After doing all these steps you are set to go for actually coding this application. So just your favourite ide and create a html file and copy paste the following code into it as shown below.

<!DOCTYPE html>
<html>
    <head>
        <title>Facebook 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 jQuery Plugin to Display Google Calendar on Website - Coding Shiksha

In these lines of code we are just importing firebase depedencies in the project by cdn

<!-- button for invoking redirect auth-->

        <button onclick="signin()" id="sign-in">
            Sign in with Facebook
        </button>

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

        <div style="text-align:center;" id="user-image">
            
        </div>

        <!-- the place for holding Twitter email address-->
        
        <h1 style="text-align:center;" id="user-email">

        </h1>

        <!-- sign out the  user-->

        <button style="display:none;text-align:crnter" onclick="signout()" id="sign-out">
            SignOut
        </button>

In these lines of code we are just setting div sections for holding facebook profile pic and display name for the user respectively

<script>
    function signin()
    {
    var provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('user_birthday,email');
    firebase.auth().useDeviceLanguage();
    firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Facebook Access Token. You can use it to access the Facebook API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  document.querySelector("#sign-out").style.display="block";
  console.log(user);
  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;
  // ...
});

    }

READ Simple jQuery Plugin for Displaying Twitter Feed - Tweetie

This is the business logic of the application. This script contains only function that is sign in which will be executed whenever the user presses the sign in button in the web page so in this function first of all whenever user presses button a facebook popup window will appear asking the user to grant access to the application something as shown below. The user needs to grant access to the application so that we can fetch user display name and profile pic of user facebook account

Sign out a User in Firebase Facebook

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