How do I add Sign in with Apple to a React Native app?

Adding Sign in with Apple to a React Native app usually involves three parts:

1. Apple Developer setup
2. Native app configuration
3. React Native code to trigger login and send the identity token to your backend

The easiest path is to use a library like:

• @invertase/react-native-apple-authentication (most common)
• or Expo Auth Session if you’re using Expo

---

1) Apple Developer setup

In Apple Developer Portal

You need to configure:

• App ID / Bundle ID with Sign In with Apple enabled
• A Service ID if you want web-based login or backend auth flows
• A private key for generating client secrets on your backend
• Your Apple Team ID
• Your Key ID

In App Store Connect / Xcode

• Make sure your app’s Bundle Identifier matches the one in Apple Developer
• Enable the Sign in with Apple capability in Xcode

---

2) Install the React Native package

yarn add @invertase/react-native-apple-authentication
# or
npm install @invertase/react-native-apple-authentication

iOS install

Run pods:

cd ios
pod install
cd ..

Important iOS requirements

• iOS 13+ is required for Apple sign-in support
• You should test on a real device, not just the simulator

---

3) Enable the capability in Xcode

Open your iOS project in Xcode:

• Select your app target
• Go to Signing & Capabilities
• Click + Capability
• Add Sign In with Apple

This updates your entitlements.

---

4) React Native code

Here’s a basic example:

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

export default function AppleSignIn() {
  const handleAppleSignIn = async () => {
    try {
      const appleAuthRequestResponse = await appleAuth.performRequest({
        requestedOperation: AppleAuthRequestOperation.LOGIN,
        requestedScopes: [
          AppleAuthRequestScope.EMAIL,
          AppleAuthRequestScope.FULL_NAME,
        ],
      });

      const { identityToken, nonce, user, email, fullName } = appleAuthRequestResponse;

      if (!identityToken) {
        throw new Error('Apple Sign-In failed: no identity token returned');
      }

      // Send identityToken and nonce to your backend for verification
      console.log({
        identityToken,
        nonce,
        user,
        email,
        fullName,
      });

      Alert.alert('Success', 'Signed in with Apple!');
    } catch (error) {
      if (error.code === 'ERR_REQUEST_CANCELED') {
        console.log('User canceled Apple sign-in');
      } else {
        console.error(error);
        Alert.alert('Error', 'Apple Sign-In failed');
      }
    }
  };

  if (!appleAuth.isSupported) {
    return null; // or render a fallback
  }

  return (
    <View style={{ padding: 20 }}>
      <AppleButton
        buttonStyle={AppleButton.Style.BLACK}
        buttonType={AppleButton.Type.SIGN_IN}
        style={{ width: '100%', height: 44 }}
        onPress={handleAppleSignIn}
      />
    </View>
  );
}

---

5) Verify the token on your backend

You should never trust the client alone. Send the Apple identityToken to your backend and verify it.

Backend verification generally involves:

• decoding the JWT
• verifying Apple’s signature using Apple’s public keys
• checking:
  • iss = https://appleid.apple.com
  • aud = your bundle ID or service ID
  • exp is valid
  • nonce matches if used

If verification succeeds, create or find the user in your database and log them in.

---

6) Notes about Apple Sign-In behavior

• Apple only provides email/full name on first authorization
• Later logins may only return a stable Apple user identifier
• If the user hides their email, Apple may return a relay email
• You should store:
  • Apple user identifier
  • verified email if available
  • backend user record ID

---

7) If you’re using Expo

You can use:

• expo-apple-authentication

Example:

npx expo install expo-apple-authentication

Then:

import * as AppleAuthentication from 'expo-apple-authentication';

async function signInWithApple() {
  const credential = await AppleAuthentication.signInAsync({
    requestedScopes: [
      AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
      AppleAuthentication.AppleAuthenticationScope.EMAIL,
    ],
  });

  console.log(credential.identityToken);
}

---

8) Common issues

“Sign in with Apple not supported”

• You’re on iOS < 13
• The capability isn’t enabled
• You’re testing on an unsupported environment

No email or fullName

• Apple only returns those on first sign-in
• You need to persist them the first time

identityToken is null

• App configuration issue
• Missing capability
• Problem with request scopes / environment

---

Recommended implementation pattern

1. User taps Apple button
2. Native Apple auth returns identityToken
3. App sends token to backend
4. Backend verifies token with Apple
5. Backend issues your app session/JWT
6. App stores your app session securely

---

If you want, I can also give you:

• a full working React Native example
• a Node.js backend token verification example
• or the steps for Expo specifically