React Native Apple Authentication

Anand Kashyap

6 March 2021

React Native Apple Authentication

In this blog, we are going to integrate the Apple authentication in our IOS apple. So let’s get started.

react-native-apple-authentication:

This npm module is used for authentication using Apple id in React Native apps. Apple sign-in only works with the IOS platform and the setup guide considers the same.

There are some imported points that you have to know before the integration.

Note:- Sign in with Apple is supportable from XCode 11 and iOS 13. Although you can install XCode 11 on Mac Mojave 10.14.14 and later.

Setup Sign In With Apple In Project :

Step 1: Go to “Target”, click on “Capability” and add “Sign In with Apple” capability in your project.

Step 2: Now configure this Sign In with Apple capability in app identifier in Developer account.

Certificates, Identifiers & Profile Identifiers > Identifiers > Your app identifier

Step 3: Then, add Keys for Apple Sign in. To do this Go to,

Certificates, Identifiers & Profile Identifiers > Keys > Create Keys

Step 4: Enter the name of keys and check the Sign in with Apple option and click on the configure button and choose your app bundle id, then click on Save and Register the Key.

Let’s move to the coding part.

Getting Started:

To install the module, run the following command in your project directory:

$ npm install --save react-native-apple-authentication

Note:- From react-native version 0.60, We don’t need to link any third party module separately but if you found it has not been included with your project then you can run the following:

$ react-native link react-native-apple-authentication

(cd ios && pod install)

After those commands, you can access the react-native-apple-authentication in your project.

import appleAuth, { AppleButton } from '@invertase/react-native-apple-authentication'
export default class App extends React.Component{

 async onAppleButtonPress() {
     try {
      // make sign in request and return a response object containing authentication data
      const appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: appleAuth.Operation.LOGIN,
        requestedScopes: [
          appleAuth.Scope.EMAIL,
          appleAuth.Scope.FULL_NAME
        ],
      });

      const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);      
        if (credentialState === appleAuth.State.AUTHORIZED) {}
            // successfully verified, handle sign in 
            if(appleAuthRequestResponse.email){
                let name = appleAuthRequestResponse.fullName
                let appleResponse= {
                  email: appleAuthRequestResponse.email,
                  first_name: name.givenName,
                  last_name: name.familyName
                }
            }else{
             console.log(appleAuthRequestResponse);
            }
      }catch(e){
        console.log(e);
      }  
  }


render(){
return(
 <AppleButton
      buttonStyle={AppleButton.Style.WHITE}
      buttonType={AppleButton.Type.SIGN_IN}
      style={styles.appleButton}
      onPress={this.onAppleButtonPress.bind(this)}
 />
)}
}

const styles = StyleSheet.create({
  appleButton: {
    width: '80%',
    height: 45,
    alignSelf:'center',
    shadowColor: '#555',
    shadowOpacity: 0.5,
    shadowOffset: {
      width: 0,
      height: 3
    },
    marginBottom:10
  }
});

import appleAuth, { AppleButton } from '@invertase/react-native-apple-authentication'

export default class App extends React.Component{

async onAppleButtonPress() {

try {

// make sign in request and return a response object containing authentication data

const appleAuthRequestResponse = await appleAuth.performRequest({

requestedOperation: appleAuth.Operation.LOGIN,

requestedScopes: [

appleAuth.Scope.EMAIL,

appleAuth.Scope.FULL_NAME

});

const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);

if (credentialState === appleAuth.State.AUTHORIZED) {}

// successfully verified, handle sign in

if(appleAuthRequestResponse.email){

let name = appleAuthRequestResponse.fullName

let appleResponse= {

email: appleAuthRequestResponse.email,

first_name: name.givenName,

last_name: name.familyName

}

}else{

console.log(appleAuthRequestResponse);

}

}catch(e){

console.log(e);

}

render(){

return(

<AppleButton

buttonStyle={AppleButton.Style.WHITE}

buttonType={AppleButton.Type.SIGN_IN}

style={styles.appleButton}

onPress={this.onAppleButtonPress.bind(this)}

)}

}

const styles = StyleSheet.create({

appleButton: {

width: '80%',

height: 45,

alignSelf:'center',

shadowColor: '#555',

shadowOpacity: 0.5,

shadowOffset: {

width: 0,

height: 3

marginBottom:10

}

});

Note:- You will only get the appleAuthRequestResponse data for the very first time. So you have to store the data locally in your app. You can store it in AsyncStorage. So you have to check if the user first time hitting the apple login API then request it by SDK and if the user tries for 2nd time then it will retrieve the data from the local storage.