Auth0 React Native

Use when adding authentication to React Native or Expo mobile apps (iOS/Android) with biometric support - integrates react-native-auth0 SDK with native deep...

Security Scan

The skill's instructions match its stated purpose (Auth0 + React Native) but contain small incoherences — it references environment variables and the Auth0 CLI that are not declared in the skill metadata, which merits user review before installing.

Purpose & Capability

The skill's name, description, and instructions consistently describe adding Auth0 auth to React Native/Expo apps using react-native-auth0. However, the SKILL.md and references call out environment variables (AUTH0_DOMAIN, AUTH0_CLIENT_ID) and the Auth0 CLI (auth0 login / auth0 apps create) that are not declared in the skill's required env vars or required binaries in the registry metadata.

Instruction Scope

Runtime instructions stay within the expected scope for integrating Auth0: installing the SDK, editing Info.plist/AndroidManifest.json/app.json, wrapping with Auth0Provider, calling authorize/getCredentials, and testing. There are no instructions to read system files or exfiltrate data to unexpected endpoints. Examples use local .env and common tools like npx/npm/pod-install.

Install Mechanism

This is an instruction-only skill with no install spec and no code files — low install risk. The skill does not instruct downloading arbitrary archives or adding binaries itself.

Credentials

The skill naturally requires Auth0 configuration values (AUTH0_DOMAIN and AUTH0_CLIENT_ID) and demonstrates using them via process.env/.env and the auth0 CLI. Those are expected for the stated purpose, but the metadata lists no required env vars and no required binaries. The mismatch is a proportionality/documentation issue: the requested/used secrets are appropriate, but they should be declared to the platform so users understand what will be needed and where secrets will be entered.

Persistence & Privilege

The skill does not request permanent inclusion (always: false), does not change other skills' configs, and contains no instructions to modify system-wide agent settings. Autonomous invocation is enabled by default but not combined with other high-risk factors here.

What to consider before installing

This appears to be a legitimate Auth0 React Native integration guide, but check three things before installing: 1) The skill's metadata declares no required environment variables or binaries, yet the docs instruct creating .env variables (AUTH0_DOMAIN, AUTH0_CLIENT_ID) and use of the Auth0 CLI (auth0 login / auth0 apps create). Confirm where you'll supply those values and whether your platform will surface those env vars to the skill. 2) Ensure you have the Auth0 CLI and expected tooling (npm/npx, CocoaPods) installed locally when following automated steps; the skill does not install them. 3) Treat the client ID and any secrets (if you add client secret later) as sensitive — follow the document's secure-storage guidance and avoid committing .env files to source control. If the platform requires declaring required env vars/binaries, ask the publisher to update the metadata to include AUTH0_DOMAIN, AUTH0_CLIENT_ID and note the optional requirement of the 'auth0' CLI so the permission surface is clear.

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:

npx expo install react-native-auth0

React Native CLI:

npm install react-native-auth0
npx pod-install  # iOS only

2. Configure Environment

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

For manual setup:

Create .env:

AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id

3. Configure Native Platforms

iOS - Update ios/{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 - Update 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>

Expo - Update app.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:

import 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>
  );
}

5. Use the useAuth0 Hook

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>
  );
}

6. Test Authentication

Expo:

npx expo start

React Native:

npx react-native run-ios
# or
npx react-native run-android

---

Detailed Documentation

• Setup Guide - Automated setup, native configuration, deep linking
• Patterns Guide - Secure storage, biometric auth, token refresh
• API Reference - Complete SDK API, methods, configuration options

---

Common Mistakes

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., com.yourapp.auth0://YOUR_DOMAIN/ios/com.yourapp/callback)
iOS build fails after install	Run npx pod-install to link native dependencies
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 android:exported="true" is set on RedirectActivity

---

Related Skills

• auth0-quickstart - Basic Auth0 setup
• auth0-migration - Migrate from another auth provider
• auth0-mfa - Add Multi-Factor Authentication

---

Quick Reference

Core Hook API:

• useAuth0() - Main hook for authentication
• authorize() - Initiate login
• clearSession() - Logout
• user - User profile object
• getCredentials() - Get tokens for API calls
• isLoading - Loading state

Common Use Cases:

• Login/Logout → See Step 5 above
• Secure token storage → Automatic with Auth0Provider
• Biometric authentication → Patterns Guide
• API calls with tokens → Patterns Guide
• Token refresh → Automatic with getCredentials()

---

References

• Auth0 React Native SDK Documentation
• Auth0 React Native Quickstart
• SDK GitHub Repository