Native Login With Apple

React Native Apple Login

When working with Expo, you can use the Expo AppleAuthentication library to obtain an ID token that you can pass to openfort-js authenticateThirdParty method.

Make sure you have configured your iOs credentials in the Openfort dashboard. Follow the configuration steps.

Follow the Expo docs for installation and configuration instructions. See the openfort-js reference for instructions on initializing the openfort-js client in React Native.

./components/Auth.native.tsx

import { Platform } from 'react-native'
import * as AppleAuthentication from 'expo-apple-authentication'
// the initialized instance of openfort-js client
import { openfort } from '../utils/openfort'
export function Auth() {
    return (
        <AppleAuthentication.AppleAuthenticationButton
        buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
        buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
        cornerRadius={5}
        style={{ width: 200, height: 64 }}
        onPress={async () => {
            try {
            const credential = await AppleAuthentication.signInAsync({
                requestedScopes: [
                AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
                AppleAuthentication.AppleAuthenticationScope.EMAIL,
                ],
            })
            // Sign in via Openfort Auth.
            if (credential.identityToken) {
                const {
                error,
                data: { user },
                } = await openfort.loginWithIdToken({
                    provider: OAuthProvider.APPLE,
                    token: credential.identityToken,
                })
                console.log(JSON.stringify({ error, user }, null, 2))
                if (!error) {
                // User is signed in.
                }
            } else {
                throw new Error('No identityToken.')
            }
            } catch (e) {
            if (e.code === 'ERR_REQUEST_CANCELED') {
                // handle that the user cancelled the sign-in flow
            } else {
                // handle other errors
            }
            }
        }}
        />
}

When working with bare React Native, you can use invertase/react-native-apple-authentication to obtain the ID token.