--- name: auth0-react-native description: Use when adding authentication to React Native or Expo mobile apps (iOS\/Android) with biometric support - integrates react-native-auth0 SDK with native deep linking --- # Auth0 React Native Integration Add authentication to React Native and Expo mobile applications using react-native-auth0. --- ## Prerequisites - React Native or Expo application - Auth0 account and application configured as Native type - If you don't have Auth0 set up yet, use the `auth0-quickstart` skill first ## When NOT to Use - **React web applications** - Use `auth0-react` skill for SPAs (Vite\/CRA) - **React Server Components** - Use `auth0-nextjs` for Next.js applications - **Non-React native apps** - Use platform-specific SDKs (Swift for iOS, Kotlin for Android) - **Backend APIs** - Use JWT validation libraries for your server language --- ## Quick Start Workflow ### 1. Install SDK **Expo:** ```bash npx expo install react-native-auth0 ``` **React Native CLI:** ```bash npm install react-native-auth0 npx pod-install # iOS only ``` ### 2. Configure Environment **For automated setup with Auth0 CLI**, see [Setup Guide](reference\/setup.md) for complete scripts. **For manual setup:** Create `.env`: ```bash AUTH0_DOMAIN=your-tenant.auth0.com AUTH0_CLIENT_ID=your-client-id ``` ### 3. Configure Native Platforms **iOS** - Update `ios\/{YourApp}\/Info.plist`: ```xml CFBundleURLTypes<\/key> CFBundleTypeRole<\/key> None<\/string> CFBundleURLName<\/key> auth0<\/string> CFBundleURLSchemes<\/key> $(PRODUCT_BUNDLE_IDENTIFIER).auth0<\/string> <\/array> <\/dict> <\/array> ``` **Android** - Update `android\/app\/src\/main\/AndroidManifest.xml`: ```xml

<\/intent-filter> <\/activity> ``` **Expo** - Update `app.json`: ```json { "expo": { "scheme": "your-app-scheme", "ios": { "bundleIdentifier": "com.yourcompany.yourapp" }, "android": { "package": "com.yourcompany.yourapp" } } } ``` ### 4. Add Authentication with Auth0Provider Wrap your app with `Auth0Provider`: ```typescript import React from 'react'; import { Auth0Provider } from 'react-native-auth0'; import App from '.\/App'; export default function Root() { return ( <\/Auth0Provider> ); } ``` ### 5. Use the useAuth0 Hook ```typescript import React from 'react'; import { View, Button, Text, ActivityIndicator } from 'react-native'; import { useAuth0 } from 'react-native-auth0'; export default function App() { const { user, authorize, clearSession, isLoading } = useAuth0(); const login = async () => { try { await authorize({ scope: 'openid profile email' }); } catch (error) { console.error('Login error:', error); } }; const logout = async () => { try { await clearSession(); } catch (error) { console.error('Logout error:', error); } }; if (isLoading) { return ; } return ( {user ? ( <> Welcome, {user.name}!<\/Text> {user.email}<\/Text>