Auth0 React
Wire Auth0 login, tokens, and provider options into a React SPA without re-reading the full @auth0/auth0-react docs.
Overview
Auth0 React is an agent skill for the Build phase that documents @auth0/auth0-react Auth0Provider options, tokens, and login callbacks for React apps.
Install
npx skills add https://github.com/auth0/agent-skills --skill auth0-reactWhat is this skill?
- Auth0Provider required domain, clientId, and authorizationParams (audience, scope, connection, prompt)
- Token cacheLocation localstorage vs memory and useRefreshTokens / fallback flags
- interactiveErrorHandler popup path for MFA and step-up with refresh tokens
- onRedirectCallback and skipRedirectCallback for post-login routing
- Advanced hooks: useMrrt for multi-tenant refresh, custom Auth0Context
Adoption & trust: 1.1k installs on skills.sh; 26 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are adding login to a React app and keep misconfiguring audience, refresh tokens, or redirect callbacks against Auth0.
Who is it for?
Indie SaaS builders standardizing Auth0 in Create React App, Vite, or similar SPAs before backend JWT validation.
Skip if: Native mobile auth flows, server-only OAuth without a React provider, or greenfield apps choosing a different IdP with no Auth0 tenant.
When should I use this skill?
Implementing or debugging @auth0/auth0-react Auth0Provider, tokens, or redirect/MFA behavior in a React app.
What do I get? / Deliverables
Your agent can emit provider-ready TSX with the right authorizationParams, cache, and callback hooks so users sign in and call your API with valid tokens.
- Auth0Provider TSX snippet with authorizationParams
- Token and cache strategy notes for your app
Recommended Skills
Journey fit
Auth lands during Build when you integrate identity before you can ship a protected app or API audience. Integrations is the right shelf for SDK provider config, authorizationParams, refresh tokens, and callback handling—not generic UI polish.
How it compares
SDK configuration reference for React, not a generic OAuth theory skill or Auth0 Terraform deploy pack.
Common Questions / FAQ
Who is auth0-react for?
Solo builders implementing browser login and API access in React using Auth0’s official React SDK.
When should I use auth0-react?
During Build/integrations while wrapping your app in Auth0Provider, tuning refresh tokens, or fixing redirect and MFA popup behavior before Ship/security review.
Is auth0-react safe to install?
The skill describes public SDK usage; never paste client secrets into frontend code—review the Security Audits panel on this page before install.
SKILL.md
READMESKILL.md - Auth0 React
# Auth0 React SDK API Reference Complete API documentation for @auth0/auth0-react SDK. --- ## Auth0Provider Configuration ### Complete Configuration Options ```tsx import { Auth0Provider } from '@auth0/auth0-react'; <Auth0Provider // Required domain="your-tenant.auth0.com" clientId="your-client-id" // Authorization parameters authorizationParams={{ redirect_uri: window.location.origin, audience: 'https://your-api-identifier', // For API calls scope: 'openid profile email', // Default scopes connection: 'google-oauth2', // Force specific connection prompt: 'login', // Force login prompt ui_locales: 'en', // Localization screen_hint: 'signup', // Show signup page by default }} // Token management cacheLocation="localstorage" // or "memory" for stricter security (default: "memory") useRefreshTokens={true} // Enable refresh tokens (default: false) useRefreshTokensFallback={false} // Fall back to iframe if refresh token exchange fails (default: false) useMrrt={false} // Enable Multi-Refresh-Token for multi-tenant apps (default: false) // MFA / Step-up interactiveErrorHandler="popup" // Automatically handle MFA via popup (requires useRefreshTokens) // Advanced options skipRedirectCallback={false} // Skip automatic callback handling context={Auth0Context} // Custom React context // Callbacks onRedirectCallback={(appState) => { // Handle redirect after login // appState receives the custom state passed to loginWithRedirect() // Example: if login was called with appState: { targetUrl: '/dashboard' } // then appState.targetUrl will be '/dashboard' here window.location.replace(appState?.returnTo || '/'); }} > <App /> </Auth0Provider> ``` ### Configuration Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `domain` | string | **Required** | Your Auth0 tenant domain | | `clientId` | string | **Required** | Your Auth0 application client ID | | `authorizationParams` | object | `{}` | Authorization parameters (see below) | | `cacheLocation` | `'memory' \| 'localstorage'` | `'memory'` | Where to store tokens | | `useRefreshTokens` | boolean | `false` | Enable refresh token rotation | | `useRefreshTokensFallback` | boolean | `false` | Fall back to iframe if refresh token exchange fails | | `useMrrt` | boolean | `false` | Enable Multi-Refresh-Token support for multi-tenant apps. Requires `useRefreshTokens` and `useRefreshTokensFallback` to be `true` | | `workerUrl` | string | - | Custom worker script URL for token calls. Useful for CSP compliance when using `useRefreshTokens: true` with `cacheLocation: 'memory'` | | `context` | React.Context | - | Custom React context for nested Auth0Providers. Allows multiple Auth0Providers in same app | | `interactiveErrorHandler` | `'popup'` | - | Automatically handle MFA via popup when `getAccessTokenSilently` encounters `mfa_required`. Requires `useRefreshTokens={true}` | | `skipRedirectCallback` | boolean | `false` | Skip automatic callback handling | | `onRedirectCallback` | function | - | Callback after successful login | ### Authorization Parameters | Parameter | Type | Description | |-----------|------|-------------| | `redirect_uri` | string | URL to redirect after authentication | | `audience` | string | API audience identifier | | `scope` | string | Requested scopes (space-separated) | | `connection` | string | Force specific connection | | `prompt` | string | `'none'`, `'login'`, `'consent'`, or `'select_account'` | | `ui_locales` | string | Language code (e.g., `'en'`, `'es'`) | | `screen_hint` | string | `'signup'` to show signup by default | | `max_age` | number | Maximum authentication age in seconds | | `organization` | string | Organization ID for B2B | | `invitation` | string | Invitation ID for organization invites | --- ## useAuth0 Hook ### Hook Interface ```typescript const { // Authentication state isLoading, isAuthenticated,