Authenticate Using Google with JavaScript

You can let your users authenticate with Firebase using their Google Accounts. You can either use the Firebase SDK to carry out the Google sign-in flow, or carry out the sign-in flow manually using the Sign In With Google library and passing the resulting ID token to Firebase.

Before you begin

  1. Add Firebase to your JavaScript project.
  2. Enable Google as a sign-in method in the Firebase console:
    1. In the Firebase console, open the Auth section.
    2. On the Sign in method tab, enable the Google sign-in method and click Save.

Handle the sign-in flow with the Firebase SDK

If you are building a web app, the easiest way to authenticate your users with Firebase using their Google Accounts is to handle the sign-in flow with the Firebase JavaScript SDK. (If you want to authenticate a user in Node.js or other non-browser environment, you must handle the sign-in flow manually.)

To handle the sign-in flow with the Firebase JavaScript SDK, follow these steps:

  1. Create an instance of the Google provider object:

    Web modular API

    import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();
    auth_google_provider_create.js

    Web namespaced API

    var provider = new firebase.auth.GoogleAuthProvider();
    google-signin.js
  2. Optional: Specify additional OAuth 2.0 scopes that you want to request from the authentication provider. To add a scope, call addScope. For example:

    Web modular API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    auth_google_provider_scopes.js

    Web namespaced API

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    google-signin.js
    See the authentication provider documentation.
  3. Optional: To localize the provider's OAuth flow to the user's preferred language without explicitly passing the relevant custom OAuth parameters, update the language code on the Auth instance before starting the OAuth flow. For example:

    Web modular API

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Web namespaced API

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js
  4. Optional: Specify additional custom OAuth provider parameters that you want to send with the OAuth request. To add a custom parameter, call setCustomParameters on the initialized provider with an object containing the key as specified by the OAuth provider documentation and the corresponding value. For example:

    Web modular API

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    auth_google_provider_params.js

    Web namespaced API

    provider.setCustomParameters({
  'login_hint': 'user@example.com'
});
    google-signin.js
    Reserved required OAuth parameters are not allowed and will be ignored. See the authentication provider reference for more details.
  5. Authenticate with Firebase using the Google provider object. You can prompt your users to sign in with their Google Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices.
    • To sign in with a pop-up window, call signInWithPopup:

      Web modular API

      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access the Google API.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;
    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_popup.js

      Web namespaced API

      firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((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;
    // ...
  });
      google-signin.js
      Also notice that you can retrieve the Google provider's OAuth token which can be used to fetch additional data using the Google APIs.

      This is also where you can catch and handle errors. For a list of error codes have a look at the Auth Reference Docs.

    • To sign in by redirecting to the sign-in page, call signInWithRedirect: Follow the best practices when using `signInWithRedirect`.

      Web modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
      auth_signin_redirect.js

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      index.js
      Then, you can also retrieve the Google provider's OAuth token by calling getRedirectResult when your page loads:

      Web modular API

      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // This gives you a Google Access Token. You can use it to access Google APIs.
    const credential = GoogleAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GoogleAuthProvider.credentialFromError(error);
    // ...
  });
      auth_google_signin_redirect_result.js

      Web namespaced API

      firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a Google Access Token. You can use it to access the Google API.
      var token = credential.accessToken;
      // ...
    }
    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((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;
    // ...
  });
      google-signin.js
      This is also where you can catch and handle errors. For a list of error codes have a look at the Auth Reference Docs.

Authenticate with Firebase in a Chrome extension

If you are building a Chrome extension app, you must add your Chrome extension ID:

  1. Open your project in the Firebase console.
  2. In the Authentication section, open the Sign-in method page.
  3. Add a URI like the following to the list of Authorized Domains: 
    chrome-extension://CHROME_EXTENSION_ID

Only popup operations (signInWithPopup, linkWithPopup, and reauthenticateWithPopup) are available to Chrome extensions, as Chrome extensions cannot use HTTP redirects. You should call these methods from a background page script rather than a browser action popup, as the authentication popup will cancel the browser action popup. The popup methods may only be used in extensions using Manifest V2. The newer Manifest V3 only allows background scripts in the form of service workers, which cannot perform the popup operations at all.

In your Chrome extension's manifest file make sure that you add the https://apis.google.com URL to the content_security_policy allowlist.

Next steps

After a user signs in for the first time, a new user account is created and linked to the credentials—that is, the user name and password, phone number, or auth provider information—the user signed in with. This new account is stored as part of your Firebase project, and can be used to identify a user across every app in your project, regardless of how the user signs in.

  • In your apps, the recommended way to know the auth status of your user is to set an observer on the Auth object. You can then get the user's basic profile information from the User object. See Manage Users.

  • In your Firebase Realtime Database and Cloud Storage Security Rules, you can get the signed-in user's unique user ID from the auth variable, and use it to control what data a user can access.

You can allow users to sign in to your app using multiple authentication providers by linking auth provider credentials to an existing user account.

To sign out a user, call signOut:

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js