--- name: auth0-react description: Use when adding authentication to React applications (login, logout, user sessions, protected routes) - integrates @auth0\/auth0-react SDK for SPAs with Vite or Create React App --- # 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 ```bash npm install @auth0\/auth0-react ``` ### 2. Configure Environment **For automated setup with Auth0 CLI**, see [Setup Guide](reference\/setup.md) for complete scripts. **For manual setup:** Create `.env` file: **Vite:** ```bash VITE_AUTH0_DOMAIN=your-tenant.auth0.com VITE_AUTH0_CLIENT_ID=your-client-id ``` **Create React App:** ```bash 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): ```tsx 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( <\/Auth0Provider> <\/React.StrictMode> ); ``` ### 4. Add Authentication UI ```tsx import { useAuth0 } from '@auth0\/auth0-react'; export function LoginButton() { const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0(); if (isLoading) return

Loading...<\/div>; if (isAuthenticated) { return (

Welcome, {user?.name}<\/span>