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: