You're viewing the legacy docs. They are deprecated as of May 18, 2016.
These docs are for version 2.4.2 and below of the Javascript SDK. Go to our current docs, or see our Web migration guide.

JavaScript Web Guide

Google Authentication

Configuring Your Application

To get started with Google authentication for your web application, you need to first create a Google Cloud Platform (GCP) project. Use one of your existing projects listed on that page or click the Create project button and fill in a name and ID for your project. Once your project is created, navigate to the OAuth consent screen within the GCP API management console and specify the Product name shown to users.

Clicking Save takes you to the GCP API credentials management screen where you should select OAuth client ID from the Create credentials dropdown. Since you are setting things up for an web application, select Web application under Application Type. Give your client ID a useful Name and set Authorized JavaScript origins to https://auth.firebase.com. Finally, set the Authorized Redirect URIs to https://auth.firebase.com/v2/<YOUR-FIREBASE-APP>/auth/google/callback. This allows Google's OAuth service to talk to the Firebase Authentication servers.

Click Create and make note of the resulting OAuth client ID and secret. Head on over to the Login & Auth section in your Firebase App Dashboard. Enable Google authentication and then paste your client ID into the Google Client ID input and your client secret into the Google Client Secret input. You can always find your web application's client ID and secret from the GCP API credentials management screen.

Logging Users In

If your user does not have an existing session, you can prompt the user to login and then invoke the Google 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("google", 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("google", 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 Google's documentation for more information. String

Here is an example of Google login where the session will expire upon browser shutdown and we also request the extended email permission:

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

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: google. 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
google An object containing provider-specific data. Object
google.id The Google user's ID. String
google.accessToken The Google OAuth 2.0 access token granted by Google during user authentication. String
google.displayName The Google user's full name. String
google.email The Google user's primary email address as listed on their profile. Returned only if a valid email address is available, and the Google email permission was granted by the user. String
google.profileImageURL The URL of the Google user's profile picture. String
google.cachedUserProfile The Google user's raw profile, as specified by Google's user documentation. Note that the data included in this payload is generated by Google and may be changed by them at any time. Object

Security and Firebase Rules

Now that the client is logged in, your Security and Firebase Rules have access to their verified Google user ID. 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: google. 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 Google
        ".read": "auth !== null && auth.provider === 'google'"
      }
    }
  }
}
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