Add authentication to React single-page applications using @auth0/auth0-react.
auth0-quickstart skill firstauth0-nextjs skill for both App Router and Pages Routerauth0-react-native skill for iOS/Androidnpm install @auth0/auth0-react
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
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>
);
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>;
}
Start your dev server and test the login flow:
npm run dev # Vite
# or
npm start # CRA
| 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 |
| 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" |
auth0-quickstart - Basic Auth0 setupauth0-migration - Migrate from another auth providerauth0-mfa - Add Multi-Factor Authenticationauth0-cli - Manage Auth0 resources from the terminalCore Hooks:
useAuth0() - Main authentication hookisAuthenticated - Check if user is logged inuser - User profile informationloginWithRedirect() - Initiate loginlogout() - Log out usergetAccessTokenSilently() - Get access token for API callsmfa - MFA API client for enrollment, challenge, and verificationmfa.getAuthenticators(mfaToken) - List enrolled authenticatorsmfa.getEnrollmentFactors(mfaToken) - Get available enrollment factorsmfa.enroll(params) - Enroll new authenticator (OTP, SMS, Email, Voice, Push)mfa.challenge(params) - Initiate MFA challengemfa.verify(params) - Verify MFA challenge and complete authenticationMFA 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.* methodsCommon Use Cases:
共 1 个版本