Skill

Official

Review

Audit score 70

auth0-react

auth0/agent-skills

Add Auth0 authentication to React SPAs with login, logout, protected routes, and user sessions.

What is auth0-react?

Integrates @auth0/auth0-react SDK for React 16+ single-page applications. Use this skill when adding login/logout, protecting routes, or managing user sessions in React apps—Auth0 handles secure token storage and session management automatically.

Wrap your React app with Auth0Provider for centralized authentication
Add login/logout buttons using useAuth0() hook with automatic redirect-based authentication
Protect routes and conditionally render components based on isAuthenticated status
Retrieve user profile information and access tokens for API calls
Handle MFA enrollment, challenges, and verification flows with built-in error handling
Support both Vite and Create React App with environment variable configuration

How to install auth0-react

npx skills add https://github.com/auth0/agent-skills --skill auth0-react

Prerequisites

React 16.11+ application (Vite or Create React App)
Auth0 account with an application configured
Redirect URI registered in Auth0 Dashboard (e.g., http://localhost:3000)
Environment variables set for VITE_AUTH0_DOMAIN and VITE_AUTH0_CLIENT_ID (or REACT_APP_* for CRA)

Claude Code

Cursor

Windsurf

Cline

How to use auth0-react

1.Run npm install @auth0/auth0-react to add the SDK
2.Create .env file with your Auth0 domain and client ID using the correct prefix for your build tool
3.Wrap your root App component with <Auth0Provider> in main.tsx or index.tsx, passing domain, clientId, and redirect_uri
4.Import useAuth0 hook in components and call loginWithRedirect() for login and logout() for logout
5.Check isAuthenticated and isLoading states before rendering auth-dependent UI
6.Call getAccessTokenSilently() to retrieve tokens for backend API requests
7.Test the login flow by starting your dev server and clicking the login button

Use cases

Good for

Adding a login button to an existing React SPA without backend authentication
Protecting dashboard or admin routes so only authenticated users can access them
Calling a backend API by retrieving and attaching access tokens from Auth0
Implementing multi-factor authentication (MFA) for sensitive operations
Migrating from manual JWT handling to Auth0's secure token management

Who it's for

React developers building single-page applications
Teams adopting Auth0 for centralized identity management
Developers needing OAuth 2.0 / OpenID Connect without managing tokens manually
Projects requiring MFA support with minimal custom code

auth0-react FAQ

Should I use this for Next.js?

No. Use the auth0-nextjs skill instead, which supports both App Router and Pages Router with server-side rendering.

How do I protect routes from unauthorized access?

Check the isAuthenticated flag from useAuth0() and conditionally render routes or redirect to login. See the Integration Guide for protected route patterns.

Where are tokens stored?

The SDK handles secure token storage automatically—never manually store tokens in localStorage. The SDK uses in-memory storage with automatic refresh.

What should I do if I get MfaRequiredError?

Catch the error from getAccessTokenSilently(), extract the mfa_token, then use the mfa API from useAuth0() to enroll or challenge the user.

Can I use embedded login instead of redirect-based login?

No. This SDK uses Auth0 Universal Login (redirect-based). For embedded login, use a different authentication approach or Auth0's Lock widget.

Full instructions (SKILL.md)

Source of truth, from auth0/agent-skills.

name: auth0-react description: > Use when adding Auth0 login, logout, protected routes, or user sessions to a React SPA. Integrates @auth0/auth0-react — use even if the user says "add login to my React app" or "protect my React routes" without naming the SDK. license: Apache-2.0 metadata: author: Auth0 support@auth0.com version: '1.0.0' openclaw: emoji: "\U0001F510" homepage: https://github.com/auth0/agent-skills requires: bins: - auth0 skills: - auth0-cli os: - darwin - linux install: - id: brew kind: brew formula: auth0/auth0-cli/auth0 bins: [auth0] label: 'Install Auth0 CLI (brew)'

Auth0 React Integration

Add authentication to React single-page applications using @auth0/auth0-react.

Prerequisites

React 16.11+ application (Vite or Create React App) - supports React 16, 17, 18, and 19
Auth0 account and application configured
If you don't have Auth0 set up yet, use the auth0-quickstart skill first

When NOT to Use

Next.js applications - Use auth0-nextjs skill for both App Router and Pages Router
React Native mobile apps - Use auth0-react-native skill for iOS/Android
Server-side rendered React - Use framework-specific SDK (Next.js, Remix, etc.)
Embedded login - This SDK uses Auth0 Universal Login (redirect-based)
Backend API authentication - Use express-openid-connect or JWT validation instead

Quick Start Workflow

1. Install SDK

npm install @auth0/auth0-react

2. Configure Environment

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

For manual setup:

Create .env file:

Vite:

VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id

Create React App:

REACT_APP_AUTH0_DOMAIN=your-tenant.auth0.com
REACT_APP_AUTH0_CLIENT_ID=your-client-id

3. Wrap App with Auth0Provider

Update src/main.tsx (Vite) or src/index.tsx (CRA):

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN} // or process.env.REACT_APP_AUTH0_DOMAIN
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>
);

4. Add Authentication UI

import { useAuth0 } from '@auth0/auth0-react';

export function LoginButton() {
  const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0();

  if (isLoading) return <div>Loading...</div>;

  if (isAuthenticated) {
    return (
      <div>
        <span>Welcome, {user?.name}</span>
        <button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
          Logout
        </button>
      </div>
    );
  }

  return <button onClick={() => loginWithRedirect()}>Login</button>;
}

5. Test Authentication

Start your dev server and test the login flow:

npm run dev  # Vite
# or
npm start    # CRA

Detailed Documentation

Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
Integration Guide - Protected routes, API calls, error handling, advanced patterns
API Reference - Complete SDK API, configuration options, hooks reference, testing strategies

Common Mistakes

Mistake	Fix
Forgot to add redirect URI in Auth0 Dashboard	Add your application URL (e.g., `http://localhost:3000`, `https://app.example.com`) to Allowed Callback URLs in Auth0 Dashboard
Using wrong env var prefix	Vite uses `VITE_` prefix, Create React App uses `REACT_APP_`
Not handling loading state	Always check `isLoading` before rendering auth-dependent UI
Storing tokens in localStorage	Never manually store tokens - SDK handles secure storage automatically
Missing Auth0Provider wrapper	Entire app must be wrapped in `<Auth0Provider>`
Provider not at root level	Auth0Provider must wrap all components that use auth hooks
Wrong import path for env vars	Vite uses `import.meta.env.VITE_`, CRA uses `process.env.REACT_APP_`
Using `acr_values` redirect for in-app MFA	Use `useAuth0().mfa` API for in-app enrollment/challenge/verify flows
Not catching `MfaRequiredError`	Wrap `getAccessTokenSilently` in try/catch and check `instanceof MfaRequiredError`
Making direct HTTP calls to MFA endpoints	Use the `mfa` property from `useAuth0()` — it handles token management automatically
Forgetting refresh tokens for step-up MFA	Set `useRefreshTokens={true}` on Auth0Provider when using `interactiveErrorHandler="popup"`

Related Skills

auth0-quickstart - Basic Auth0 setup
auth0-migration - Migrate from another auth provider
auth0-mfa - Add Multi-Factor Authentication
auth0-cli - Manage Auth0 resources from the terminal

Quick Reference

Core Hooks:

useAuth0() - Main authentication hook
isAuthenticated - Check if user is logged in
user - User profile information
loginWithRedirect() - Initiate login
logout() - Log out user
getAccessTokenSilently() - Get access token for API calls
mfa - MFA API client for enrollment, challenge, and verification
- mfa.getAuthenticators(mfaToken) - List enrolled authenticators
- mfa.getEnrollmentFactors(mfaToken) - Get available enrollment factors
- mfa.enroll(params) - Enroll new authenticator (OTP, SMS, Email, Voice, Push)
- mfa.challenge(params) - Initiate MFA challenge
- mfa.verify(params) - Verify MFA challenge and complete authentication

MFA Error Types (import from @auth0/auth0-react):

MfaRequiredError - Thrown by getAccessTokenSilently when MFA is needed (has mfa_token and mfa_requirements)
MfaEnrollmentError, MfaChallengeError, MfaVerifyError - Thrown by respective mfa.* methods

Common Use Cases: