React Native Firebase authentication - Google sign in (iOS)

Introduction

In this shot, we’ll learn to integrate Google authentication in React Native for an iOS version of the Application.

Installation

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 XcodeXcode is Apple’s integrated development environment for macOS, used to develop software for macOS, we’ll see that our application’s bundle identifier is different. Make sure to change it before generating a googleServices-Info.plist from Firebase.

Installation for iOS

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:

  1. Go to 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];
    }

  1. Add #import <Firebase.h> at the top of the file.

  2. 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
  1. Now, add the code in 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 && (
          <GoogleSigninButton
            style={{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;

Explanation

  • We import the necessary packages required for Google Sign-in. The objective is to sign in the user with Google OAuth. So we include a “Google SignIn” button from @react-native-google-signin/google-signin.
  • We create a function to sign in the user, and when the user is successfully signed in, we need to create a function that listens to the authChanges.
  • We also create a function that enables the user to sign out from Google.

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:

  • Get the 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

Conclusion

In this shot, we learned to integrate google authentication with the React Native application.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)