JavaScript Web Guide

Google Authentication

Configuring Your Application

To get started with Google authentication, you need to first create a new Google application. Click the Create Project button on that page and fill in a name and ID for your project. Once your application is created, navigate to APIs & auth → Credentials in the left-hand navigation menu, and select Create New Client ID.

Firebase requires web application access, so select Web application. Set Authorized JavaScript origins to https://auth.firebase.com. Finally, set the Authorized Redirect URI 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.

Make sure your application also has it's Product Name set on the APIs & auth → Consent Screen or Google will return a 401 error when authenticating.

After configuring your Google application, head on over to the Login & Auth section in your App Dashboard. Enable Google authentication and then copy your Google application credentials (Client ID and Client Secret) into the appropriate inputs. You can find your Google application's client ID and secret from the same APIs & auth → Credentials page you were just on. Look for them under the Client ID for web application header.

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

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:

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:

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'"
      }
    }
  }
}