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:

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.

Tags:

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

Project Structure

Setup Your Project on Firebase

Javascript

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

Similar Reads

Contact Us