Authentication is one of the most crucial features in any mobile application, and providing users with a seamless login experience can significantly enhance usability. One of the most popular and secure methods is Google Sign-In, which allows users to log in with their Google accounts without needing to create a new username and password.

In this tutorial, we’ll walk you through building a React Native app with Google Sign-In integrated with Firebase Authentication. By the end, you’ll have a fully functional login flow that allows users to:

Sign in using their Google account.
Securely authenticate with Firebase.
Display user information such as name, email, and profile photo.
Sign out when needed.

We’ll use the latest technologies:

React Native 0.80+ with the Community CLI.
Firebase JS SDK v10+ with React Native Firebase.
@react-native-google-signin/google-signin package for native Google authentication.

This tutorial is beginner-friendly, providing step-by-step instructions with code examples for both Android and iOS platforms. Whether you’re building a new app or enhancing an existing one, integrating Google Sign-In with Firebase is a reliable way to handle user authentication.

Prerequisites

Before we begin, make sure you have the following tools and knowledge set up:

1. Installed Software

Node.js (LTS version) → Download here
npm (comes with Node.js) or Yarn as your package manager
Java Development Kit (JDK 17 or later) for Android development
Android Studio with Android SDK & emulator
Xcode (for macOS users building iOS apps)

2. React Native Environment

A working React Native CLI environment.
Follow the React Native Environment Setup guide and choose the React Native CLI Quickstart (not Expo).

3. Firebase Project

A Firebase account → Sign up here.
A new Firebase project created in the Firebase Console.
We will enable Google Sign-In under Firebase Authentication later.

4. Basic Knowledge

Familiarity with React Native components and hooks.
Basic understanding of Firebase Authentication.

5. Test Devices

Either a physical Android/iOS device or emulators/simulators installed via Android Studio/Xcode.

With these prerequisites covered, you’ll be ready to create and run your app without setup issues.

Setting Up a New React Native Project

We’ll start by creating a fresh React Native project using the Community CLI.

1. Create a New Project

Run the following command in your terminal:

npx @react-native-community/cli@latest init RNGoogleSignInFirebase

This will generate a new React Native app named RNGoogleSignInFirebase using version 0.80.0 (the latest stable at the time of writing).

💡 If you already have React Native installed globally, avoid using react-native init. Always use npx to ensure you get the correct version.

2. Navigate into the Project

cd RNGoogleSignInFirebase

3. Run the Project

To verify everything is working, run the app on Android or iOS:

For Android:

npx react-native run-android

For iOS (macOS only):

npx pod-install ios
npx react-native run-ios

If successful, you should see the default React Native welcome screen on your emulator or device. 🎉

React Native Google Sign-In with Firebase Authentication: Step-by-Step - run

Now that the project is ready, we can proceed to install the required dependencies.

Installing Required Packages

We need three main packages:

React Native Firebase Core – required for Firebase integration.
React Native Firebase Auth – provides authentication features.
Google Sign-In package – enables native Google authentication.

1. Install Firebase Dependencies

Run the following commands in your project directory:

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

or using npm:

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

2. Install Google Sign-In Package

yarn add @react-native-google-signin/google-signin

npm install @react-native-google-signin/google-signin

3. iOS Setup (CocoaPods)

If you’re developing for iOS, don’t forget to install CocoaPods dependencies:

cd ios
pod install
cd ..

4. Verify Installation

Check that the installed packages are listed in your package.json:

"@react-native-firebase/app": "^20.x.x",
"@react-native-firebase/auth": "^20.x.x",
"@react-native-google-signin/google-signin": "^13.x.x"

Now our project has all the necessary dependencies for integrating Firebase and Google Sign-In.

Configuring Firebase

1. Create a Firebase Project

Go to the Firebase Console.
Click Add Project → enter a project name (e.g., RNGoogleSignInFirebase).
Disable/enable Google Analytics (optional).
Click Create Project.

2. Enable Authentication

In the Firebase Console, select your project.
Navigate to Authentication → Sign-in method.
Enable Google as a sign-in provider.
Set a project support email (required).

3. Register Your App in Firebase

For Android

In the Firebase Console → Project settings → General → Your apps.
Click Add app → Android.
Enter your Android package name (found in android/app/src/main/AndroidManifest.xml, usually com.rngooglesigninfirebase).
Download the google-services.json file.
```
android/app/google-services.json
```

For iOS

In the Firebase Console → Project settings → General → Your apps.
Click Add app → iOS.
Enter your iOS bundle identifier (found in ios/RNGoogleSignInFirebase.xcodeproj/project.pbxproj).
Download the GoogleService-Info.plist file.
Open Xcode → drag the file into your project, inside the ios/[projectName] folder.

4. Configure Firebase SDK

Android Setup

Edit android/build.gradle and add Google services:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.4.2'
    }
}

Edit android/app/build.gradle and apply the plugin at the bottom:

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

iOS Setup

Open ios/Podfile and ensure Firebase dependencies are included.
Run:

cd ios
pod install
cd ..

✅ At this point, Firebase is fully set up and ready to work with your React Native app. Next, we’ll configure Google Sign-In itself so users can log in with their Google accounts.

Configuring Google Sign-In in React Native

1. Generate a Web Client ID

To connect Google Sign-In with Firebase Auth, we need a Web Client ID from the Firebase Console.

Open your Firebase project.
Go to Project Settings → General → Your apps → Web API Key & OAuth client IDs.
Under OAuth 2.0 Client IDs, copy the Web client ID (not the Android/iOS one).

This ID will be used when configuring Google Sign-In in the app.

2. Configure Google Sign-In in JavaScript

Open your project and create a new file src/config/GoogleSignInConfig.ts (you can also put it inside App.tsx for simplicity).

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

export function configureGoogleSignIn(): void {
  GoogleSignin.configure({
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', // from Firebase Console
    offlineAccess: true, // enable if you need server-side access
    forceCodeForRefreshToken: true, // recommended for Firebase
  });
}

Call this function at the root of your app (inside App.tsx):

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { configureGoogleSignIn } from './src/config/GoogleSignInConfig';

const App: React.FC = () => {
  useEffect(() => {
    configureGoogleSignIn();
  }, []);

  return (
    <View>
      <Text>Google Sign-In with Firebase (TypeScript)</Text>
    </View>
  );
};

export default App;

3. Android Configuration

`android/app/build.gradle`

defaultConfig {
    applicationId "com.rngooglesigninfirebase"
    minSdkVersion 23
    targetSdkVersion 34
    multiDexEnabled true
}

android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

<application
    ...>
    <activity android:name="com.google.android.gms.auth.api.signin.internal.SignInHubActivity"
        android:excludeFromRecents="true"
        android:exported="false"/>
</application>

4. iOS Configuration

In Xcode → Info.plist, add:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
    </array>
  </dict>
</array>

Use the REVERSED_CLIENT_ID from your GoogleService-Info.plist.

✅ That completes the setup for Google Sign-In in TypeScript.
Next, we’ll implement the actual login flow using Firebase Auth.

Implementing Google Sign-In with Firebase Auth (TypeScript)

We’ll create authentication functions and connect Google Sign-In with Firebase Auth.

1. Setup Firebase Auth Service

Create a new file:
src/services/auth.ts

import auth from '@react-native-firebase/auth';
import { GoogleSignin, SignInResponse, SignInSuccessResponse } from '@react-native-google-signin/google-signin';

export interface UserInfo {
  id: string;
  name: string | null;
  email: string | null;
  photo: string | null;
}

export async function signInWithGoogle(): Promise<UserInfo | null> {
  try {
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });

    const result: SignInResponse = await GoogleSignin.signIn();

    // ✅ Ensure it's a success response
    if ('data' in result && result.type === 'success') {
      const successResult = result as SignInSuccessResponse;
      const { idToken } = successResult.data;

      if (!idToken) {
        throw new Error('No ID token returned from Google Sign-In');
      }

      // Create Firebase credential
      const googleCredential = auth.GoogleAuthProvider.credential(idToken);

      // Sign in with Firebase
      const userCredential = await auth().signInWithCredential(googleCredential);

      const { uid, displayName, email, photoURL } = userCredential.user;

      return {
        id: uid,
        name: displayName,
        email,
        photo: photoURL,
      };
    }

    // If canceled or error
    return null;
  } catch (error) {
    console.error('Google Sign-In Error:', error);
    return null;
  }
}

export async function signOutFromGoogle(): Promise<void> {
  try {
    await GoogleSignin.signOut();
    await auth().signOut();
  } catch (error) {
    console.error('Sign-Out Error:', error);
  }
}

2. Create an Auth Context (Optional but Recommended)

We’ll manage the authentication state with React Context.

src/context/AuthContext.tsx

import React, { createContext, useState, useEffect, ReactNode } from 'react';
import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
import { UserInfo, signInWithGoogle, signOutFromGoogle } from '../services/auth';

interface AuthContextType {
  user: UserInfo | null;
  loading: boolean;
  login: () => Promise<void>;
  logout: () => Promise<void>;
}

export const AuthContext = createContext<AuthContextType>({
  user: null,
  loading: true,
  login: async () => {},
  logout: async () => {},
});

export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<UserInfo | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged((firebaseUser: FirebaseAuthTypes.User | null) => {
      if (firebaseUser) {
        setUser({
          id: firebaseUser.uid,
          name: firebaseUser.displayName,
          email: firebaseUser.email,
          photo: firebaseUser.photoURL,
        });
      } else {
        setUser(null);
      }
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const login = async () => {
    const signedInUser = await signInWithGoogle();
    if (signedInUser) {
      setUser(signedInUser);
    }
  };

  const logout = async () => {
    await signOutFromGoogle();
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, loading, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

3. Use Auth Context in the App

Update App.tsx:

import React, { useContext } from 'react';
import { View, Text, Button, Image, ActivityIndicator } from 'react-native';
import { AuthProvider, AuthContext } from './src/context/AuthContext';

const HomeScreen: React.FC = () => {
  const { user, loading, login, logout } = useContext(AuthContext);

  if (loading) {
    return <ActivityIndicator size="large" style={{ flex: 1, justifyContent: 'center' }} />;
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {user ? (
        <>
          <Text>Welcome, {user.name}</Text>
          {user.photo && <Image source={{ uri: user.photo }} style={{ width: 80, height: 80, borderRadius: 40, margin: 10 }} />}
          <Text>{user.email}</Text>
          <Button title="Logout" onPress={logout} />
        </>
      ) : (
        <Button title="Sign in with Google" onPress={login} />
      )}
    </View>
  );
};

const App: React.FC = () => {
  return (
    <AuthProvider>
      <HomeScreen />
    </AuthProvider>
  );
};

export default App;

✅ At this point, your app can:

Sign in with Google.
Authenticate with Firebase.
Display user profile info.
Sign out properly.

Testing the Application

Now that you’ve set up Google Sign-In with Firebase Authentication, it’s time to run and test the app on both Android and iOS.

1. Run the App on Android

Start your Android emulator (or connect a physical device), then run:

npx react-native run-android

On launch, you should see the Login screen with a Google Sign-In button.
Tap Sign In with Google.
Select a Google account.
If successful, you’ll be redirected to the Home screen showing your name, email, and profile photo.
Tap Logout → you should return to the login screen.

✅ That confirms Android setup is working.

2. Run the App on iOS

For iOS, open your project in Xcode and run:

npx pod-install
npx react-native run-ios

On the simulator, tap the Google Sign-In button.
A Safari-based Google login window will appear.
Log in with your Google account.
You’ll be redirected back to the app with your profile details displayed.
Tap Logout → the session clears and you return to the login screen.

✅ That confirms iOS setup is working.

3. Debugging Common Issues

Google sign-in stuck or error
Ensure you copied the SHA-1 / SHA-256 fingerprints into the Firebase console (for Android) and properly configured the REVERSED_CLIENT_ID in Info.plist (for iOS).
idToken is null
Make sure you enabled the Google sign-in provider in the Firebase Console → Authentication → Sign-in method.
App crashes on startup (Android)
Run cd android && ./gradlew clean and rebuild. Also confirm you updated android/build.gradle and app/build.gradle per Firebase setup.

4. Final Flow Recap

Launch app → Login Screen with Google button.
Tap sign in → Google account picker.
Authenticate → App exchanges idToken with Firebase.
Firebase returns authenticated user → App shows Home Screen with profile info.
Tap logout → Clears Firebase + Google session → Redirects back to Login Screen.

At this point, your React Native app is fully integrated with Google Sign-In and Firebase Authentication 🎉

Conclusion and Next Steps

In this tutorial, you successfully built a React Native app with Google Sign-In and Firebase Authentication using TypeScript. Along the way, you:

Set up a new React Native project.
Installed and configured Firebase for Android and iOS.
Integrated Google Sign-In with the latest package versions.
Implemented Firebase authentication using the returned idToken.
Built a login flow with a user profile display.
Added a logout feature that clears sessions from both Google and Firebase.
Tested everything on both Android and iOS

With this foundation, you now have a secure and reliable authentication system ready for production apps.

Next Steps

Here are some ideas to extend this project further:

Store user profiles in Firestore
- Save additional user data (e.g., role, preferences) in Cloud Firestore when a new user signs in.
Protect app routes
- Use the AuthContext to create a ProtectedRoute pattern, restricting access to authenticated users only.
Add other providers
- Enable authentication with Facebook, Apple, or Email/Password in Firebase for more flexibility.
Integrate backend services
- Call your own backend APIs with the Firebase ID token for secure, authenticated requests.
Enhance the UI/UX
- Replace the default buttons with custom Google-branded buttons and add loading indicators during login/logout.

✅ You now have a production-ready React Native authentication system that can be extended into a full-featured app.

You can get the full source code on our GitHub.

That's just the basics. If you need more deep learning about React Native, you can take the following cheap course:

Thanks!

React Native Google Sign-In with Firebase Authentication: Step-by-Step

Learn how to integrate Google Sign-In with Firebase Authentication in React Native using TypeScript. Step-by-step guide with login & logout flow.

Table of Contents: