JavaScript Web Guide

Facebook Authentication

Configuring Your Application

To get started with Facebook authentication, you need to first create a new Facebook application. Click the Add a New App button in the top right of that page and select Website as your platform. Then choose an App ID and click Create New Facebook App ID. Select your app's category and click Create App ID. In the top right, click Skip Quick Start.

In your Facebook app configuration, click on the Settings tab on the left-hand navigation menu. Then go to the Advanced tab at the top and scroll down to the Security section. At the bottom of that section, add https://auth.firebase.com/v2/<YOUR-FIREBASE-APP>/auth/facebook/callback to your Valid OAuth redirect URIs and click Save Changes at the bottom of the page.

Next, you'll need to get your app credentials from Facebook. Click on the Basic tab at the top of the page. You should still be within the Settings tab. Towards the top of this page, you will see your App ID and App Secret. Your App ID will be displayed in plain text and you can view your App Secret by clicking on the Show button and typing in your Facebook password. Copy these Facebook application credentials (App ID and Secret) in the Login & Auth section in your App Dashboard.

Adding Contact Information

Facebook requires that you have a valid contact email specified in order to make your app available to all users. You can specify this email address from the same Basic tab within the Settings section. After you have provided your email, click on Save Changes. The last thing you need to do to approve your app is click on the Status & Review tab on the left-hand navigation menu and move the slider at the top of that page to the Yes position. When prompted with a popup, click Confirm. Your app will now be live and can be used with Firebase Authentication.

Logging Users In

If your user does not have an existing session, you can prompt the user to login and then invoke the Facebook login popup (e.g. after they have clicked a "Login" button) with the following snippet:

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithOAuthPopup("facebook", function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    console.log("Authenticated successfully with payload:", authData);
  }
});

Alternatively, you may prompt the user to login with a full browser redirect, and Firebase will automatically restore the session when you return to the originating page:

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithOAuthRedirect("facebook", function(error) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    // We'll never get here, as the page will redirect on success.
  }
});

Optional Settings

authWithOAuthPopup() and authWithOAuthRedirect() take an optional third parameter which is an object containing any of the following settings:

Name Description Type
remember If not specified - or set to default - sessions are persisted for as long as you have configured in the Login & Auth tab of your App Dashboard. To limit persistence to the lifetime of the current window, set this to sessionOnly. A value of none will not persist authentication data at all and will end authentication as soon as the page is closed. String
scope A comma-delimited list of requested extended permissions. See https://developers.facebook.com/docs/reference/login/#permissions for more information. String

Here is an example of Facebook login where the session will expire upon browser shutdown and we also request some extended permissions:

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithOAuthPopup("facebook", function(error, authData) { /* Your Code */ }, {
  remember: "sessionOnly",
  scope: "email,user_likes"
});

The authData object returned to your callback contains the following fields:

authData Object
Field Description Type
uid A unique user ID, intended as the user's unique key across all providers. String
provider The authentication method used, in this case: facebook. String
token The Firebase authentication token for this session. String
auth The contents of the authentication token, which will be available as the auth variable within your Security and Firebase Rules. Object
expires A timestamp, in seconds since the UNIX epoch, indicating when the authentication token expires. Number
facebook An object containing provider-specific data. Object
facebook.id The Facebook user's ID. This ID is unique to each Facebook application and cannot be used across different apps. String
facebook.accessToken The Facebook OAuth 2.0 access token granted by Facebook during user authentication. String
facebook.displayName The Facebook user's full name. String
facebook.email The Facebook user's primary email address as listed on their profile. Returned only if a valid email address is available, and the Facebook email permission was granted by the user. String
facebook.profileImageURL The URL of the Facebook user's profile picture. String
facebook.cachedUserProfile The Facebook user's raw profile, as specified by Facebook's user documentation. Note that the data included in this payload is generated by Facebook and may be changed by them at any time. Object

Permission Scope

Facebook only provides us with access to a user's basic profile information. If we want access to other private data, we need to request permission. We can provide our permissions—also known as scopes—when calling authentication methods. The scope property will allow us to request access to these permissions.

The email and user_likes scopes will give us access to the user's primary email and a list of things that the user likes, respectively. Those are just two of many permissions we can request. To gain access to those permissions a review process is required by Facebook. If the review is approved, we can provide the permissions to the authentication method. Make sure to select these permission on Facebook's app dashboard in addition to providing them in scope.

The Facebook permissions are encoded in the accessToken that is returned within the user object. With this accessToken we can query the Open Graph API to access our requested permissions.

When the user successfully logs in we will get back an accessToken in the authData object.

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithOAuthPopup("facebook", function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    // the access token will allow us to make Open Graph API calls
    console.log(authData.facebook.accessToken);
  }
}, {
  scope: "email,user_likes" // the permissions requested
});

Security and Firebase Rules

Now that the client is logged in, your Security and Firebase Rules have access to their verified account data. The auth variable contains the following values:

auth Variable
Field Description Type
uid A unique user ID, intended as the user's unique key across all providers. String
provider The authentication method used, in this case: facebook. String

Here is an example of how to use the auth variable in your Security and Firebase Rules:

{
  "rules": {
    "users": {
      "$uid": {
        // grants write access to the owner of this user account whose uid must exactly match the key ($uid)
        ".write": "auth !== null && auth.uid === $uid",

        // grants read access to any user who is logged in with Facebook
        ".read": "auth !== null && auth.provider === 'facebook'"
      }
    }
  }
}
See the User Authentication and User Based Security articles for more details.
  1. 1

    Next

    Installation & Setup

  2. 2

    Next

    Understanding Data

  3. 3

    Next

    Saving Data

  4. 4

    Next

    Retrieving Data

  5. 5

    Next

    Structuring Data

  6. 6

    Next

    Understanding Security

  7. 7

    Next

    User Authentication

  8. 8

    Next

    Offline Capabilities

  9. 9

    Next

    Deploying Your App