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

I'll teach you how to implement Google Sign-In in a React Native app built with Expo. You'll learn how to set up the Expo project, installing necessary dependencies, and configuring Google Cloud for OAuth authentication.

You will learn the recommended approach using Expo Auth Session instead of the deprecated Expo Google Sign-In package. The tutorial also explains how to configure your app’s bundle identifiers and package names to enable proper OAuth redirects.

What's inside

Creating a new Expo project with a blank template
Installing Expo Auth Session and related dependencies
Configuring app.json with bundle identifier and package name
Setting up a Google Cloud project and OAuth consent screen
Creating OAuth client IDs for web and configuring authorized URIs
Using Expo Auth Session to open a web browser for Google login
Handling user permissions and retrieving user info and tokens
Important notes on security and deployment considerations

Creating a new Expo project with a blank template

The first step is to create a new Expo project using the command and selecting the blank template. This sets up a clean React Native environment with JavaScript.

Once the project is created, you navigate into the project folder to start installing dependencies. This fresh start ensures you have a minimal setup tailored for adding Google Sign-In functionality.

Instead of using the deprecated Expo Google Sign-In package, I recommend using Expo Auth Session for authentication flows.

You install along with to open an in-app browser window for the OAuth process. Additional dependencies like and are installed as they are required by the authentication flow to work correctly.

This setup enables a secure and maintainable way to authenticate users with Google.

Configuring app.json with bundle identifier and package name

To properly handle OAuth redirects, you must configure your app’s identifiers in .

For iOS, add a unique bundle identifier in reverse domain name format, for example, . For Android, set the package name similarly.

These identifiers allow Google to redirect users back to your app after login, which is essential for completing the sign-in flow.

You create a new project in Google Cloud Console to manage your app’s OAuth credentials.

I walk through creating the OAuth consent screen, selecting “External” user type, and filling in required fields like app name and support email. You can optionally add a logo and privacy policy links.

This consent screen is what users see when they log in with Google, so it should clearly represent your app.

Creating OAuth client IDs for web and configuring authorized URIs

Next, you create OAuth client IDs in Google Cloud. For this tutorial, a web client ID is created because Expo Auth Session uses a web-based flow.

You add authorized JavaScript origins and redirect URIs, including the Expo redirect URL format: .

This configuration tells Google where to send users after they approve permissions, ensuring the app receives the authentication tokens.

The app uses Expo Auth Session to open a web browser inside the app, prompting the user to sign in with their Google account.

This approach keeps the user inside the app context while securely handling OAuth. After the user grants permission, the app receives an authentication token and user information.

This method replaces the older Expo Google Sign-In and is actively maintained.

Handling user permissions and retrieving user info and tokens

Once the user signs in, the app obtains an access token and user profile data such as name, email, and photo.

This information can be used to authenticate the user within your app and personalize the experience.

I show how to parse the response JSON and handle the authentication state.

Important notes on security and deployment considerations

I warn not to share your client secret or OAuth keys publicly, especially on GitHub.

For production, you should create OAuth client IDs for iOS and Android as well, and configure privacy policies and terms of service in Google Cloud.

This ensures your app complies with Google’s policies and protects user data.

Resources

CourseReact Native course

Master React Native fundamentals and build production apps with lifetime access.

Pro MembershipPro membership

Get access to premium tutorials, projects, and community support.

Let's connect!

Tutorial Sign In with Google | React Native Expo