Facebook Login using Firebase Vuejs

Objective:-
We are going to implement Facebook login using firebase in Vuejs, user will be able to login using his/her facebook account for which we are going to use firebase authentication.

A demo is worth a thousand words

Pre-requisite:-
- Firebase account.
- Basic knowledge of Javascript and Vuejs.

Step 1
first, you have to create a Firebase account and create your project or open an existing one to add Firebase Authentication.

Step 2
After creating a new account or opening an existing one, you have to create a Web application under firebase.

Once you follow all the steps for creating a web application you will get a firebase config JSON (just like below)which we are going to use further in our code.

var firebaseConfig = {
   apiKey: “AIzaSyBVcySiao1hFDqAbPcaIS1obhlAXifINZI”,
   authDomain: “chat-app-1d1c0.firebaseapp.com”,
   databaseURL: “https://chat-app-1d1c0.firebaseio.com",
   projectId: “chat-app-1d1c0”,
   storageBucket: “chat-app-1d1c0.appspot.com”,
   messagingSenderId: “428785263912”,
   appId: “1:428785263912:web:cbbdbf4a099af93e059c1d”
 };

Step 3
Now open the Facebook developer console choose and existing app or create a new one

once you complete all the steps go to Settings -> Basic you will get APP_ID and APP_SECRET for your app, which we will use in step 4

Step 4
After creating an APP on Facebook, go to the left side panel and click on the Authentication tab then on the sign-in-method panel choose what kind of authentication you want to integrate into your app, for now, enable Facebook authentication as we are going to integrate Facebook login into our app

Add you APP_ID and APP_SECRET while enabling Facebook login and copy the OAuth Redirection URL.

Step 5
Once you copy OAuth Redirection URL got to the Facebook developer console then click on Settings under the Facebook login tab, and paste your OAuth Redirection URL in the Valid OAuth Redirect URIs section, and hit the save changes button.

with all of the above steps done you are good with the firebase console-setup, now we have to write some code to integrate firebase and configure it into your project.

Step 6
First, you have to install the firebase npm module in your app.

npm install --save firebase

once you install the Firebase SDK in your app import it within your Vuejs component just like below.

import firebase from "firebase/app";

Now we are going to initialize Firebase in your app, Replace the following with your app’s Firebase project configuration which we earlier saved in

const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field

Note:- It’s recommended to initialize firebase in mounted method under your Vuejs component

firebase config-sample JSON, (below is the sample of config JSON which is provided by firebase to configure their SDK for WEB applications).

var firebaseConfig = {
   apiKey: “AIzaSyBVcySiao1hFDqAbPcaIS1obhlAXifINZI”,
   authDomain: “chat-app-1d1c0.firebaseapp.com”,
   databaseURL: “https://chat-app-1d1c0.firebaseio.com",
   projectId: “chat-app-1d1c0”,
   storageBucket: “chat-app-1d1c0.appspot.com”,
   messagingSenderId: “428785263912”,
   appId: “1:428785263912:web:cbbdbf4a099af93e059c1d”
 };

and with that, we are successfully initialized Firebase SDK in your project, now we have to initiate Facebook sign-in authentication using firebase.

Step 7
after initializing the Firebase SDK now we are going to call the firebase authentication method for that first create a simple button on which we can invoke Facebook sign-in

<template>
  <Button @click={handleFacebookLogin}>  
    Login with Facebook
  </Button>
</template>

now you have to initiate the authentication flow, by following the code you can Authenticate with Firebase using the Facebook provider object. You can prompt your users to sign in with their Facebook Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.

• To sign in with a pop-up window, call signInWithPopup

methods: {
  handleFacebookLogin(path, data) {
// Create an instance of the Facebook provider object:
    var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth()
      .signInWithPopup(provider)
      .then((result) => {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
         // This gives you a Facebook Access Token. You can use it to
            access the Facebook API.
var token = credential.accessToken;
// The signed-in user info, it will give you all basic info 
            of logged-in user
var user = result.user;
    }).catch((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;
    
    });
}
}

Also notice that you can retrieve the Facebook provider’s OAuth token which can be used to fetch additional data using the Facebook APIs.

• To sign in by redirecting to the sign-in page, call signInWithRedirect

methods: {
  handleFacebookLogin(path, data) {
// Create an instance of the Facebook provider object:
    var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithRedirect(provider);
}
}

Then, you can also retrieve the Facebook provider’s OAuth token by calling getRedirectResult when your page loads:

firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;
      // This gives you a Facebook Access Token. You can use it to
         access the Facebook API.
      var token = credential.accessToken;
      
    }
    // The signed-in user info.
    var user = result.user;
  }).catch((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;
    
  });

Note:- call get getRedirectResult on component load to retrieve token and other data after successfully redirected from facebook sign-in page.

And boom that’s it! You successfully authenticate users with Facebook now you can store the data, request the user’s full profile, or anything. It’s a good idea to start a session and save the user’s name, user ID, and perhaps email address for further reference.