Unlocking the Door: Implementing Google Login in React Native for Seamless Access

Setting Up Firebase for React Native Google Login

Welcome to our comprehensive tutorial on setting up Firebase for Google Login in your React Native app! In this step-by-step guide, we'll walk you through the process of integrating Firebase Authentication with Google Login in your React Native project.

Firebase offers a robust suite of tools for building powerful mobile and web applications, and integrating Google Login through Firebase Authentication streamlines the user authentication process while providing enhanced security features.

In this tutorial, we'll cover everything you need to know to seamlessly integrate Google Login using Firebase in your React Native app. From setting up a Firebase project to configuring Google OAuth credentials and implementing the authentication flow in your React Native app, we've got you covered.

Whether you're a seasoned developer looking to enhance user authentication in your React Native app or a newcomer eager to explore the world of Firebase, this tutorial is tailored for you. Follow along with our clear instructions and code snippets to get your Firebase-powered Google Login up and running in no time

@react-native-google-signin is a fantastic library that simplifies the process of integrating Google Sign-In into your React Native applications. With its straightforward setup and comprehensive documentation, you'll have Google Login up and running in no time.

In this guide, we'll walk you through the installation process step by step, ensuring you have everything you need to start authenticating users with Google in your React Native app.

Whether you're a beginner exploring the world of mobile app development or a seasoned developer seeking to enhance user experience, @react-native-google-signin is an excellent choice for integrating Google Login effortlessly.

First of all we need to install three packages 

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

After installation i will share the final code for google login

import { GoogleSignin } from "@react-native-google-signin/google-signin";
import React, { useContext, useEffect, useState } from "react";
import {
  Pressable,
  View,
  Text,
  ActivityIndicator,
  Platform,
} from "react-native";
export default function SocialLogin() {
  useEffect(() => {
    checkIfSignedIn();
    GoogleSignin.configure({
      webClientId:
        "355384621385-1r7kuk35rut346qq5779okbcnh4tb844.apps.googleusercontent.com",
      // offlineAccess: false,
    });
  }, []);

  const checkIfSignedIn = async () => {
    const isSignedIn = await GoogleSignin.isSignedIn();

    if (isSignedIn) {
      // If the user is already signed in, you can retrieve their user information.
      const user = await GoogleSignin.getCurrentUser();
      // console.log(user,'user');
      //setUserInfo(user);
      if (isSignedIn) await GoogleSignin.signOut();
    }
  };

  const signInViaGoogle = async () => {
    try {
      await GoogleSignin.hasPlayServices({
        showPlayServicesUpdateDialog: true,
      });
      const userinfo = await GoogleSignin.signIn();

      console.log(userinfo, "userinfo");
    } catch (error: any) {
      console.log(error?.response?.data?.message);
    }
  };
  return (
    <>
       signInViaGoogle()}
      >
        
          Login using Google
        
      
    </>
  );
}

This code is a React Native component named SocialLogin, which provides functionality for users to log in using Google in a mobile app. Let's break down the code and explain each part: Imports: The component imports necessary modules from React, React Native, and the @react-native-google-signin/google-signin library. These modules include GoogleSignin, useEffect, useState, Pressable, View, Text, and ActivityIndicator. Functional Component Definition: The SocialLogin component is defined as a functional component using the export default syntax. It doesn't receive any props from its parent components. useEffect Hook: The useEffect hook is utilized to execute the checkIfSignedIn function and configure Google Sign-In using GoogleSignin.configure(). The useEffect hook is called only once, as its dependency array is empty ([]), indicating that it runs on component mount. checkIfSignedIn Function: This asynchronous function checks if the user is already signed in using Google. It calls GoogleSignin.isSignedIn() to check the sign-in status. If the user is signed in, it retrieves the current user's information using GoogleSignin.getCurrentUser() and then signs out the user using GoogleSignin.signOut(). signInViaGoogle Function: This asynchronous function handles the Google Sign-In process. It first checks if the device has Google Play services available using GoogleSignin.hasPlayServices(). If available, it calls GoogleSignin.signIn() to initiate the Google Sign-In process. If successful, it logs the user information to the console. Return Statement: The return statement contains JSX code that renders a Pressable component. This component serves as a button for initiating the Google Sign-In process when pressed. It displays the text "Login using Google" in the center of the button. Styling: Inline styles are applied to the Text component to specify the text color, size, font, and alignment. Overall, this code sets up a React Native component that allows users to log in using Google. It initializes Google Sign-In, checks the sign-in status, and provides a button for users to initiate the sign-in process.