Google

How it works

Use Cases

Installation

API

import * as Google from 'expo-google-app-auth';

Usage

// First- obtain access token from Expo's Google API
const { type, accessToken, user } = await Google.logInAsync(config);

if (type === 'success') {
  // Then you can use the Google REST API
  let userInfoResponse = await fetch('https://www.googleapis.com/userinfo/v2/me', {
    headers: { Authorization: `Bearer ${accessToken}` },
  });
}

Methods

logInAsync

logInAsync(config: LogInConfig): Promise<LogInResult>

import * as Google from 'expo-google-app-auth';

const { type, accessToken, user } = await Google.logInAsync({
  iosClientId: `<YOUR_IOS_CLIENT_ID_FOR_EXPO>`,
  androidClientId: `<YOUR_ANDROID_CLIENT_ID_FOR_EXPO>`,
  iosStandaloneAppClientId: `<YOUR_IOS_CLIENT_ID>`,
  androidStandaloneAppClientId: `<YOUR_ANDROID_CLIENT_ID>`,
});

if (type === 'success') {
  /* `accessToken` is now valid and can be used to get data from the Google API with HTTP requests */
  console.log(user);
}

logOutAsync

logOutAsync({ accessToken, iosClientId, androidClientId, iosStandaloneAppClientId, androidStandaloneAppClientId }): Promise<any>

import * as Google from 'expo-google-app-auth';

const config = {
  expoClientId: `<YOUR_WEB_CLIENT_ID>`,
  iosClientId: `<YOUR_IOS_CLIENT_ID>`,
  androidClientId: `<YOUR_ANDROID_CLIENT_ID>`,
  iosStandaloneAppClientId: `<YOUR_IOS_CLIENT_ID>`,
  androidStandaloneAppClientId: `<YOUR_ANDROID_CLIENT_ID>`,
};
const { type, accessToken } = await Google.logInAsync(config);

if (type === 'success') {
  /* Log-Out */
  await Google.logOutAsync({ accessToken, ...config });
  /* `accessToken` is now invalid and cannot be used to get data from the Google API with HTTP requests */
}

Using it inside of the Expo app

• Get an app set up on the Google Developer Console
  • Go to the Credentials Page
  • 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 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 Google.loginAsync (see code example below).
• Add the Client IDs to your app

  import * as Google from 'expo-google-app-auth';
  
  async function signInWithGoogleAsync() {
    try {
      const result = await 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 };
    }
  }
  

Deploying to a standalone app on Android

• 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. Go to the Google Developer Credentials
  3. Click Create credentials, then API Key, and finally click RESTRICT KEY in the modal that pops up.
  4. Click the Android apps radio button under Key restriction, then click + Add package name and fingerprint.
  5. Add your android.package from app.json (eg: ca.brentvatne.growlerprowler) to the Package name field.
  6. Run expo fetch:android:hashes.
  7. Take Google Certificate Fingerprint from previous step and insert it in the SHA-1 certificate fingerprint field.
  8. 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. Go to the Google Developer Credentials.
  3. Click Create credentials, then OAuth client ID, then select the Android radio button.
  4. Run expo fetch:android:hashes.
  5. Take Google Certificate Fingerprint from previous step and insert it in the Signing-certificate fingerprint field.
  6. Add your android.package from app.json (eg: ca.brentvatne.growlerprowler) to the Package name field.
  7. 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 expo fetch:android:hashes.
  5. Take Google Certificate Hash from the previous step to app.json under android.config.googleSignIn.certificateHash.
  6. When you use Google.logInAsync(..), pass in the OAuth client ID as the androidStandaloneAppClientId option.
  7. Rebuild your standalone app.

Deploying to a standalone app on iOS

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 Google.logInAsync, provide the OAuth client ID as the iosStandaloneAppClientId option.
7. Rebuild your standalone app.

Server side APIs

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 apps You will need to use expo-google-sign-in to perform server side authentication outside of the Expo client.
• Inside of Expo apps When 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 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`,
});