auth0-expo

Prerequisites

• Expo SDK 53 or higher (react-native-auth0 v5.x requires Expo 53+)

• React 19 and React Native 0.78.0 or higher

• Auth0 account with a Native application configured

• If Auth0 is not set up yet, use the auth0-quickstart skill first

• Not compatible with Expo Go — requires custom development client or EAS Build

Quick Start Workflow

1. Configure Auth0

For automated setup with Auth0 CLI, see Setup Guide for complete scripts.

For manual setup, configure a Native application in the Auth0 Dashboard and note your Domain and Client ID.

2. Verify Expo Dev Client

Agent instruction: Before installing the Auth0 SDK, check if the project has expo-dev-client installed. Read the project's package.json and look for expo-dev-client in dependencies or devDependencies.

If expo-dev-client is found: Proceed to step 3.

If expo-dev-client is NOT found: Use AskUserQuestion with the following message:

"The react-native-auth0 SDK requires a custom Expo development client — it does not work with Expo Go. Your project does not have expo-dev-client installed.

How would you like to proceed?

• Install it for me — I'll run npx expo install expo-dev-client and continue setup

• I'll set it up myself — skip this step and continue to Auth0 SDK installation"

If the user picks option 1, run:

npx expo install expo-dev-client

Then proceed to step 3. If option 2, proceed to step 3 directly.

3. Install SDK

npx expo install react-native-auth0

4. Configure Expo Config Plugin

Add the react-native-auth0 plugin to app.json (or app.config.js) with your Auth0 domain and a custom scheme. Also ensure bundleIdentifier (iOS) and package (Android) are set:

{
 "expo": {
 "ios": { "bundleIdentifier": "com.yourcompany.yourapp" },
 "android": { "package": "com.yourcompany.yourapp" },
 "plugins": [
 ["react-native-auth0", {
 "domain": "YOUR_AUTH0_DOMAIN",
 "customScheme": "YOUR_CUSTOM_SCHEME"
 }]
 ]
 }
}

The customScheme must be all lowercase with no special characters (e.g., auth0sample). See Setup Guide for HTTPS callbacks, multiple domains, EAS Build, and secret management.

5. Configure Callback URLs

Add to Allowed Callback URLs and Allowed Logout URLs in the Auth0 Dashboard:

YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/ios/YOUR_BUNDLE_ID/callback,
YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/android/YOUR_PACKAGE/callback

All values must be lowercase with no trailing slash. For HTTPS callback URLs (App Links / Universal Links), see Setup Guide.

6. Add Authentication with Auth0Provider

Wrap your app with Auth0Provider and use the useAuth0 hook:

Agent instruction: Before adding new UI elements, search the project for existing click handlers for login, logout, sign-in, or sign-out buttons. If existing handlers are found, hook the Auth0 code into them. Only create new buttons if no existing handlers are found.

import React from 'react';
import { Auth0Provider, useAuth0 } from 'react-native-auth0';
import { View, Button, Text, ActivityIndicator } from 'react-native';

function HomeScreen() {
 const { authorize, clearSession, user, isLoading, error } = useAuth0();

 const login = async () => {
 try {
 await authorize(
 { scope: 'openid profile email' },
 { customScheme: 'YOUR_CUSTOM_SCHEME' }
 );
 } catch (e) {
 console.error('Login error:', e);
 }
 };

 const logout = async () => {
 try {
 await clearSession({ customScheme: 'YOUR_CUSTOM_SCHEME' });
 } catch (e) {
 console.error('Logout error:', e);
 }
 };

 if (isLoading) {
 return ;
 }

 return (
 
 {user ? (
 <>
 Welcome, {user.name}! 
 {user.email} 
 
 
 ) : (
 
 )}
 {error && {error.message} }
 
 );
}

export default function App() {
 return (
 
 
 
 );
}

7. Build & Verify

Agent instruction: After completing the integration, build the project to verify it compiles:

npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android

If the build fails, analyze the error output. Common integration build failures include:

• "Invariant Violation: Native module cannot be null": Using Expo Go instead of a development build — run npx expo run:ios or npx expo run:android instead of npx expo start

• Plugin not applied: Missing react-native-auth0 in app.json plugins array — verify the plugin configuration

• Pod install fails (iOS): Run npx expo prebuild --clean to regenerate native projects

• Manifest merge failure (Android): Conflicting auth0Domain placeholder — ensure only the config plugin sets the domain

Re-run the build after each fix. Track the number of build-fix iterations.

Failcheck: If the build still fails after 5–6 fix attempts, stop and ask the user using AskUserQuestion: "The build is still failing after several fix attempts. How would you like to proceed?"

• Let the skill continue fixing iteratively

• Fix it manually — show the remaining errors

• Skip build verification — proceed without a successful build

Common Mistakes

Mistake Fix Using Expo Go instead of development build react-native-auth0 requires native code. Use npx expo run:ios / npx expo run:android or create a development build with EAS. Missing customScheme in authorize/clearSession calls Pass { customScheme: 'your-scheme' } as the second argument to authorize() and clearSession(). Must match the value in app.json plugin config. Callback URL mismatch Ensure callback URL is all lowercase, no trailing slash, and matches Auth0 Dashboard exactly: {customScheme}://{domain}/ios/{bundleId}/callback App type not set to Native The Auth0 application must be type Native in the Dashboard, not SPA or Regular Web. Missing bundleIdentifier or package in app.json Both expo.ios.bundleIdentifier and expo.android.package must be set in app.json for callback URLs to work. Forgot to wrap app with Auth0Provider All components using useAuth0() must be children of Auth0Provider. Using react-native-auth0 v5.x with Expo < 53 Version 5.x requires Expo 53+. Use v4.x for older Expo versions. Not testing on physical device Biometric authentication (Face ID, fingerprint) only works on a physical device, not simulators. Always test the full auth flow on a real device before release.