Signing in users with Facebook

This document shows you how to use Identity Platform to sign in users with Facebook.

Before you begin

This tutorial assumes you've already enabled Identity Platform, and have a basic web app written using HTML and JavaScript. See the Quickstart to learn how.

Configuring Facebook as a provider

To configure Facebook as an identity provider:

  1. Go to the Identity Providers page in the Cloud Console.

    Go to the Identity Providers page

  2. Click Add A Provider.

  3. Select Facebook from the list.

  4. Enter your Facebook App ID and App Secret. If you don't already have an ID and secret, you can obtain one from the Facebook for Developers page.

  5. Configure the URI listed under Configure Facebook as a valid OAuth redirect URI for your Facebook app.

  6. Register your app's domains by clicking Add Domain under Authorized Domains. For development purposes, localhost is already enabled by default.

  7. Under Configure your application, click Setup Details. Copy the snippet into your app's code to initialize the Identity Platform Client SDK.

  8. Click Save.

Signing in users with the Client SDK

  1. Create an instance of the Facebook provider object:

    JavaScript

    var provider = new firebase.auth.FacebookAuthProvider();
  1. Optional: Add OAuth scopes. Scopes specify what data you are requesting from Facebook. More sensitive data may require specific scopes. Consult the provider's documentation to determine what scopes your app needs.

    JavaScript

    provider.addScope('user_birthday');
    
  1. Optional: Localize the authentication flow. You can specify a language, or use the device's default language:

    JavaScript

    firebase.auth().languageCode = 'fr_FR';
    // To apply the default browser preference instead of
    // explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  2. Optional: Specify additional custom OAuth parameters. These are specific to Facebook, and are typically used to customize the authentication experience.

    JavaScript

    provider.setCustomParameters({
      'display': 'popup'
    });
    

    You can't pass parameters reserved by OAuth or Identity Platform.

  3. Use the Facebook provider object to sign in the user. You can either open a pop-up window, or redirect the current page. Redirecting is easier for users on mobile devices.

    To show a pop-up, call signInWithPopup():

    JavaScript

    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.
      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;
      // ...
    });

    To redirect the page, first call signInWithRedirect():

    JavaScript

    firebase.auth().signInWithRedirect(provider);

    Then, retrieve the Facebook token by calling getRedirectResult() when your page loads:

    JavaScript

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        // 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.
      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;
      // ...
    });

Once you have an access token, you can use it to call the Facebook API. For example:

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

Signing in users manually

If you don't want to use the Client SDK, you can also handle the sign-in flow manually:

  1. Integrate Facebook authentication into your app by following the steps in their developer documentation.

  2. Sign in the user with Facebook using the flow you implemented in the previous step.

  3. Exchange the token you receive from Facebook for an Identity Platform credential:

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);
    
  4. Use the credential to sign in the user with Identity Platform:

    firebase.auth().signInWithCredential(credential).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;
      // ...
    });
    

What's next