📱 React Native Intermediate

How do you implement authentication in React Native?

Answer

Authentication in React Native involves token management, secure storage, and navigation guards. Common pattern: // 1. AuthContext.tsx: const AuthContext = createContext(null); export function AuthProvider({ children }) { const [token, setToken] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Check for stored token on app start: const loadToken = async () => { const storedToken = await SecureStore.getItemAsync("auth_token"); if (storedToken) setToken(storedToken); setIsLoading(false); }; loadToken(); }, []); const login = async (credentials) => { const { token } = await api.login(credentials); await SecureStore.setItemAsync("auth_token", token); setToken(token); }; const logout = async () => { await SecureStore.deleteItemAsync("auth_token"); setToken(null); }; return ( <AuthContext.Provider value={{ token, login, logout, isLoading }}> {children} </AuthContext.Provider> ); } // 2. Navigation guard: function RootNavigator() { const { token, isLoading } = useContext(AuthContext); if (isLoading) return <SplashScreen />; return token ? <AppNavigator /> : <AuthNavigator />; }. Secure token storage: Use expo-secure-store or react-native-keychain — not AsyncStorage (unencrypted). Social auth: expo-auth-session (OAuth/OIDC), @react-native-google-signin/google-signin, Facebook SDK. Clerk/Auth0/Supabase: third-party auth services with React Native SDKs — handle token management, refresh, biometric auth. Biometric auth: expo-local-authentication for Face ID / Touch ID / Fingerprint unlock.