auth0-react

Add Auth0 authentication to React SPAs with login, logout, and session management.

23|71|Updated Jul 8, 2025
One-click install
npx skills add https://github.com/auth0/docs-v2 --skill auth0-react
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: auth0-react
Source: https://github.com/auth0/docs-v2/tree/main/main/.mintlify/skills/auth0-react
Command: npx skills add https://github.com/auth0/docs-v2 --skill auth0-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Auth0 React Integration eliminates the guesswork of wiring login flows in Vite or Create React App SPAs by describing how to configure domain and client ID environment variables, wrap the root with Auth0Provider, and rely on useAuth0 hooks for session state and protected routes.

Core Features & Use Cases

  • SDK Installation & Environment Setup: Follow the Setup Guide in references/setup.md to install @auth0/auth0-react, choose between automated CLI commands or manual .env values, and keep VITE_/REACT_APP_ prefixes aligned with the build tool.
  • Provider & Hook Integration: Wrap src/main.tsx or src/index.tsx with Auth0Provider, pass redirect_uri and authorizationParams, and use useAuth0 in components for login, logout, loading states, and guarding routes as shown in references/integration.md.
  • Use Case & Advanced Patterns: Protect dashboards or customer portals, integrate getAccessTokenSilently for API calls, and reference references/api.md for MFA support, token management, and error handling to keep every SPA component secure.

Quick Start

Use the auth0-react skill to install @auth0/auth0-react, configure your VITE or CRA environment variables, wrap the entry point with Auth0Provider, and verify login/logout through the Auth0 Universal Login redirect flow.

Frequently Asked Questions about auth0-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add authentication to a React SPA using Auth0?

To add authentication to a React SPA, install @auth0/auth0-react, configure environment variables for your Auth0 domain and client ID, and wrap your application root with the Auth0Provider component. This setup enables login, logout, and session management.

Does Auth0 React integration work with Vite and Create React App?

Yes, Auth0 React integration works with both Vite and Create React App. You must align your environment variable prefixes with your build tool, using VITE_ for Vite and REACT_APP_ for Create React App to properly configure the Auth0 domain and client ID.

How do I protect routes and components in a React single-page application?

Protect React SPA routes and components by using the useAuth0 hook within your component tree. The hook provides loading states and authentication data so you can conditionally render protected dashboards or portals based on the user's session status.

What is the best way to get an access token for API calls in a React app with Auth0?

The best way to get an access token for API calls in a React app is to use the getAccessTokenSilently method from the useAuth0 hook. This method manages tokens securely and handles multi-factor authentication flows for your protected API requests.

Why do I need the Auth0Provider wrapper in my React application?

The Auth0Provider wrapper is required in your React application to establish the authentication context for the useAuth0 hook. It manages universal login redirects, authorization parameters, and session state so child components can securely handle authentication.

Can I use universal login redirects with my React SPA?

Yes, you can use universal login redirects with your React SPA. By configuring the redirect_uri and authorizationParams in the Auth0Provider, your application securely redirects users to Auth0 for login and back to your protected components.