Why Use AppleAuthentication with Expo?
- Apple requires apps with third-party login to support Sign in with Apple for App Store approval.
- It gives iOS users a privacy-first, one-tap login experience integrated with Face ID and Touch ID.
- Works fully within Expo's managed workflow—no ejecting required.
- Lets you easily style the button (color, type, corner radius) to match your design.
- Official documentation is available at Expo AppleAuthentication.
Component Overview
ContinueWithAppleButton.tsx
import React, { useCallback } from 'react';
import { Alert, StyleSheet } from 'react-native';
import * as AppleAuthentication from 'expo-apple-authentication';
import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
import { signInWithAppleThunk } from '@/src/store/thunks/auth-thunk';
type Props = {
buttonType?: AppleAuthentication.AppleAuthenticationButtonType;
};
export const ContinueWithAppleButton = (props: Props) => {
const { buttonType = AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN } = props;
const dispatch = useAppDispatch();
const { isSigningInWithApple } = useAppSelector((state) => state.loaders);
const user = useAppSelector((state) => state.user);
const onAppleButtonPress = () => {
if (isSigningInWithApple) return;
if (!user.name) {
return Alert.alert('Please provide your name');
}
if (!user.postalCode || user.postalCode.length !== 5) {
return Alert.alert('Please provide a valid postal code');
}
dispatch(signInWithAppleThunk());
};
const available = useCallback(async () => await AppleAuthentication.isAvailableAsync(), []);
if (!available) return null;
return (
<AppleAuthentication.AppleAuthenticationButton
buttonType={buttonType}
buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
cornerRadius={5}
style={styles.main}
onPress={onAppleButtonPress}
/>
);
};
const styles = StyleSheet.create({
main: {
height: 50,
},
});- The ContinueWithAppleButton is a reusable, modular authentication component.
- Accepts a `buttonType` prop for flexible UI variants (sign-in or sign-up).
- Uses Redux hooks (`useAppDispatch`, `useAppSelector`) for auth and loading state.
- Validates the presence of a user name and a 5-digit postal code before login.
- Displays an alert if the required user fields are missing or invalid.
- Dispatches a Redux thunk (`signInWithAppleThunk`) to trigger Apple authentication and the subsequent data loading from the server.
- Uses a `useCallback` hook to check if AppleAuthentication is available on the device.
Things to Consider
- Make sure your Apple Developer account has enabled Sign-In with Apple.
- If using Firebase, make sure you have enabled Apple Sign-In in the Firebase console.
- This button only works on physical devices.
- Using Redux for loader and user state helps you centralize authentication UX so that all components can react to the state changes.
Key Takeaways
- Use Expo's built-in AppleAuthentication module to quickly add native Apple Sign-In to your app.
- Make sure to check for availability of AppleAuthentication before rendering the sign-in button.
- Validate required user data (like name and postal code) before allowing sign-in to proceed.
- Use Redux to manage sign-in state, ensuring centralized and scalable authentication logic.
- Apple Sign-In is required if your app offers other third-party logins like Google, Facebook, etc. and is published on the App Store.
- Testing AppleAuthentication requires a physical iOS device or proper simulator configuration.