expo-google-app-auth provides Google authentication integration for Expo apps using a secure system web browser with native expo-app-auth. This is better than a WebView because you can reuse credentials saved on the device.
You'll get an access token after a successful 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).
In the managed workflow, native Google Sign-In functionality can be used only in standalone builds, not the Expo client. If you would like to use the native authentication flow, see GoogleSignIn.
For managed apps, you'll need to run expo install expo-google-app-auth. To use it in a bare React Native app, you will need to run npx pod-install and do a new build after installing the package because this library pulls in expo-app-auth as a dependency.
// First- obtain access token from Expo's Google APIconst{ type, accessToken, user }=awaitGoogle.logInAsync(config);if(type ==='success'){// Then you can use the Google REST APIlet userInfoResponse =awaitfetch('https://www.googleapis.com/userinfo/v2/me',{
headers:{Authorization:`Bearer ${accessToken}`},});}
Prompts the user to log into Google and grants your app permission to access some of their Google data, as specified by the scopes.
The difference between this method and native authentication are very sparce. Google has done a very good job at making the secure web authentication flow work consistently across devices.
Defaults to ${AppAuth.OAuthRedirect}:/oauth2redirect/google. Optionally you can define your own redirect URL, just make sure to see the note below.
behavior
'system' | 'web'
DEPRECATED use expo-google-sign-in for system authentication.
Note on redirectUrl:
If you choose to provide your own redirectUrl, it should start with the value returned by AppAuth.OAuthRedirect. This way, the method will function correctly and consistently whether you are testing in the Expo client or as a standalone app.
Returns
Name
Type
Description
logInResult
Promise<LogInResult>
Resolves into the results of your login attempt.
LogInResult
Name
Type
Description
type
'cancel' | 'success'
Denotes the summary of the user event.
accessToken
string | undefined
Used for accessing data from Google, invalidate to "log out"
idToken
string | null
ID token
refreshToken
string | null
Refresh the other tokens.
user
GoogleUser
An object with data regarding the authenticated user.
GoogleUser
Name
Type
Description
id
string | undefined
ID for the user
name
string | undefined
name for the user
givenName
string | undefined
first name for the user
familyName
string | undefined
last name for the user
photoUrl
string | undefined
photo for the user
email
string | undefined
email address for the user
Example
import*asGooglefrom'expo-google-app-auth';const{ type, accessToken, user }=awaitGoogle.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);}
import*asGooglefrom'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 }=awaitGoogle.logInAsync(config);if(type ==='success'){/* Log-Out */awaitGoogle.logOutAsync({ accessToken,...config });/* `accessToken` is now invalid and cannot be used to get data from the Google API with HTTP requests */}
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).
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.
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*asGooglefrom'expo-google-app-auth';asyncfunctionsignInWithGoogleAsync(){try{const result =awaitGoogle.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
Build a standalone app and download the apk, or find one that you have already built.
Open app.json and add your Google API Key to android.config.googleSignIn.apiKey.
Run expo fetch:android:hashes.
Take Google Certificate Hash from the previous step to app.json under android.config.googleSignIn.certificateHash.
When you use Google.logInAsync(..), pass in the OAuth client ID as the androidStandaloneAppClientId option.
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 expo 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.
Add a bundleIdentifier to your app.json if you don't already have one.
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.
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 =awaitAuthSession.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`,});