JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 115876
  • Score
    100M100P100Q177135F
  • License Apache-2.0

A complete Apple Authentication services API for React Native iOS apps.

Package Exports

  • @invertase/react-native-apple-authentication

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@invertase/react-native-apple-authentication) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme


React Native Apple Authentication

NPM downloads NPM version License

Chat on Discord Follow on Twitter


A well typed React Native library providing support for Apple Authentication on iOS, including support for all AppleButton variants.

apple-auth

Prerequisites to using this library

The @invertase/react-native-apple-authentication library will not work if you do not ensure the following:

  • You have setup react-native iOS development environment on your machine (Will only work on Mac). If not, please follow the official React Native documentation for getting started: React Native getting started documentation.

  • You are using React Native version 0.60 or higher.

  • You are using Xcode version 11 or higher. This will allow you to develop using iOS version 13, the only version possible for authenticating with Apple.

  • Once you're sure you've met the above, please follow our Initial development environment setup guide.

Installation

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

You will not have to manually link this module as it supports React Native auto-linking.

Usage

Below are simple steps to help you get up and running. Please skip and head to the full code examples noted below if you prefer to see a more complete implementation:

  1. Initial set-up. Import the appleAuth (API documentation) module and the AppleButton (API documentation) exported member element from the @invertase/react-native-apple-authentication library. Setup an event handler (onPress) to kick start the authentication request.
// App.js

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

async function onAppleButtonPress() {
  
}

function App() {
  return (
    <View>
      <AppleButton
        buttonStyle={AppleButton.Style.WHITE}
        buttonType={AppleButton.Type.SIGN_IN}
        onPress={() => onAppleButtonPress()}
      />
    </View>
  );
}
  1. Implement the login process. Import exported members AppleAuthRequestOperation (API documentation), AppleAuthRequestScope API documentation & AppleAuthCredentialState API documentation.
// App.js

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

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

  // get current authentication state for user
  const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);

  // use credentialState response to ensure the user is authenticated
  if (credentialState === AppleAuthCredentialState.AUTHORIZED) {
    // user is authenticated
  }
}
  1. Set up event listener for when user's credentials have been revoked.
// App.js

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

function App() {
  useEffect(() => {
    // onCredentialRevoked returns a function that will remove the event listener. useEffect will call this function when the component unmounts
    return appleAuth.onCredentialRevoked(async () => {
      console.warn('If this function executes, User Credentials have been Revoked');
    });
  }, []); // passing in an empty array as the second argument ensures this is only ran once when component mounts initially.

  return (
    <View>
      <AppleButton onPress={() => onAppleButtonPress()} />
    </View>
  );
}
  1. Logout user.
// App.js

import { View, Button } from 'react-native';
import appleAuth, {
  AppleAuthRequestOperation,
  AppleAuthCredentialState,
} from '@invertase/react-native-apple-authentication';

async function onLogout() {
  // performs logout request
  const appleAuthRequestResponse = await appleAuth.performRequest({
    requestedOperation: AppleAuthRequestOperation.LOGOUT,
  });

  // get current authentication state for user
  const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);

  // use credentialState response to ensure the user credential's have been revoked
  if (credentialState === AppleAuthCredentialState.REVOKED) {
    // user is unauthenticated
  }
}

function App() {
  return (
    <View>
      <Button onPress={() => onLogout()}>log out</Button>
    </View>
  );
}

Examples

Firebase

If you're using React Native Firebase and want to sign-in your users into Firebase via Apple Authentication; see our Firebase guide.

API Reference Documentation

Interfaces

Enumerations

License


Built and maintained with 💛 by Invertase.

💼 Hire Us | ☕️ Sponsor Us | ‍💻 Work With Us