Why Choose Google?

Google is one of the most popular and widely used authentication providers. By integrating Google login into your app, you can provide a seamless and secure authentication experience for your users. Here are a few reasons why you might want to use Google login:

1. User Convenience: Many users already have Google accounts, which makes the login process faster and more convenient.
2. Security: Google provides robust security features, including two-factor authentication, to protect user accounts.
3. Trust: Users are more likely to trust and use a login method provided by a well-known and reputable company like Google.
4. Cross-Platform: Google login can be used across different platforms, making it easier to manage user authentication in a consistent manner.

In the next sections, we will cover the steps required to set up and integrate Google login into your React Native Expo project.

Let’s get started!

Step 1: Install Required Packages

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

Step 2: Setting Up Firebase Project

1. Go to Firebase Console:

Navigate to Firebase Console and create a new project or use an existing one.

2. Add Your App to Firebase

Click "Add app" in the Firebase project dashboard.

For React Native, select iOS or Android (depending on your platform).

Follow the instructions to download the google-services.json (for Android) or GoogleService-Info.plist (for iOS) and add these to your project directory

3. Enable Google Sign-In in Firebase:

In your Firebase project, navigate to Authentication from the left-hand menu.

Under the Sign-in method tab, enable Google sign-in.

After enable, click Web SDK configuration, copy value of Web client ID

4. Add SHA-1 fingerprint for Android

To enable Google sign-in for your Android apps, you must provide the SHA-1 release fingerprint for each app

To get the SHA-1 key for your Android project, you can follow these steps:

Open a terminal (or command prompt) and navigate to the root directory of your Android project:

cd android

Once you're in the android folder, run the following Gradle command to generate the signing report:

./gradlew app:signingReport

After the command completes, you should see output that includes a section like this:

Variant: debug
Config: debug
Store: /path/to/your/keystore
Alias: androiddebugkey
MD5: xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
SHA-1: xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
SHA-256: xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx

The SHA-1 is the value you need for Firebase or other services that require it.

In the Firebase Console, paste the SHA-1 fingerprint you obtained earlier into the "Add SHA-1 fingerprint" field for your Android app.

Make sure to add the SHA-1 from the release keystore to Firebase for future releases.

5. Redownload the Google Services Files

To do this, go to your Firebase project settings, navigate to the "General" tab, and select your app. From there, you can download the updated configuration files and replace the existing ones in your project directory.

Download the google-services.json (for Android) or GoogleService-Info.plist (for iOS) and place them in the appropriate directories in your project.

6. Configure iOS URL Scheme and service files

To enable Google Sign-In on iOS, you need to configure the URL scheme in your app. This is done by adding the iosUrlScheme to your Expo configuration app.json.

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

To get the iosUrlScheme value from your GoogleService-Info.plist file, follow these steps:

Open the GoogleService-Info.plist file in a text editor.

Look for the REVERSED_CLIENT_ID key in the file. The value associated with this key is the iosUrlScheme you need.

7. Rebuild Your app

After making these changes, you need to rebuild your Expo project to apply the new configurations. Run the following command to rebuild your app:

# For iOS
npx expo prebuild
npx expo run:ios

# For Android
npx expo prebuild
npx expo run:android

After running npx expo prebuild, it will generate the native iOS and Android configurations.

Step 3: Implement Google Login in Your App

In _layout.tsx (or a relevant component), configure the Google Sign-In library:

import React, { useEffect } from "react";
import { View, Button, Text } from "react-native";
import * as Google from "expo-auth-session";
import {
  GoogleSignin,
  isErrorWithCode,
} from "@react-native-google-signin/google-signin";

const App = () => {
  useEffect(() => {
    GoogleSignin.configure({
      webClientId: "YOUR_GOOGLE_CLIENT_ID_HERE",
    });
  }, []);

  const handleGoogleSignIn = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
    } catch (error) {
      if (isErrorWithCode(error)) {
        console.error("Error during Google Sign-In", error);
      }
    }
  };

  return (
    <View>
      <Button title="Sign In with Google" onPress={handleGoogleSignIn} />
    </View>
  );
};

export default App;

To get the webClientId from the Firebase Console, follow these steps:

1. Go to the Firebase Console.
2. Select your project.
3. Navigate to Authentication from the left-hand menu.
4. Under the Sign-in method tab, click on Google.
5. Click on the Web SDK configuration link.
6. Copy the value of Web client ID.

Use this Web client ID in your GoogleSignin configuration:

Step 4: Handling Sign-Out

To handle sign-out, use the GoogleSignin.signOut() function:

const handleSignOut = async () => {
  try {
    await GoogleSignin.signOut();
    console.log("User signed out");
  } catch (error) {
    console.error("Error signing out", error);
  }
};

You can call handleSignOut when you want to log out the user, for example, in a button or after some action.

Conclusion

Integrating Google Sign-In into your React Native app using Expo and @react-native-google-signin/google-signin is fairly straightforward with the help of Expo’s managed workflow. You can now provide your users with an easy and secure sign-in experience using their Google accounts.