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

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

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:

‍

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:

‍

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:

‍

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.

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

‍

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.

‍

Then, go the file /android/build.gradle

‍

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

‍

Add the below code inside the useEffect section.

‍

The final code looks like below
‍

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