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
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; |
Code for your Firebase.ts file:
Javascript
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; |
Output: