Sign In with Google | React Native Expo | Tutorial 2023 | Code with Beto

Learn how to add Google Sign-In authentication to a React Native app built with Expo, covering web, iOS, and Android platforms. It guides you through setting up the Google Cloud project, configuring OAuth consent screens, and creating client IDs for each platform.

You'll see how to install necessary Expo and React Native dependencies, run the app on web with HTTPS, and prepare your app identifiers for iOS and Android. This tutorial is ideal if you want a simple, cross-platform Google login flow in your Expo app.

What's inside

Creating a new Expo project and installing dependencies
Setting up a Google Cloud project and OAuth consent screen
Creating OAuth client IDs for web, iOS, and Android
Running the Expo app on web with HTTPS for redirect URLs
Preparing iOS and Android bundle identifiers with Expo prebuild
Copying client IDs into the app configuration
Testing Google Sign-In on Android, iOS, and web platforms

Creating a new Expo project and installing dependencies

The first step is to create a new Expo project using and open it in Visual Studio Code. You then install several dependencies:

to manage authentication flows
as a peer dependency for security
to open the sign-in page inside the app
, , and for web support
Optionally, to save user info locally and avoid repeated sign-ins

These packages enable a smooth Google Sign-In experience across platforms, including web.

You need a Google Claude account and project to enable Google Sign-In. Inside the Google Cloud Console:

Create a new project or select an existing one
Configure the OAuth consent screen by choosing user type (external for public apps)
Provide app name, support email, and developer contact info
Optionally add a logo and domain info
Add scopes if needed (default scopes are usually enough)
Add test users if your app is in testing mode

The consent screen is what users see when signing in, so it must clearly identify your app and data usage.

Creating OAuth client IDs for web, iOS, and Android

After the consent screen is ready, create OAuth client IDs for each platform:

For web, specify authorized redirect URIs matching your app URL (e.g., )
For iOS, provide the bundle identifier from your app config
For Android, provide the package name (also from your app config)

Each client ID is unique and must be kept private. You will copy these IDs into your app code to configure the sign-in flow.

Running the Expo app on web with HTTPS for redirect URLs

To get the correct web URL for OAuth redirects, run the Expo app on web with HTTPS enabled:

Use the command
Open the web app in a browser to confirm it reloads on code changes

This HTTPS URL is required by Google for security reasons and must be added to the authorized redirect URIs in your Google Cloud credentials.

Preparing iOS and Android bundle identifiers with Expo prebuild

If your Expo app does not yet have iOS and Android identifiers, run:

npx expo prebuild

This command generates native project files and assigns default bundle identifiers and package names. You can then copy these identifiers from the generated files and use them when creating OAuth client IDs in Google Cloud.

This step is essential to link your native apps with Google Sign-In properly.

Copying client IDs into the app configuration

Once you have the client IDs for web, iOS, and Android, paste them into your app code (e.g., ) as configuration values. This allows the Expo Auth Session library to use the correct credentials depending on the platform.

Keep these IDs secure and do not share them publicly.

Finally, test the sign-in flow on all platforms:

On Android and iOS simulators or devices, select your Google account and confirm sign-in
On web, sign in quickly if already logged in or enter credentials if not

I show a simple UI with a sign-in button and demonstrates successful authentication on all three platforms. User info can be saved locally to avoid repeated sign-ins.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Let's connect!

Sign In with Google | React Native Expo | Tutorial 2023