Expo Docs

Hey friend! We are co-hosting a conference with Software Mansion, learn more.

Google

Provides Google authentication integration for Expo apps, using either the native Google Sign In SDK (only in standalone apps) or a system web browser (not WebView, so credentials saved on the device can be re-used!).
You'll get an access token after a succesful login. Once you have the token, if you would like to make further calls to the Google API, you can use Google's REST APIs directly through HTTP (using fetch, for example).
// Example of using the Google REST API
async function getUserInfo(accessToken) {
  let userInfoResponse = await fetch('https://www.googleapis.com/userinfo/v2/me', {
    headers: { Authorization: `Bearer ${accessToken}`},
  });

  return userInfoResponse;
}

Prompts the user to log into Google and grants your app permission to access some of their Google data, as specified by the scopes.

A map of options:
  • behavior (string) -- The type of behavior to use for login, either web or system. Native (system) can only be used inside of a standalone app when built using the steps described below. Default is web inside of Expo app, and system in standalone. The only case where you would need to change this is if you would prefer to use web inside of a standalone app.
  • scopes (array) -- An array specifying the scopes to ask for from Google for this login (more information here). Default scopes are ['profile', 'email'].
  • androidClientId (string) -- The Android client id registered with Google for use in the Expo client app.
  • iosClientId (string) -- The iOS client id registered with Google for use in the Expo client app.
  • androidStandaloneAppClientId (string) -- The Android client id registered with Google for use in a standalone app.
  • iosStandaloneAppClientId (string) -- The iOS client id registered with Google for use in a standalone app.
  • webClientId (string) -- The web client id registered with Google to generate server tokens.

If the user or Google cancelled the login, returns { type: 'cancel' }.
Otherwise, returns { type: 'success', accessToken, idToken, refreshToken, {...profileInformation} }, accessToken is a string giving the access token to use with Google HTTP API requests.
Please note that to have access to accessToken, idToken and refreshToken you need to pass webClientId for standalone apps.

In the Expo client app, you can only use browser-based login (this works very well actually because it re-uses credentials saved in your system browser). If you build a standalone app, you can use the native login for the platform.
To use Google Sign In, you will need to create a project on the Google Developer Console and create an OAuth 2.0 client ID. This is, unfortunately, super annoying to do and we wish there was a way we could automate this for you, but at the moment the Google Developer Console does not expose an API. You also need to register a separate set of Client IDs for a standalone app, the process for this is described later in this document.
  • Get an app set up on the Google Developer Console
    • Create an app for your project if you haven't already.
    • Once that's done, click "Create Credentials" and then "OAuth client ID." You will be prompted to set the product name on the consent screen, go ahead and do that.
  • Create an iOS OAuth Client ID
    • Select "iOS Application" as the Application Type. Give it a name if you want (e.g. "iOS Development").
    • Use host.exp.exponent as the bundle identifier.
    • Click "Create"
    • You will now see a modal with the client ID.
    • The client ID is used in the iosClientId option for Expo.Google.loginAsync (see code example below).
  • Create an Android OAuth Client ID
    • Select "Android Application" as the Application Type. Give it a name if you want (maybe "Android Development").
    • Run openssl rand -base64 32 | openssl sha1 -c in your terminal, it will output a string that looks like A1:B2:C3 but longer. Copy the output to your clipboard.
    • Paste the output from the previous step into the "Signing-certificate fingerprint" text field.
    • Use host.exp.exponent as the "Package name".
    • Click "Create"
    • You will now see a modal with the Client ID.
    • The client ID is used in the androidClientId option for Expo.Google.loginAsync (see code example below).
  • Add the Client IDs to your app
        import Expo from 'expo';
    
        async function signInWithGoogleAsync() {
          try {
            const result = await Expo.Google.logInAsync({
              androidClientId: YOUR_CLIENT_ID_HERE,
              iosClientId: YOUR_CLIENT_ID_HERE,
              scopes: ['profile', 'email'],
            });
    
            if (result.type === 'success') {
              return result.accessToken;
            } else {
              return {cancelled: true};
            }
          } catch(e) {
            return {error: true};
          }
        }
        

If you want to use Google Sign In for a standalone app, you can follow these steps. These steps assume that you already have it working on the Expo client app. If you have already created an API key for Google Maps, you skip steps 3 through 8, inclusive.
  • Get a Google API Key for your app (skip this if you already have one, eg: for Google Maps)
    1. Build a standalone app and download the apk, or find one that you have already built.
    2. Click Create credentials, then API Key, and finally click RESTRICT KEY in the modal that pops up.
    3. Click the Android apps radio button under Key restriction, then click + Add package name and fingerprint.
    4. Add your android.package from app.json (eg: ca.brentvatne.growlerprowler) to the Package name field.
    5. Run exp fetch:android:hashes.
    6. Take Google Certificate Fingerprint from previous step and insert it in the SHA-1 certificate fingerprint field.
    7. Press Save.
  • Get an OAuth client ID for your app
    1. Build a standalone app and download the apk, or find one that you have already built.
    2. Click Create credentials, then OAuth client ID, then select the Android radio button.
    3. Run exp fetch:android:hashes.
    4. Take Google Certificate Fingerprint from previous step and insert it in the Signing-certificate fingerprint field.
    5. Add your android.package from app.json (eg: ca.brentvatne.growlerprowler) to the Package name field.
    6. Press Create.
  • Add the configuration to your app
    1. Build a standalone app and download the apk, or find one that you have already built.
    2. Go to the Google Developer Credentials and find your API key.
    3. Open app.json and add your Google API Key to android.config.googleSignIn.apiKey.
    4. Run exp fetch:android:hashes.
    5. Take Google Certificate Hash from the previous step to app.json under android.config.googleSignIn.certificateHash.
    6. When you use Expo.Google.logInAsync(..), pass in the OAuth client ID as the androidStandaloneAppClientId option.
    7. Rebuild your standalone app.
Note that if you've enabled Google Play's app signing service, you will need to grab their app signing certificate in production rather than the upload certificate returned by exp fetch:android:hashes. You can do this by grabbing the signature from Play Console -> Your App -> Release management -> App signing, and then going to the API Dashboard -> Credentials and adding the signature to your existing credential.

If you want to use native sign in for a standalone app, you can follow these steps. These steps assume that you already have it working on the Expo client app.
  1. Add a bundleIdentifier to your app.json if you don't already have one.
  2. Open your browser to Google Developer Credentials
  3. Click Create credentials and then OAuth client ID, then choose iOS.
  4. Provide your bundleIdentifier in the Bundle ID field, then press Create.
  5. Add the given iOS URL scheme to your app.json under ios.config.googleSignIn.reservedClientId.
  6. Wherever you use Expo.Google.logInAsync, provide the OAuth client ID as the iosStandaloneAppClientId option.
  7. Rebuild your standalone app.

If you need to access Google APIs using the user's authorization you need to pass an additional web client id. This will add accessToken, idToken, refreshToken and serverAuthCode to the response object that you can use on your server with the client id secret.
  1. Open your browser to Google Developer Credentials
  2. Click Create credentials and then OAuth client ID, then choose web and press Create.
  • For Standalone appsWherever you use Expo.Google.logInAsync, provide the OAuth client ID as the webClientId option.
  • Inside of Expo appsWhen your app is running as an Expo experience, the process is a little different. Due to Google's restrictions, the only way to make this work is via web authentication flow. Once you have your code, send it to your backend and exchange it, but make sure to set the redirect_uri parameter to the same value you used on your client side call to Google. (Something similar to https://auth.expo.io/@username/your-app-slug). With Expo, you can easily authenticate your user with the AuthSession module:
    let result = await Expo.AuthSession.startAsync({
    authUrl:
    `https://accounts.google.com/o/oauth2/v2/auth?` +
    `&client_id=${googleWebAppId}` +
    `&redirect_uri=${encodeURIComponent(redirectUrl)}` +
    `&response_type=code` +
    `&access_type=offline` +
    `&scope=profile`,
    });