@invertase/react-native-apple-authentication

You must configure your App ID and create a private key in the Apple Developer portal to support Apple Authentication:

1. Enable Sign in with Apple for your Identifier

1. Log in to the Apple Developer Console.
2. Navigate to Identifiers in the sidebar.
3. Select your project's App ID.
4. Check the box for Sign in with Apple.
5. Click Edit, select Enable as a primary App ID, and click Save.
6. Click Save at the top of the screen to apply changes.

Note: If you are using an existing primary App ID for a different project, choose the Group with existing primary App ID option and select your specific ID.

2. Create a Sign in with Apple Key

1. Navigate to Keys in the left-hand sidebar.
2. Click to create a new key.
3. Provide a name for the key.
4. Check the box for Sign In with Apple and click Configure.
5. Select your project's App ID as the primary App ID.
6. Register the key, download it, and store it securely. This key is required for server-side verification.

To use Apple Authentication with Firebase Auth, you must use @react-native-firebase/auth version v6.2.0 or higher.

The workflow involves:

1. Performing an Apple sign-in request using appleAuth.performRequest.
2. Extracting the identityToken and nonce from the response.
3. Creating a Firebase AppleAuthProvider credential using firebase.auth.AppleAuthProvider.credential(identityToken, nonce).
4. Signing in or linking the user via firebase.auth().signInWithCredential(appleCredential) or linkWithCredential.

Note: Always check for errors using appleAuth.Error (e.g., error.code === appleAuth.Error.CANCELED) to handle user cancellations.

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

async function onAppleButtonPress() {
  // 1). start a apple sign-in request
  const appleAuthRequestResponse = await appleAuth.performRequest({
    requestedOperation: appleAuth.Operation.LOGIN,
    requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
  });

  // 2). if the request was successful, extract the token and nonce
  const { identityToken, nonce } = appleAuthRequestResponse;

  if (identityToken) {
    // 3). create a Firebase `AppleAuthProvider` credential
    const appleCredential = firebase.auth.AppleAuthProvider.credential(identityToken, nonce);

    // 4). use the created `AppleAuthProvider` credential to start a Firebase auth request
    const userCredential = await firebase.auth().signInWithCredential(appleCredential);

    console.warn(`Firebase authenticated via Apple, UID: ${userCredential.user.uid}`);
  } else {
    // handle this - retry?
  }
}

function SocialAuthButtons() {
  return (
    <View>
      {appleAuth.isSupported && (
        <AppleButton
          cornerRadius={5}
          style={{ width: 200, height: 60 }}
          buttonStyle={AppleButton.Style.WHITE}
          buttonType={AppleButton.Type.SIGN_IN}
          onPress={() => onAppleButtonPress()}
        />
      )}
    </View>
  );
}

To use Apple Authentication with Auth0, you must perform a token exchange. This involves:

1. Using appleAuth.performRequest to initiate the login and request scopes like FULL_NAME and EMAIL.
2. Verifying the credential state using appleAuth.getCredentialStateForUser.
3. Sending a POST request to your Auth0 domain's /oauth/token endpoint using the urn:ietf:params:oauth:grant-type:token-exchange grant type.

Required parameters for the Auth0 token exchange request:

• grant_type: Must be urn:ietf:params:oauth:grant-type:token-exchange.
• subject_token_type: Must be http://auth0.com/oauth/token-type/apple-authz-code.
• subject_token: The authorizationCode obtained from the appleAuth.performRequest response.
• client_id: Your Auth0 Client ID.
• audience: Your Auth0 Audience.
• user_profile: A JSON string containing the user's name and email.

import { appleAuth } from '@invertase/react-native-apple-authentication';
import axios from 'axios';
import {
    auth0Client,
    auth0Domain,
    auth0Audience
} from '../constants/constants';

export default async function AppleAuthentication() {
    return new Promise(async (resolve, reject) => {
        const appleAuthRequestResponse = await appleAuth.performRequest({
            nonceEnabled: false,
            requestedOperation: appleAuth.Operation.LOGIN,
            requestedScopes: [appleAuth.Scope.FULL_NAME, appleAuth.Scope.EMAIL]
        });

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

        if (credentialState === appleAuth.State.AUTHORIZED) {
            const { 
                    fullName, 
                    authorizationCode, 
                    email 
                } = appleAuthRequestResponse, 
                { familyName, givenName } = fullName;

            await axios({
                url: `https://${auth0Domain}/oauth/token`,
                method: 'POST',
                data: {
                    grant_type: 'urn:ietf:params:oauth:grant-type:token-exchange',
                    subject_token_type: 'http://auth0.com/oauth/token-type/apple-authz-code',
                    scope: 'read:appointments openid profile email email_verified',
                    audience: auth0Audience,
                    subject_token: authorizationCode,
                    client_id: auth0Client,
                    user_profile: JSON.stringify({
                        name: {
                            firstName: givenName,
                            lastName: familyName
                        },
                        email: email
                    })
                }
            })
                .then(async (_auth0Response) => {
                    resolve({
                        message: 'success',
                        ..._auth0Response,
                        first_name: givenName,
                        last_name: familyName
                    });
                })
                .catch((_auth0Error) => {
                    reject({ error: true, message: 'error', detailedInformation: _auth0Error });
                });
        }
    });
}