Implementing Apple Login in React Native for iOS Applications


Lets integrate Apple sign in for ios apps based on React Native

With sign in with Apple, users can essentially use their Apple ID as the trusted identifier for apps, removing the need to create a new user account with the app in question.

This article walks through the process of integrating Sign in with Apple in the context of React Native. In this we will use the package react-native-apple-authentication to facilitate integrating Sign in with Apple


Installer Package

Lets begin with installing the npm package for Apple authentication as a project dependency and running following commands to update pods.

[Command Line] npm i @invertase/react-native-apple-authentication yarn @invertase/react-native-apple-authentication [Command Line] [Command Line] cd ios and pod install [Command Line]

Displaying the Sign in with Apple Button

[React-Native] import { AppleButton } from ‘@invertase/react-native-apple-authentication’; async function onAppleButtonPress() { /* Sign in logic */ } function App() { return ( onAppleButtonPress()} /> ); } [React-Native]

Utility function for apple Sign In

“onAppleButtonPress” button logic includes the following segments of code :

Sign-in Request

[React-Native] try { appleAuthRequestResponse = await appleAuth.performRequest({ requestedOperation: appleAuth.Operation.LOGIN, requestedScopes: [appleAuth.Scope.EMAIL], }); } catch (e) { console.log(‘error’, e); } const { identityToken, nonce, user, email, fullName } = appleAuthRequestResponse; [React-Native]

Although other metadata is returned in appleAuthRequestResponse, such as the user’s agreed scopes, we will only be interested in the identityToken to continue authentication in this walkthrough. As we’ll see, verifying the token server-side will also return key values such as the appleUserId, that’ll enabled an identityToken to be linked to an account.

Verifying Identity Token

The last thing “onAppleButtonPress” needs to do is make that request to your server and handle either a successful or failed verification response.

[React-Native] if (identityToken) { const appleCredential = firebase.auth.AppleAuthProvider.credential( identityToken, nonce, ); console.log(‘appleCredential’, appleCredential); firebase .auth() .signInWithCredential(appleCredential) .then(user => { // User logs in Successfully // Success handler code console.log(‘apple user—-‘, user); }) .catch(error => { // Something goes wrong // Error handler code console.log(‘Error in apple login’, error); }); [React-Native]

The complete Utility function for Apple sign In looks something like this –

[React-Native] import appleAuth from ‘@invertase/react-native-apple-authentication’; import firebase from ‘@react-native-firebase/app’; import { useEffect } from ‘react’; /** * appleLoginHandler function takes care of apple sign in */ const appleLoginHandler = async () => { let appleAuthRequestResponse; try { appleAuthRequestResponse = await appleAuth.performRequest({ requestedOperation: appleAuth.Operation.LOGIN, requestedScopes: [appleAuth.Scope.EMAIL], }); } catch (e) { console.log(‘error’, e); } const { identityToken, nonce, user, email, fullName } = appleAuthRequestResponse; if (identityToken) { const appleCredential = firebase.auth.AppleAuthProvider.credential( identityToken, nonce, ); console.log(‘appleCredential’, appleCredential); firebase .auth() .signInWithCredential(appleCredential) .then(user => { // User logs in Successfully console.log(‘apple user—-‘, user); }) .catch(error => { // Something goes wrong console.log(‘Error in apple login’, error); }); } }; export { appleLoginHandler }; [React-Native]

Final Touch Up for Xcode and Firebase setup –

XCODE –

Open your project >> under Signing & Capabilities >> add Capability >> Enable Sign in With Apple

Firebase –

Open your current app in firebase >> Under Authentication >> Sign-In-Methods >> Add new Provider >> Enable Apple login

Great!! now we can Login in our App through Apple login.


Note: In simulator you might face error code 1001 that might not be an issue in real device.

Latest

SENTRY integration in your React Native App for Error/Crash tracking

Sentry captures data by using an SDK within your...

Recall the concepts of useCallback.

useCallback hook is one of the best hooks offered...

Value of Comments in the code!!

During my journey of Software Development, I am always...

YOLO:Bullet Paced Algorithm

http://sh017.hostgator.tempwebhost.net/media/33949d0e61af4b50f374c534713f56b3 According to world health organization, more than 1.35 million...

Featured

Developing Enterprise Application in Node.js – CJS Vs ESM

Node.js is a popular runtime environment for building server-side...

Integrating your web react applications with their React Native(android and IOS) apps using QR code

Integrating a web application with Android and iOS apps...

YOLO: Bullet Paced Algorithm – popular choice for object detection in autonomous vehicles 

According to world health organization, more than 1.35 million...

Deep Linking with Firebase-Dynamic Links in React Native

Deep linking improves user engagement and provides a better user experience In today's era where everything is connected and we share links more often than...

Cashfree SDK integration in React Native App

Hello Everyone In this article we will learn how to integrate Cashfree payments SDK in React Native Application. The React Native Cashfree SDK  Cashfree provides a dedicated...

What is a Pure Component?

Imagine you are building a toy car out of Legos. The toy car has different parts, like wheels, a body, and a steering wheel....

LEAVE A REPLY

Please enter your comment!
Please enter your name here