DEV Community

Cover image for Google Sign-In in React Native (Expo): A Practical, Production-Ready Guide
Omotola Odumosu
Omotola Odumosu

Posted on

Google Sign-In in React Native (Expo): A Practical, Production-Ready Guide

#architecture #oauth #reactnative #frontend

Google authentication is one of the most common login methods in modern mobile apps. However, despite how common it is, developers still find it difficult to implement correctly. In this article, I’ll walk you through how to set up Google Sign-In in a React Native app using Expo, explaining every step in simple terms. This guide covers the complete setup, common pitfalls, and production considerations.

For simplicity, this guide assumes:

  • You are using React Native with Expo

  • You want Google Sign-In to work on Android and iOS

  • You are not using Expo Go (Google Sign-In does not work on Expo Go app, so you need a development build, but dont worry, everything will be covered in this guide)

Why Google Sign-In Doesn’t Work in Expo Go

Expo Go is a generic app. Google Sign-In requires native configuration, which means you must use a development build or a production build.

Step 1: Configure the OAuth Consent Screen

  • Go to Google Cloud Console

  • Create a new project (or select an existing one)

  • Navigate to APIs & Services → OAuth consent screen

  • Click Get Started on the consent screen dashboard

  • Then fill in the required information. This screen tells Google who you are and why you’re requesting user data

Under App Information, fill

   - App name
   - User support email
Enter fullscreen mode Exit fullscreen mode

Under Audience, choose

   - External
Enter fullscreen mode Exit fullscreen mode

Under Contact Information, fill

   - your email address
Enter fullscreen mode Exit fullscreen mode

Then, click Create. Your OAuth consent configuration has been created.

Step 2: Create OAuth Client IDs

From the OAuth consent dashboard, you can just click the create OAuth Client button, or go to APIs & Services → Credentials → Create Credentials → OAuth Client ID

Create three client IDs:

  • Web Client ID

  • Android Client ID

  • iOS Client ID

Even though we have three client IDs, we will only use the Web Client ID in the app. However, having the Android Client ID and iOS Client ID allows the Google Auth to work without error in our Android and iOS applications. Without them, Google authentication may fail or behave inconsistently on Android or iOS.

After creating the Web Client ID, copy it. It looks like this:


432096137304-vj6daolt1t0c7ta233ql9avcum9brt6q.apps.googleusercontent.com
Enter fullscreen mode Exit fullscreen mode

Step 3: Store the Client ID in an Environment Variable

In the root of your project, create either

  • .env

  • or .env.local

Note: You do NOT need to install dotenv package; Expo already supports this.

Add your web client ID to the env file. It'll look like this:


EXPO_PUBLIC_CLIENT_ID=432096137304-vj6daolt1t0c7ta233ql9avcum9brt6q.apps.googleusercontent.com
Enter fullscreen mode Exit fullscreen mode

Important
Take note of the prefix EXPO_PUBLIC_ , it is mandatory. This prefix tells Expo to expose the variable to the client at build time. Without it, Expo will NOT expose the variable to your app

Step 4: Install Google Sign-In Package

Run this in your terminal:


npm install @react-native-google-signin/google-signin
Enter fullscreen mode Exit fullscreen mode

This installs the Google sign-in package required for our authentication to work.

Step 5: Create an Expo Development Build

As mentioned earlier, Expo Go does not support Google Sign-In, so now we need to run a development build following Expo's official documentation

https://docs.expo.dev/develop/development-builds/create-a-build/

Once the build is installed on your device/emulator, it is what we will use for testing.

Step 6: Configure Google Sign-In (Root Layout)

In your root layout or root component, configure Google Sign-In once when the app loads.


import { useEffect } from "react";
import { GoogleSignin } from "@react-native-google-signin/google-signin";

useEffect(() => {
  GoogleSignin.configure({
    webClientId: process.env.EXPO_PUBLIC_CLIENT_ID,
  });
}, []);
Enter fullscreen mode Exit fullscreen mode

This tells Google which app is requesting authentication and which client ID to trust.

Step 7: Create the Google Sign-In Function

In your sign-in screen, create the function that triggers Google authentication.


import { GoogleSignin } from "@react-native-google-signin/google-signin";

const signInWithGoogle = async () => {
  try {
    await GoogleSignin.hasPlayServices();

    const user = await GoogleSignin.signIn();
    console.log(user);

  } catch (error: any) {
    console.log(error.message);
  }
};
Enter fullscreen mode Exit fullscreen mode

What’s happening here?

  • hasPlayServices() checks if Google services are available

  • signIn() opens the Google account picker

  • Google returns a user object after successful login

Step 8: Use the User Object

After sign-in, Google returns a user object containing:

  • Email

  • Name

  • ID token

  • Profile picture

With this returned user object, you can do whatever you like with it. you can

  • Send the token to your backend

  • Create or authenticate users

  • Store the data securely, etc.

However, for the purpose of this guide, we only logged the user object in the console so you can always have a look at the returned structure. For now, logging it helps you confirm everything works.

Additional Tip:

While this guide uses Expo, the same Google Sign-In flow applies to bare React Native apps. The JavaScript logic remains the same, but bare React Native requires additional native configuration for Android and iOS, such as manual native setup and environment variable handling, which don’t come preconfigured in bare React Native.

Conclusion

Google authentication can seem tricky and hard when you don't know the right approach to implementing it. But I believe I've shown you that with the right guidance, Google authentication in React Native (Expo) isn't hard; you just need to follow the right setup. Once configured, it provides a fast, secure, and familiar login experience for users.

If you follow each step carefully, you’ll have Google Sign-In working smoothly in your app right now.

Have you run into Google Sign-In issues before? And did this post help simplify things for you?

If yes, drop a ❤️ or 🦄 reaction and follow me here on dev.to. I share more practical, plain-English breakdowns like this.

You can also connect with me on social media. I’d love to learn, share, and grow together with you!

LinkedIn: LinkedIn
Twitter: Twitter
Instagram: Instagram
Graphics Credit: LeadSync

Top comments (0)