Loading...
Loading...
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
npx skill4agent add auth0/agent-skills auth0-react-nativeauth0-quickstartauth0-reactauth0-nextjsnpx expo install react-native-auth0npm install react-native-auth0
npx pod-install # iOS only.envAUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-idios/{YourApp}/Info.plist<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>None</string>
<key>CFBundleURLName</key>
<string>auth0</string>
<key>CFBundleURLSchemes</key>
<array>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).auth0</string>
</array>
</dict>
</array>android/app/src/main/AndroidManifest.xml<activity
android:name="com.auth0.android.provider.RedirectActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="YOUR_AUTH0_DOMAIN"
android:pathPrefix="/android/${applicationId}/callback"
android:scheme="${applicationId}" />
</intent-filter>
</activity>app.json{
"expo": {
"scheme": "your-app-scheme",
"ios": {
"bundleIdentifier": "com.yourcompany.yourapp"
},
"android": {
"package": "com.yourcompany.yourapp"
}
}
}Auth0Providerimport React from 'react';
import { Auth0Provider } from 'react-native-auth0';
import App from './App';
export default function Root() {
return (
<Auth0Provider
domain={process.env.AUTH0_DOMAIN}
clientId={process.env.AUTH0_CLIENT_ID}
>
<App />
</Auth0Provider>
);
}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 <ActivityIndicator />;
}
return (
<View>
{user ? (
<>
<Text>Welcome, {user.name}!</Text>
<Text>{user.email}</Text>
<Button title="Logout" onPress={logout} />
</>
) : (
<Button title="Login" onPress={login} />
)}
</View>
);
}npx expo startnpx react-native run-ios
# or
npx react-native run-android| Mistake | Fix |
|---|---|
| Forgot to wrap app with Auth0Provider | All components using useAuth0() must be children of Auth0Provider |
| Forgot to configure deep linking | Add URL scheme to iOS Info.plist and Android AndroidManifest.xml (see Step 3) |
| Callback URL mismatch | Ensure callback URL in Auth0 Dashboard matches your app's URL scheme (e.g., |
| iOS build fails after install | Run |
| App created as SPA type in Auth0 | Must be Native application type for mobile apps |
| Not handling auth errors | Wrap authorize/clearSession calls in try-catch blocks |
| Deep link not working on Android | Verify |
auth0-quickstartauth0-migrationauth0-mfauseAuth0()authorize()clearSession()usergetCredentials()isLoadingAuth0ProvidergetCredentials()