How to Implement Google Sign-In in React Native App Using Firebase?

Incorporating Google Sign-In into your React Native application will make the user experience for authenticating with their Google accounts much faster and more efficient; better for UX, easier for users, and more secure. In this article, I will demonstrate to you how to add Google Sign-In to your React Native App with Firebase in a step-by-step process.

Steps to Implement Google Sign-In using Firebase in React Native:

Step 1: Firebase Project Setup

• Create a Firebase Project: Go to the Firebase Console and create a new Firebase project, or select the existing project you want to use.
• Enable Google Sign-In: In your Firebase Project, go to your Firebase Console’s left tab and select “Authentication” and the “Sign-in method” tab. Turn “On” the Google Sign-In provider and save the changes.
• Set Up Android and iOS Application: Follow the instructions on the screen and add your iOS and Android Applications to Firebase Project. You will have to provide your Android Package Name, your Android App’s SHA-1 fingerprint, and your iOS App’s Bundle Identification. Download and place the google-services.json(Android) and GoogleService-Info.plist (iOS) files in the correct locations within your React Native project.
• Get Web Client ID: While configuring Google Sign-In in the Firebase console, note down your Web client ID. This is crucial for the React Native Google Sign-In library.

Step 2: Install Required Libraries

Using yarn

yarn add @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin

Using npm

npm install @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin

Step 3: Configure Google Sign-In

Android

1. Place google-services.json in android/app/.
2. Edit android/build.gradle:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.15' // Add if not present
    }
}

3. Edit android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

iOS

1. Place GoogleService-Info.plist in ios/ project.
2. Install pods:

cd ios && pod install

3. Open Info.plist and add URL types:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

Replace YOUR_REVERSED_CLIENT_ID with the REVERSED_CLIENT_ID from your GoogleService-Info.plist.

Step 4: Example 

import React, { useEffect } from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";
import auth from "@react-native-firebase/auth";
import { GoogleSignin } from "@react-native-google-signin/google-signin";

const App = () => {
const googleLogin = async () => {
  try {
    // Configure Google Sign-In (only once, usually in useEffect or app init)
    GoogleSignin.configure({
      webClientId: "your web ClientId",
      scopes: ['profile', 'email'],
      offlineAccess: false,
      forceCodeForRefreshToken: true,
    });
    // Sign in
    const userInfo = await GoogleSignin.signIn();
    console.log("User Info:", userInfo.user);
    // Optional: Firebase login with Google credentials
    const { idToken } = await GoogleSignin.getTokens();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    const userSignIn = await auth().signInWithCredential(googleCredential);
    console.log("Firebase User:", userSignIn.user);
  } catch (error) {
    console.error('Google Sign-In Error:', error);
  }
};
return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={googleLogin}>
        <Text style={styles.buttonText}>Sign in with Google</Text>
      </Pressable>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },

  button: {
    backgroundColor: "#4285F4",
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});
export default App;

Conclusion

By following the steps above, you can easily integrate Google Sign-In in your React Native app using Firebase. It’s fast, secure, and provides users with a frictionless authentication experience.

With Firebase Authentication handling the backend and Google Sign-In offering convenience, your app gains both scalability and trustworthiness — a win-win for developers and users alike!

FAQ

1. Can I use Google Sign-In without Firebase in React Native?

Yes, you can use the @react-native-google-signin/google-signin package independently, but Firebase provides added benefits like secure token handling and integration with other Firebase services.

2. What is the difference between Web Client ID and Android Client ID?

The Web Client ID is used for OAuth authentication and must be used when integrating Google Sign-In with Firebase.

3. Is Google Sign-In free with Firebase?

Yes, Firebase Authentication (including Google Sign-In) is free within the usage limits of Firebase’s free plan.