Sign in users with Google

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

Before you begin

This tutorial assumes you've already enabled Identity Platform, and have a basic web app written using HTML and JavaScript. To learn about how to enable Identity Platform and sign in, see Quickstart.

Configure Google as a provider

To configure Google as an identity provider:

  1. Go to the Identity Providers page in the Google Cloud console.

    Go to the Identity Providers page

  2. Click Add A Provider.
  3. Select Google from the list.
  4. Enter your Google Web Client ID and Web Secret. If you don't already have an ID and secret, you can obtain one from the API's & Services page.
  5. To allow access from external client IDs, click Add and add your client ID.
  6. To configure your consent screen, click Configure screen. The Google Auth Platform page opens in a separate tab.
  7. In the Google Auth Platform page, configure your OAuth consent screen.
  8. Navigate back to the Identity providers page, in the Project settings side pane, click Add Domain, and add your app's domain.

    We recommend that you don't include localhost in your production projects.

  9. In the Configure your application section, click Setup Details. Copy the snippet into your app's code to initialize the Identity Platform client SDK.
  10. Click Save.

Sign in users with the client SDK

  1. Create an instance of the Google provider object:

    Web version 9

    import{GoogleAuthProvider}from"firebase/auth";
constprovider=newGoogleAuthProvider();

    Web version 8

    varprovider=newfirebase.auth.GoogleAuthProvider();
  2. Optional: Add OAuth scopes. Scopes specify what data you're requesting from Google. More sensitive data may require specific scopes. Consult the provider's documentation to determine what scopes your app needs.

    Web version 9

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

    Web version 8

    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  3. Optional: Localize the authentication flow. You can specify a language, or use the device's default language:

    Web version 9

    import{getAuth}from"firebase/auth";
constauth=getAuth();
auth.languageCode='it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();

    Web version 8

    firebase.auth().languageCode='it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
  4. Optional: Specify additional custom OAuth parameters. These are specific to Google, and are typically used to customize the authentication experience. You can't pass parameters reserved by OAuth or Identity Platform.

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
'login_hint':'user@example.com'
});
  5. Use the Google 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():

    Web version 9

    import{getAuth,signInWithPopup,GoogleAuthProvider}from"firebase/auth";
constauth=getAuth();
signInWithPopup(auth,provider)
.then((result)=>{
// This gives you a Google Access Token. You can use it to access the Google API.
constcredential=GoogleAuthProvider.credentialFromResult(result);
consttoken=credential.accessToken;
// The signed-in user info.
constuser=result.user;
// IdP data available using getAdditionalUserInfo(result)
// ...
}).catch((error)=>{
// Handle Errors here.
consterrorCode=error.code;
consterrorMessage=error.message;
// The email of the user's account used.
constemail=error.customData.email;
// The AuthCredential type that was used.
constcredential=GoogleAuthProvider.credentialFromError(error);
// ...
});

    Web version 8

    firebase.auth()
.signInWithPopup(provider)
.then((result)=>{
/** @type {firebase.auth.OAuthCredential} */
varcredential=result.credential;
// This gives you a Google Access Token. You can use it to access the Google API.
vartoken=credential.accessToken;
// The signed-in user info.
varuser=result.user;
// IdP data available in result.additionalUserInfo.profile.
// ...
}).catch((error)=>{
// Handle Errors here.
varerrorCode=error.code;
varerrorMessage=error.message;
// The email of the user's account used.
varemail=error.email;
// The firebase.auth.AuthCredential type that was used.
varcredential=error.credential;
// ...
});

    To redirect the page, first call signInWithRedirect().

    Follow the best practices when using signInWithRedirect, linkWithRedirect, or reauthenticateWithRedirect.

    Web version 9

    import{getAuth,signInWithRedirect}from"firebase/auth";
constauth=getAuth();
signInWithRedirect(auth,provider);

    Web version 8

    firebase.auth().signInWithRedirect(provider);

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

    Web version 9

    import{getAuth,getRedirectResult,GoogleAuthProvider}from"firebase/auth";
constauth=getAuth();
getRedirectResult(auth)
.then((result)=>{
// This gives you a Google Access Token. You can use it to access Google APIs.
constcredential=GoogleAuthProvider.credentialFromResult(result);
consttoken=credential.accessToken;
// The signed-in user info.
constuser=result.user;
// IdP data available using getAdditionalUserInfo(result)
// ...
}).catch((error)=>{
// Handle Errors here.
consterrorCode=error.code;
consterrorMessage=error.message;
// The email of the user's account used.
constemail=error.customData.email;
// The AuthCredential type that was used.
constcredential=GoogleAuthProvider.credentialFromError(error);
// ...
});

    Web version 8

    firebase.auth()
.getRedirectResult()
.then((result)=>{
if(result.credential){
/** @type {firebase.auth.OAuthCredential} */
varcredential=result.credential;
// This gives you a Google Access Token. You can use it to access the Google API.
vartoken=credential.accessToken;
// ...
}
// The signed-in user info.
varuser=result.user;
// IdP data available in result.additionalUserInfo.profile.
// ...
}).catch((error)=>{
// Handle Errors here.
varerrorCode=error.code;
varerrorMessage=error.message;
// The email of the user's account used.
varemail=error.email;
// The firebase.auth.AuthCredential type that was used.
varcredential=error.credential;
// ...
});

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

REST

curl-H"Authorization: Bearer [TOKEN]"https://www.googleapis.com/oauth2/v2/userinfo

Sign in users manually

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

  1. Integrate Google authentication into your app by following the steps in their developer documentation.
  2. Sign in the user with Google using the flow you implemented in the previous step.
  3. Exchange the token you receive from Google for an Identity Platform credential:

    Web version 9

    import{GoogleAuthProvider}from"firebase/auth";
constcredential=GoogleAuthProvider.credential(idToken);

    Web version 8

    varcredential=firebase.auth.GoogleAuthProvider.credential(idToken);
  4. Use the credential to sign in the user with Identity Platform:

    Web version 9

    import{getAuth,signInWithCredential}from"firebase/auth";
// Sign in with the credential from the user.
constauth=getAuth();
signInWithCredential(auth,credential)
.then((result)=>{
// Signed in 
// ...
})
.catch((error)=>{
// Handle Errors here.
consterrorCode=error.code;
consterrorMessage=error.message;
// The email of the user's account used.
constemail=error.customData.email;
// ...
});

    Web version 8

    // Sign in with the credential from the user.
firebase.auth()
.signInWithCredential(credential)
.then((result)=>{
// Signed in 
// ...
})
.catch((error)=>{
// Handle Errors here.
consterrorCode=error.code;
consterrorMessage=error.message;
// The email of the user's account used.
constemail=error.email;
// ...
});

What's next

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025年12月17日 UTC.