Sign in with Apple

Add your Native Application

Add your iOS application to the Native applications⁠ page in the Clerk Dashboard. You will need your iOS app's App ID Prefix (Team ID) and Bundle ID.

Enable Apple as a social connection

1. In the Clerk Dashboard, navigate to the SSO connections⁠ page.
2. Select Add connection and select For all users.
3. Select Apple from the provider list.
4. Ensure that Enable for sign-up and sign-in is toggled on.

Install dependencies

The useSignInWithApple() hook requires the following packages:

• expo-apple-authentication provides access to Apple's native Sign in with Apple⁠ functionality.
• expo-crypto is used for generating secure nonces during the authentication flow.

Add expo-apple-authentication to your app config

Add the expo-apple-authentication plugin to your app.json or app.config.js.

Build your authentication flow

1. The following example demonstrates how to use the useSignInWithApple() hook to manage the Apple authentication flow. Because the useSignInWithApple() hook automatically manages the transfer flow⁠ between sign-up and sign-in, you can use this component for both your sign-up and sign-in pages.

   import { useSignInWithApple } from '@clerk/expo/apple'
   import { useRouter } from 'expo-router'
   import { Alert, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
   
   export function AppleSignInButton({ onSignInComplete }: { onSignInComplete?: () => void }) {
     const { startAppleAuthenticationFlow } = useSignInWithApple()
     const router = useRouter()
   
     // Only show on iOS
     if (Platform.OS !== 'ios') return null
   
     const handleAppleSignIn = async () => {
       try {
         const { createdSessionId, setActive } = await startAppleAuthenticationFlow()
   
         if (createdSessionId && setActive) {
           await setActive({ session: createdSessionId })
   
           if (onSignInComplete) {
             onSignInComplete()
           } else {
             router.replace('/')
           }
         }
       } catch (err: any) {
         if (err.code === 'ERR_REQUEST_CANCELED') return
   
         Alert.alert('Error', err.message || 'An error occurred during Apple sign-in')
         console.error('Sign in with Apple error:', JSON.stringify(err, null, 2))
       }
     }
   
     return (
       <View style={styles.container}>
         <Pressable
           style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
           onPress={handleAppleSignIn}
         >
           <Text style={styles.buttonText}>Continue with Apple</Text>
         </Pressable>
       </View>
     )
   }
   
   const styles = StyleSheet.create({
     container: {
       width: '100%',
       marginVertical: 8,
     },
     button: {
       backgroundColor: '#000',
       paddingVertical: 14,
       paddingHorizontal: 24,
       borderRadius: 8,
       alignItems: 'center',
     },
     buttonPressed: {
       opacity: 0.7,
     },
     buttonText: {
       color: '#fff',
       fontSize: 16,
       fontWeight: '600',
     },
   })

   Expand code

2. Then, add the <AppleSignInButton /> component to your sign-in or sign-up page.

Create a native build

Create a native build with EAS Build or a local prebuild, since Apple Authentication is not supported in Expo Go.