Auth0 SDK for React Native

Common errors

• TypeError: Cannot read properties of undefined (reading 'authorize')

  cause Attempting to use `Auth0.webAuth.authorize()` statically or on a pre-v5 global Auth0 object after upgrading to v5.x.
  fix In v5.x, you must instantiate the Auth0 client: `const auth0 = new Auth0({ domain, clientId });` and then use `auth0.webAuth.authorize()`.

• Invalid redirect URI

  cause The callback URL configured in your Auth0 application settings does not exactly match the one generated by `react-native-auth0` for your specific platform (iOS bundle ID or Android package name).
  fix Carefully follow the SDK configuration steps for Android, iOS, or Expo. Ensure your Auth0 application's 'Allowed Callback URLs' are correctly set, e.g., `APP_BUNDLE_IDENTIFIER://YOUR_AUTH0_DOMAIN/ios/APP_BUNDLE_IDENTIFIER/callback`.

• Could not find a declaration file for module 'react-native-auth0'.

  cause TypeScript compiler is unable to locate the type definitions for the `react-native-auth0` package. This might happen due to incorrect `tsconfig.json` setup or issues with module resolution.
  fix Ensure `react-native-auth0` is correctly installed and your `tsconfig.json` includes `node_modules` in its `typeRoots` or `include` paths. If the problem persists, try updating TypeScript or reinstalling `node_modules`.

Warnings

• breaking Version 5.0.0 introduced a complete architectural refactor, including breaking changes to the API surface. Applications upgrading from v4.x or earlier will require significant code changes.
  Fix: Consult the official 'Migration Guide' on the GitHub repository for detailed instructions on upgrading to v5.x, especially regarding the instantiation of the `Auth0` client.
• breaking The minimum peer dependencies for `react-native-auth0` v5.0.0+ were updated to React 19.0.0+, React Native 0.78.0+, and Expo 53+.
  Fix: Ensure your project meets these minimum version requirements before upgrading. If using an older Expo version (less than 53), you must use `react-native-auth0` v4.x or earlier.
• gotcha The SDK requires a minimum iOS deployment target of 14.0. Failure to set this in your Podfile will result in build errors.
  Fix: Update your project's `ios/Podfile` to `platform :ios, '14.0'`.
• gotcha The `AuthError` class was not exported from the main entry point in v5.0.0, leading to potential import issues if trying to access it directly.
  Fix: Upgrade to `react-native-auth0` v5.0.1 or newer to correctly import `AuthError` as a named export: `import { AuthError } from 'react-native-auth0';`.

Install

• npm install react-native-auth0 npm
• yarn add react-native-auth0 yarn
• pnpm add react-native-auth0 pnpm

Imports

• Auth0
  wrong:

  import { Auth0 } from 'react-native-auth0';

  correct:

  import Auth0 from 'react-native-auth0';

  The primary `Auth0` class is exported as a default export since v5, and needs to be instantiated before use.
• useAuth0
  wrong:

  import useAuth0 from 'react-native-auth0';

  correct:

  import { useAuth0 } from 'react-native-auth0';

  A named export hook for consuming Auth0 context within functional components, if available or implemented via a wrapper.
• AuthError
  wrong:

  const AuthError = require('react-native-auth0').AuthError;

  correct:

  import { AuthError } from 'react-native-auth0';

  The custom error class exported for type checking and handling specific Auth0 SDK errors. Exported from main entry point since v5.0.1.

Quickstart

Demonstrates initializing the Auth0 client, performing an interactive login via `webAuth.authorize()`, retrieving the access token, and clearing the session with `webAuth.clearSession()`.

import React, { useState } from 'react';
import { Button, Text, View, StyleSheet, Alert } from 'react-native';
import Auth0 from 'react-native-auth0';

// Ensure these are set in your .env or similar configuration
const AUTH0_DOMAIN = process.env.AUTH0_DOMAIN ?? 'YOUR_AUTH0_DOMAIN.auth0.com';
const AUTH0_CLIENT_ID = process.env.AUTH0_CLIENT_ID ?? 'YOUR_AUTH0_CLIENT_ID';
const AUTH0_AUDIENCE = process.env.AUTH0_AUDIENCE ?? 'YOUR_API_AUDIENCE'; // Optional

const auth0 = new Auth0({
  domain: AUTH0_DOMAIN,
  clientId: AUTH0_CLIENT_ID,
});

export default function Auth0Quickstart() {
  const [accessToken, setAccessToken] = useState<string | null>(null);

  const login = async () => {
    try {
      const credentials = await auth0.webAuth.authorize({
        scope: 'openid profile email offline_access',
        audience: AUTH0_AUDIENCE,
      });
      setAccessToken(credentials.accessToken);
      Alert.alert('Success', `Logged in! Token starts with: ${credentials.accessToken.substring(0, 10)}...`);
    } catch (e: any) {
      console.error('Login failed:', e);
      Alert.alert('Login Error', e.message || 'An unknown error occurred during login.');
    }
  };

  const logout = async () => {
    try {
      await auth0.webAuth.clearSession({});
      setAccessToken(null);
      Alert.alert('Success', 'Logged out.');
    } catch (e: any) {
      console.error('Logout failed:', e);
      Alert.alert('Logout Error', e.message || 'An unknown error occurred during logout.');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Auth0 React Native Integration</Text>
      {accessToken ? (
        <View>
          <Text style={styles.statusText}>You are logged in!</Text>
          <Button title="Log Out" onPress={logout} />
        </View>
      ) : (
        <View>
          <Text style={styles.statusText}>You are logged out.</Text>
          <Button title="Log In" onPress={login} />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 40,
    color: '#333',
  },
  statusText: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: 'center',
    color: '#555',
  },
});