In this shot, we’ll learn to integrate Google authentication in React Native for an iOS version of the Application.
Create a new React Native application from the terminal:
npx react-native init authtutorial
cd authtutorial
Go to the firebase dashboard and create an android and iOS application named com.authtutorial
( or your application’s name). We get a file called googleServices-Info.plist
for iOS. We need this file to integrate Firebase services in our React Native application.
Note: Apple has announced that if you use social logins like Google in your applications, we have to include Apple social login as well. So keep it in mind.
When we create a React Native application and access it in googleServices-Info.plist
from Firebase.
Download the googleServices-Info.plist
from the Firebase dashboard and drag and drop it into Xcode.
Follow the below steps for Firebase configuration with an iOS version of your application:
AppDelegate.m
and add the code to initialize Firebase in the iOS application.- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// include the below Code
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
Add #import <Firebase.h>
at the top of the file.
Install the required npm packages from the terminal:
npm install --save @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin
App.js
that enables google authentication for our React Native application.import React, {useState, useEffect} from 'react';import {SafeAreaView, Text, TouchableOpacity, View} from 'react-native';import auth from '@react-native-firebase/auth';import {GoogleSignin,GoogleSigninButton,} from '@react-native-google-signin/google-signin';GoogleSignin.configure({webClientId:'745305328860-3e60bmsvapbft8kh1dr0vf0u3h2239cp.apps.googleusercontent.com',});const App = () => {const [user, setUser] = useState(null);const onGoogleButtonPress = async () => {const {idToken} = await GoogleSignin.signIn();const googleCredential = auth.GoogleAuthProvider.credential(idToken);return auth().signInWithCredential(googleCredential);};const onAuthStateChanged = async userAuth => {if (!userAuth) {return;}if (userAuth) {console.log(userAuth);setUser(userAuth);}return () => userReference();};useEffect(() => {const subscriber = auth().onAuthStateChanged(onAuthStateChanged);return () => {subscriber;};}, []);const signOut = async () => {auth().signOut();setUser(null);return () => userReference();};return (<SafeAreaView style={{alignItems: 'center', flex: 1, marginTop: 100}}><View style={{margin: 10}}><Text>Google Sign In Tutorial</Text></View><View style={{margin: 10}}>{user === null && (<GoogleSigninButtonstyle={{width: 312, height: 48}}size={GoogleSigninButton.Size.Wide}color={GoogleSigninButton.Color.Light}onPress={onGoogleButtonPress}/>)}</View>{user !== null && (<View style={{margin: 10}}><Text style={{margin: 10}}>{user.displayName}</Text><TouchableOpacity onPress={signOut} style={{alignItems: 'center'}}><Text>Sign Out</Text></TouchableOpacity></View>)}</SafeAreaView>);};export default App;
@react-native-google-signin/google-signin
.authChanges
.After finishing up the code, we go to XCode and make some configurations:
First, run the command to install pod
in your project in the terminal.
cd ios
pod install
Now follow the below step to configure Google sign-in in your React Native application for iOS:
REVERSED_CLIENT_ID
from googleServices-Info.plist
and in Xcode go to Info -> Url Types -> Click on +
icon and add the REVERSED_CLIENT_ID
value in URL Schemes.Now go to the terminal and run:
npm run ios
In this shot, we learned to integrate google authentication with the React Native application.