Integrating Google Login with Firebase in React Native

Introduction

Users demand a seamless login process while using a mobile app in the current digital era. Integrating social logins, like Google Login, inside your app is one method to accomplish this. Google Login can be easily added to your project using React Native, and Firebase makes it very simple to handle user data storage and authentication. We’ll go over how to include Google Login with Firebase into your React Native project in this article. You’ll fully grasp how to set up Google Login using Firebase and employ it to authenticate your users by the end of this article.

Let’s get started!

Prerequisite

Step 1 : Install Node.js and npm

Before you can start using React Native, you need to have Node.js and npm installed on your computer. You can download and install them from the official Node.js website:

Node.js

Step 2 : Install the React Native CLI

Once you have Node.js and npm installed, you can use npm to install the React Native CLI by running the following command in your terminal:

npm install -g react-native-cli

Step 3: Create a new React Native project

To create a new React Native project, navigate to the directory where you want to create the project and run the following command:

npx react-native init myProjectName 
(or)
npx react-native init myProjectName --version version-you-want
Example: npx react-native init myProjectName --version 0.70.6

Replace myProjectName with the name of your project.

This will create a new React Native project with the default files and folders needed to get started.

Step 4: Run your React Native project

To run your new project, navigate to the project directory and run the following command:

npx react-native run-ios

This will launch the iOS simulator and run your React Native app. If you want to run your app on an Android device or emulator, use the following command:

npx react-native run-android

Now that your project is set up and running, you can start building your React Native app!

Firebase console setup

1. Go to firsebase console

https://console.firebase.google.com/

2. Click “Create Project”

Give the project name and then click “Continue”

3. Google analytics for your firebase project.

It depends on your project. You can decide whether you need google analytics or not. If you do not need this, disable the option. Now click on “Create Project”

4. If you enable the “Google Analytics”, you will move to “Configure Google Analytics”

Now Click “Create Project”. Click “Continue”

5. Now your project is ready

6. Let us integrate the google login for android. Click android logo on the center.

7. Add Firebase to your Android app

In the android package name, you have to give your project package name which you can find from the path.

/android/app/src/main/AndroidManifest.xml

Then give your app nickname which is optional.

To get the Debug signing certificate SHA-1, go to path android/app and then run the following command

keytool -list -v -alias androiddebugkey -keystore debug.keystore

Give keystore password as “android” and Click “Enter”

Now you can find the SHA1 key under the certificate fingerprints. Copy that key and paste in the debug signing certificate SHA-1 field. Click “Next” until “Continue to console”

Go to “Project settings”, under general tab download the google-services.json

Copy the ”google-services.json” and paste it under the /android/app/ path of your project.

Then, go to authentication under the build section. Click “Sign-in method”. Choose Google under Additional providers.”

Then enable “Google” and give your project support email id. Click “Save”.

Firebase console setup is over!

Now Lets move to the project setup.

Go to your project root directory and run the following command.

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

Then, go the file /android/build.gradle

buildscript {
    ..........
    ...
    dependencies {
       ........
        classpath 'com.google.gms:google-services:4.3.14' //paste this line
        ........
    }
}

Now go to your file login page and import the package as like below

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

Add the below code inside the useEffect section.

useEffect(()=>{
        GoogleSignin.configure({
            webClientId: webClientId, 
        })  
    },[])
// use the client id in the google-services.json file under the "oauth_client" 
(clinet_type : 3)

await GoogleSignin.signIn(); 
This is used to call the google sign in function and in response you will 
get the userinfo details.

The final code looks like below

Now you have successfully integrated Google login with Firebase in React Native for Android apps!

About the Author:

Ramvasanth Mahendran is a Software Development Engineer with 2 years of experience, focused on delivering clean, error-free code for scalable, user friendly designs.

About CodeStax.Ai

At CodeStax.Ai, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But the real magic? It’s our tech tribe behind the scenes. If you’ve got a knack for innovation and a passion for redefining the norm, we’ve got the perfect tech playground for you. CodeStax.Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us, and be part of the revolution that’s redefining the enterprise tech landscape.