Integrating Google Sign-In with React Native Expo: A Complete Guide

Google Sign-In is one of the most popular authentication methods used by modern apps. It allows users to log in quickly and securely, leveraging their Google accounts. This blog will guide you step-by-step on how to integrate Google Sign-In into a React Native Expo project.

Why Google Sign-In?

• Simplified Authentication: No need for users to remember another set of credentials.
• Secure: Google handles the security mechanisms, reducing your app’s exposure to vulnerabilities.
• User-Friendly: With just a few clicks, users can authenticate without lengthy forms.

If you’re ready to get started, let’s dive into the setup.

Prerequisites

Before getting started, ensure you have the following:

1. Expo SDK 50+: Ensure your project is running on Expo SDK 50 or later. Google Sign-In requires a minimum iOS version of 13.4 in SDK 50.
2. Development Build: You cannot use the standard Expo Go app for this setup since the Google Sign-In plugin uses custom native code. You’ll need to create a development build.

Step 1: Installing the Google Sign-In Package

Start by installing the official Google Sign-In package:

npx expo install @react-native-google-signin/google-signin


## Step 2: Configuring the Plugin

After installing the package, the next step is configuring your Expo app to use it. Open your `app.json` or `app.config.js` and make the following changes.

### Without Firebase Authentication

If you're not using Firebase, you'll need to specify the `iosUrlScheme`. This is derived from the **OAuth 2.0 Client ID** for iOS.

To get the `iosUrlScheme`:
1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
2. Create a new project or use an existing one.
3. Navigate to **APIs & Services > Credentials**.
4. Create an **OAuth 2.0 Client ID** for iOS, and note the `REVERSED_CLIENT_ID`.

Update `app.json` as follows:

```json
{
  "expo": {
    "plugins": [
      [
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": "com.googleusercontent.apps.YOUR_CLIENT_ID"
        }
      ]
    ]
  }
}

Replace YOUR_CLIENT_ID with your REVERSED_CLIENT_ID.

With Firebase Authentication

If you’re using Firebase Authentication, you’ll need the Firebase configuration files:

1. Android: Download google-services.json from Firebase.
2. iOS: Download GoogleService-Info.plist from Firebase.

Place these files in the root of your project directory and update your app.json:

{
  "expo": {
    "plugins": ["@react-native-google-signin/google-signin"],
    "android": {
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    }
  }
}

Step 3: Rebuilding Your App

To apply the changes to your project, rebuild the native directories using the following commands:

npx expo prebuild --clean

Next, run the app on both platforms:

npx expo run:android
npx expo run:ios

Step 4: Adding Sign-In Logic in Your App

Here’s how you can implement Google Sign-In functionality in your React Native app:

1. Import the necessary functions:

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

2. Configure Google Sign-In in your app:

   GoogleSignin.configure({
     webClientId: "YOUR_WEB_CLIENT_ID", // Client ID from Google Cloud Console
     offlineAccess: true, // Enables server-side access tokens
   });
   

3. Add a function for signing in:

   const signIn = async () => {
     try {
       await GoogleSignin.hasPlayServices();
       const userInfo = await GoogleSignin.signIn();
       console.log(userInfo);
     } catch (error) {
       if (error.code === statusCodes.SIGN_IN_CANCELLED) {
         console.log("User cancelled the login flow");
       } else if (error.code === statusCodes.IN_PROGRESS) {
         console.log("Sign-in is in progress");
       } else {
         console.log("An error occurred:", error);
       }
     }
   };
   

4. Add a button to trigger the sign-in process:

   <Button title="Sign in with Google" onPress={signIn} />
   

Step 5: Testing Your Integration

• Test the app on a development build.
• Ensure the Google Sign-In button works, and the authentication flow completes.
• Check the console for the user’s information after a successful login.