@invertase/react-native-apple-authentication npm - Javascript

Introduction

@invertase/react-native-apple-authentication is a React Native library that enables your application to support Apple sign-in functionality. It simplifies the implementation process for developers and provides a native experience for users.

Features

• Support for iOS devices running iOS 13+.
• Supports both Sign In with Apple and Apple ID authorization.
• Provides a simplified API that handles the underlying Apple Authentication framework details.
• Allows developers to complete sign-in or authorization via callback functions.
• Supports customizing the authorization scope for a user's Apple ID.
• Provides access to Apple's unique user identifier.

Installation

First, make sure you have React Native and Xcode installed. Then, install the @invertase/react-native-apple-authentication library via NPM:

npm install @invertase/react-native-apple-authentication --save

Alternatively, you can use Yarn:

yarn add @invertase/react-native-apple-authentication

Setup

The @invertase/react-native-apple-authentication library can be linked automatically by running the following command:

react-native link @invertase/react-native-apple-authentication

Alternatively, you can link the library manually by following the instructions on the official documentation.

Usage

Here's an example of how to use @invertase/react-native-apple-authentication in your React Native application:

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import appleAuth, { AppleButton } from '@invertase/react-native-apple-authentication'

class SignInWithApple extends Component {
  appleAuthRequest = async () => {
    try {
      const appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: appleAuth.Operation.LOGIN,
        requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
      });

      console.log("Response: ", appleAuthRequestResponse);

    } catch (error) {
      if (error.code === appleAuth.Error.CANCELED) {
        console.warn('User canceled Apple Sign in.');
      } else {
        console.error('Apple sign-in failed with error: ', error);
      }
    }
  };

  render() {
    return (
      <View>
        <AppleButton
          buttonStyle={AppleButton.Style.WHITE}
          buttonType={AppleButton.Type.SIGN_IN}
          style={{
            width: 200,
            height: 44,
            alignSelf: 'center',
          }}
          onPress={() => this.appleAuthRequest()}
        />
      </View>
    );
  }
}

export default SignInWithApple;

The above example sets up a button to initiate a request for Apple sign-in functionality. When the user presses the button, @invertase/react-native-apple-authentication will handle the underlying authentication details and provide a response object that includes the necessary authentication tokens.

Conclusion

@invertase/react-native-apple-authentication is a powerful library that simplifies Apple sign-in implementation for React Native developers. With this library, you can give your user's a native sign-in experience while reducing the complexity of your code.