React Native Firebase - Google Sign In Tutorial | Code with Beto

Learn how to add Google Sign In authentication to a React Native app using Firebase as the backend. You'll learn how to set up Firebase and Google Cloud projects, installing necessary Expo dependencies, and configuring the app for both iOS and Android.

You'll see a demo of signing in on iOS and Android devices, saving user sessions locally with AsyncStorage, and managing authentication state. The tutorial also explains how to prepare your app for production builds using Expo Application Services (EAS).

What's inside

Introduction to the Google Sign In feature with Firebase
Installing required Expo dependencies for authentication
Configuring Metro bundler for Firebase compatibility
Setting up Expo Application Services (EAS) for building
Creating Firebase and Google Cloud projects
Connecting Firebase backend to the React Native app
Managing user sessions with AsyncStorage
Testing sign-in flow on iOS and Android devices

I start by demonstrating the Google Sign In flow working on both iOS and Android devices using Expo. On iOS, a modal appears to select the Google account, while on Android, the user is redirected to a browser for authentication. After signing in, the app receives the user data and updates the UI accordingly.

This setup uses Firebase as the backend authentication service, which manages user accounts and sessions. The tutorial emphasizes that the same Google account can be used across devices and that multiple users can be supported by Firebase.

Installing required Expo dependencies for authentication

To implement Google Sign In, several Expo packages are installed:

for handling OAuth flows
as a dependency for secure operations
to open the authentication page on Android
for app metadata access on Android
to build a custom Expo client for testing native modules
to persist user sessions locally

I show the exact commands to install these dependencies and explain why each is necessary for the authentication flow to work smoothly on both platforms.

Configuring Metro bundler for Firebase compatibility

Since the latest Firebase SDK requires some Metro bundler configuration, the tutorial guides you through generating a file using the command:

Then, you replace the default config with a custom one that ensures Firebase modules are resolved correctly in the Expo environment. This step is crucial to avoid runtime errors related to Firebase imports.

Setting up Expo Application Services (EAS) for building

Because Google Sign In requires native code support, I explain how to prepare your Expo app for production builds using EAS. You install the EAS CLI globally and run:

This command generates an file where you can customize build profiles for development, review, or production. The tutorial also shows how to log in to your Expo account via CLI and verify your setup.

Using EAS allows you to build your app with the necessary native modules and test it on real devices or simulators as if it were a production app.

Creating Firebase and Google Cloud projects

The backend setup involves creating a Firebase project and a Google Cloud project. I walk through:

Creating a new Firebase project in the Firebase console
Creating a corresponding Google Cloud project
Linking the projects and enabling necessary APIs

You register a web app in Firebase to obtain configuration credentials needed by your React Native app. This setup is essential to connect your frontend with Firebase authentication services.

Connecting Firebase backend to the React Native app

After setting up Firebase, you retrieve the Firebase config object from the project settings under the web app section. This includes API keys and project identifiers.

The tutorial shows how to add this config to your React Native app and initialize Firebase. This connection enables your app to authenticate users via Google Sign In and manage their sessions through Firebase's backend.

Managing user sessions with AsyncStorage

To avoid requiring users to sign in every time they open the app, I demonstrate saving the authenticated user data locally using AsyncStorage.

On app launch, the stored user session is retrieved to determine if the user is already signed in. If so, the app navigates directly to the home screen. Otherwise, it shows the sign-in screen.

There is also a settings screen where users can clear the stored session, forcing a fresh sign-in on the next app load.

I show live demos on both iOS and Android devices. On iOS, a modal prompts account selection, while Android redirects to a browser for authentication.

After signing in, the app updates the UI to show the user's email and other info. The session persists across app reloads until cleared.

This practical demonstration confirms the integration works as expected on both platforms using Expo and Firebase.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Get access to exclusive tutorials and projects including advanced React Native Firebase integrations.

Let's connect!

React Native Firebase - Google Sign In Tutorial