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

How to authenticate with google using firebase in React ?

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:

Tags:

#React Native - Questions #React-Native #Web Technologies