Signing In with Apple in React-Native App [A How-To Guide]

Image Source : WebsOptimization

Based on new guidelines of the Apple Store, in an iOS application, it is essential to integrate a sign-in button with Apple if you are utilizing social platforms such as Facebook, Twitter, Gmail and others. Additionally, if you are already using an app, then this sign-in feature with Apple assists you to get the attention of more iOS users. So, using the sign in with Apple in an iOS app is always a beneficial option.

Sign-in With apple

Applications that offer login service with social sites (such as Twitter, Gmail, Facebook, LinkedIn and others) or 3rd party service in order to authenticate or provide direct access to the primary account with the applications should provide the same Sign-in function with Apple. 

Why Sign in With Apple is Important?

Integrated sign in with Apple assists users to sign in with their Apple ID into websites and different applications. By using Apple ID and sign in feature users can save their time that is required in filling the forms, entering the details like email address, password, name, address, contact number and others. Users can directly set up their account and enter into the app right away.  Two-factor authentication is used to provide extreme protection to all accounts as well as there will be no tracking of your activities by Apple.

Security built-in

All accounts using the sign in with Apple are secured with 2-factor authentication. Apple users can re-authenticate their sign in using Touch ID or Face ID. 

Respect for Privacy

Privacy was the main factor considered while developing sign in with Apple. There is limited data collection to the user's data like name and email address. As well as there will be no tracking by Apple while they interact with the app.

Works Everywhere

Sign in with Apple works with every browser and devices such as iOS, watchOS, macOS and others. It is version independent and allows you to deploy it on your website as well.

Anti fraud

Sign in with Apple utilizes on-device machine learning and other data to offer a privacy-friendly signal to help users to know about the genuineness of a new user.

React Native Apple Authentication

A properly typed React Native library backing for Apple Authentication on iOS, having support for all AppleButton versions.

Essentials to utilizing this library
The @invertase/respond local apple-verification library will only work if you ensure the following:

• On your Mac system set up react-native iOS development environment. 
• Utilizing Xcode version 11 or higher. It will assist you to build utilizing iOS version 13, the only version available for allowing access with Apple.  
• Utilizing React Native version 0.60 or higher.

Steps for integrate sign in with apple id

Step1 : If you want to set up react-native iOS development environment on your Mac machine please follow below steps:

- Open your project in Xcode and click it under the target's header.

- Click on Signing and capabilities then go to + Capability menu to add Sign in.

- You are required to Sign in as a team in case of this error message.

- After signing, your status must display no error message as mentioned below.

- Now click on Account in the navigation bar available at the top of Apple's developer console. You will either be required to create an account if not have an existing account or sign in. The account dashboard should seem like this. Tap your mouse on profiles, IDs and certificates as an option available in the left-hand sidebar. In case all these entries (like profiles, IDs & certificates) are not visible to you then it tends that you are not enrolled in the Apple developer program. It is a must while developing Apple product. 

- Click on Identifiers in the left-hand sidebar. Tap on your project in the list, in our case, TestAppleAuthentication.

To Sign in with Apple tick the checkbox and edit button, Choose Enable as a primary App ID and tap on Save button.

- Now click the save button you will see at the top of the screen.

- Point to remember: In case you select another application as your primary application, you will require to visit the above procedure, up until you navigate to the Apple developer console, and select the Group with the TestAppleAuthentication ID and your existing primary AppID option.

- Click on keys in the left-hand sidebar and make a new key.

- Give a name to this new key. Tick the checkbox next to Sign In with Apple, and tap on configure.

- Select TestAppleAuthentication as primary app ID.

- Now you have to register your key, download it and secure it. Now the initial setup is done.

Step2: Install Library by using the following command in Terminal

Npm install @invertase/react-native-apple-authentication

Manual linking will not be required with this module because it offers React Native auto-linking.

Step3: Implement Login

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, View, TouchableOpacity, Text} from 'react-native';

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

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
    };
  }

  async handleResponse() {
    try {
      // performs login request
      const appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: AppleAuthRequestOperation.LOGIN,
        requestedScopes: [
          AppleAuthRequestScope.EMAIL,
          AppleAuthRequestScope.FULL_NAME,
        ],
      });

      if (appleAuthRequestResponse['realUserStatus']) {
        this.setState({
          isLogin: true,
        });
      }
    } catch (error) {
      if (error.code === AppleAuthError.CANCELED) {
      }
      if (error.code === AppleAuthError.FAILED) {
        alert('Touch ID wrong');
      }
      if (error.code === AppleAuthError.INVALID_RESPONSE) {
        alert('Touch ID wrong');
      }
      if (error.code === AppleAuthError.NOT_HANDLED) {
      }
      if (error.code === AppleAuthError.UNKNOWN) {
        alert('Touch ID wrong');
      }
    }
  }

  onLogout() {
    this.setState({
      isLogin: false,
    });
  }

  render() {
    return (
      <View style={styles.container}>
        {!this.state.isLogin ? (
          <AppleButton
            buttonStyle={AppleButton.Style.BLACK}
            buttonType={AppleButton.Type.SIGN_IN}
            onPress={() => this.handleResponse()}
            style={styles.appleButton}
          />
        ) : (
          <TouchableOpacity
            style={styles.logoutButton}
            onPress={() => this.onLogout()}>
            <Text style={{color: 'white'}}>LOGOUT</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  appleButton: {
    width: 300,
    height: 50,
    margin: 10,
  },
  logoutButton: {
    width: 300,
    height: 50,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
});

OUTPUT:

Sign in With Apple not is needed if:

Your application is a client for particular 3rd-party service and its users are needed to sign in via any 3rd party service, social media platform or mail to access their account.

• Your application utilizes an electronic ID or industry-supported or government citizen identification system to offer access to the users.
• Your application is related to a business, enterprise or education niche that needs the users to sign in with an existing enterprise or education account.
• Your application specifically utilizes the account set up and sign-in systems of your own company.


Thank you for your reading, if you stuck on any step feel free to write your query on comment, I will try give you my best support! You can also contact me for any other react native issue!