Authentication with Google and AuthSession API

Setup consent screen

On the Credentials page, click the Create credentials button, select OAuth client ID and then click Configure Consent screen. You will be prompted to select properties such as User Type and other app-related information on this page. Continue the process and when you are done, proceed with the next step.

Create client IDs

Add a scheme

For a development build and when setting up production apps, define scheme in the Expo config file. It is required for the authentication flow to complete the process and redirect the user back to the app. It handles the process of deep linking back to the app.

{
  "expo": {
    "scheme": "yourscheme"
  }
}

If you do not provide a value for the scheme, the authentication flow will complete, however, the user will not be redirected back to the app. They will have to manually exit the authentication popup which will result in the rejection of the process.

Add import statements

Add the following import statements to your project code. The WebBrowser API and the Google provider from the expo-auth-session are essential to handle the authentication process.

import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';

Add a method to dismiss the web popup

Expo's WebBrowser API provides maybeCompleteAuthSession() method to dismiss the popup when the authentication sessions is completed successfully. It uses the redirect URL added in the provider's authorized list of URLs.

Invoke this method to the app screen you want to redirect back to by adding the following code snippet:

WebBrowser.maybeCompleteAuthSession();

If this method is not invoked, the popup will not dismiss itself.

Pass the client ID to the provider

Google.useAuthRequest() hook provides request and response objects. It allows for async setup, which means that a mobile web browser won't block the request. It also accepts an object of client IDs that are generated in the Google Cloud console.

Define this hook inside the React component by adding the code snippet below:

const [request, response, promptAsync] = Google.useAuthRequest({
  androidClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
  iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
});

In the above code snippet, replace the GOOGLE_GUID with the client ID generated in the Google Cloud console for your app. Also, you include the client IDs for the platforms you want to support.

Send the auth request

useAuthRequest() hook also provides promptAsync() that prompts the user to authenticate by opening a web browser. It is invoked when the user clicks the login button. The button must be disabled until the request is loaded asynchronously. This is done by passing the request object from the useAuthRequest hook to the disabled prop of the button component.

An example button component is shown below:

<Button
  title="Sign in with Google"
  disabled={!request}
  onPress={() => {
    promptAsync();
  }}
/>