How to add Apple authentication to your React Native app

Overview

In this shot, we’ll learn to integrate Apple authentication in React Native for iOS versions 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 app’s name). We’ll get two files:

googleservices.json for android.
googleServices-Info.plist for iOS.

We’ll need these two files for integrating firebase services in our React Native application.

Installation for iOS

Download the googleServices-Info.plist from the firebase dashboard and drag and drop it into Xcode.

Follow the steps below for Firebase configuration with an iOS version of your app.

Go to AppDelegate.m and add the code to initialise firebase in your iOS app.


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// include the below Code
  if ([FIRApp defaultApp] == nil) {
      [FIRApp configure];
    }

2.Add <code> #import <Firebase.h> </code> at the top of the file.

iOS

Install the required npm packages from the terminal.

npm install --save @react-native-firebase/app @react-native-firebase/auth @invertase/react-native-apple-authentication

Run the command to install pods in your project in the terminal.

cd ios 
pod install

In App.js, add the code which enables Apple 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 {
  appleAuth,
  AppleButton,
} from '@invertase/react-native-apple-authentication';
const App = () => {
  const [user, setUser] = useState(null);
  async function onAppleButtonPress() {
    const appleAuthRequestResponse = await appleAuth.performRequest({
      requestedOperation: appleAuth.Operation.LOGIN,
      requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
    });
    if (!appleAuthRequestResponse.identityToken) {
      throw 'Apple Sign-In failed - no identify token returned';
    }
    const {identityToken, nonce} = appleAuthRequestResponse;
    const appleCredential = auth.AppleAuthProvider.credential(
      identityToken,
      nonce,
    );
    return auth().signInWithCredential(appleCredential);
  }
  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>Apple Sign In Tutorial</Text>
      </View>
      <View style={{margin: 10}}>
        {user === null && (
          <AppleButton
            buttonStyle={AppleButton.Style.BLACK}
            buttonType={AppleButton.Type.SIGN_IN}
            style={{width: 312, height: 48}}
            onPress={() =>
              onAppleButtonPress().then(() =>
                console.log('Apple sign-in complete!'),
              )
            }
          />
        )}
      </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

Lines 1 to 8: We import the necessary packages to be used in the application.
Line 11: Create a useState variable to store the user data.
Lines 13 to 30: We create a function to authenticate the user with Apple OAuth by getting the user email and password.
Lines 32 to 48: We create a function that listens to the authentication change when the user logs in with its Apple id.
Lines 50 to 56: We create a function to sign out the user.
Lines 58 to 90: We create a button for both sign-in and sign-out functions and when the user is signed in we show its email id to the user.

Conclusion

In this shot, we learned to add Apple authentication to our React Native application.

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

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments