How to Authenticate with Google using Firebase in React Native Application ?

In this article, we will discuss how can we authenticate with Google using Firebase in React Native.

Creating React Application And Installing Module

Create a React app using the following command:

npx react-native@latest init AwesomeProject

Project Structure

Now install required npm packages:

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

Setup Your Project on Firebase

• Enter the required detail for setup project you can find package name in your project Android folder to generate
• SHA key run the following command from your project android folder ./gradlew signingReport
• download the google.config.file and follow the instructions mention on firebase to add firebase SDK

• Go to authentication section on your firebase console and enable google sign in

• Adding google auth code to your project:

Example:

Javascript

import { Image, StyleSheet, Text, TouchableOpacity,
    View, Pressable } from 'react-native'
import React, { useEffect, useState } from 'react'
import { GoogleSignin, statusCodes } from
    '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';


const App = () => {
    useEffect(() => {
        GoogleSignin.configure({

            // Client ID of type WEB for your server (needed
            // to verify user ID and offline access)
            webClientId: '',
        });
    }, [])

    const signIn = async () => {
        try {

            await GoogleSignin.hasPlayServices();
            const userInfo = await GoogleSignin.signIn();
            await GoogleSignin.revokeAccess();
            console.warn(userInfo.user)
        } catch (error) {

            if (error.code === statusCodes.SIGN_IN_CANCELLED) {

                // user cancelled the login flow
            } else if (error.code === statusCodes.IN_PROGRESS) {
                console.log(error)
            } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
                console.log(error)
            } else {
                console.log(error)
            }
        }

    };

    return (
        <View style={styles.container}>

            <Pressable style={styles.signupbutton}
                onPress={() => { signIn(), console.log('click') }}>
                <Image style={{ width: 30, height: 30, }}
                    source={require('../../assets/search.png')}>
                </Image>
            </Pressable>
        </View>
    )
}

export default App

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        flex: 1,
        paddingHorizontal: 15,
        backgroundColor: '#1f1f1f',
        alignItems: 'center',

    },
    signupbutton: {
        justifyContent: 'center',
        backgroundColor: 'pink',
        width: 300,
        height: 46,
        borderRadius: 15,
        marginTop: 25,
        alignItems: 'center',
    },
})

• Replace your web client id with id given on your firebase project you can get web client id by
• Go to ->Firebase console-> Authentecation-> google ->web client id:

 GoogleSignin.configure({
    webClientId: 'Your client id', // Paste that web client id here
 });

• Run your react native app by command:

npm start                                                 

Output: