How to implement Facebook login in your Web app with Firebase ?

Firebase offers a great number of options to implement Login in your app. Some of which are:

  • Using Email.
  • Using Phone number.
  • Using Facebook.
  • Using  Google, etc.

The best part is you don’t have to worry about handling the login flow, Firebase takes care of it.

Approach:

First of all, create a Firebase project by following these steps:

  • Go to https://console.firebase.google.com/ and login with your google account.
  • Create a project on Firebase.
  • Add Firebase Software Development Kit(SDK) in your App.

<!– Insert these scripts inside your body tag –>



<body>

<!–This is the most important script that has to be added –>

<script src=”/__/firebase/7.14.4/firebase-app.js”></script>

<!– In order to use Google login add this script –>

<script src=”/__/firebase/7.14.4/firebase-auth.js”></script>
</body>

  • Now that we have added these scripts in our app, we will now initialize the Firebase in our app.
  • In the Firebase console go to the app settings, from there copy App config object and paste it in your code.
  • App config object looks like this.
var firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project-id.firebaseapp.com",
  databaseURL: "https://your-project-id.firebaseio.com",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com",
  messagingSenderId: "the-sender-id",
  appId: "the-app-id",
  measurementId: "G-measurement-id",
};


  • If you followed these steps correctly your app will be registered with Firebase.

Now we will enable Facebook login in our app by following these steps:

  • Open Facebook for developers, and create a new app.
  • After the app is created, go to the basic settings and you can get your App Id and an app secret from there.
  • Go to the Firebase console and open Auth section
  • Enable Facebook sign on the sign in method tab and enter your App Id and App secret there.
  • Firebase will provide you with your OAuth redirect URI, update this URI in Facebook settings:
    Product -> Settings -> Valid OAuth Redirect URIs.
  • In your app create a Facebook provider object to handle login flow.
const FacebookAuth = new firebase.auth.FacebookAuthProvider();
  • Authenticate user by using the instance of object that you created with the Firebase.
  • You can either redirect the user to sign in page or open a pop-up window.

firebase.auth().signInWithPopup(FacebookAuth); //To sign in with pop-up.
firebase.auth().signInWithRedirect(FacebookAuth);//To sign in with redirect.

  • Facebook Login method is implemented in your app, now you are good to go.

Example:

We will create a simple react based web app with just the login button.

Code for the button component:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from "react";
import firebase from 'firebase';
  
class tutorial extends Component{
render(){
return(
<div>
   <button> {
           
         // Facebook provider object is created here.
          const FacebookAuth = 
              new firebase.auth.FacebookAuthProvider();
               
         // using the object we will authenticate the user.
           
             firebase.auth().signInWithPopup(FacebookAuth);
              }} >
          Sign in with Facebook
    </button>
 </div>
   );
  }
 }
 export default tutorial;

chevron_right


Code for your Firebase.ts file:

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import * as firebase from 'firebase';
const firebaseConfig = {
  apiKey: "****",
    authDomain: "****.firebaseapp.com",
    databaseURL: "https://*****.firebaseio.com",
    projectId: "****",
    storageBucket: "****.appspot.com",
    messagingSenderId: "****",
    appId: "****",
    measurementId: "****"
};
class Firebase {
  constructor() {
    firebase.initializeApp(firebaseConfig);
  }
}
  
export default Firebase;

chevron_right


Output:

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.