auth0/auth0-react

Summary

auth0/auth0-react is the official Auth0 SDK for React Single Page Applications, distributed as @auth0/auth0-react on npm and licensed under MIT. It provides React components and hooks that wrap Auth0's authentication flows so engineers can add login, logout, and user profile handling without hand-rolling OAuth/OIDC logic. The SDK is written in TypeScript and is intended for SPAs running entirely in the browser.

What it is useful for

The SDK is useful when a React app needs delegated authentication through Auth0 and the engineer wants a React-idiomatic interface rather than direct calls to the underlying auth client. Concrete scenarios documented in the README include:

• Wiring a Single Page Application to Auth0 using the OIDC Authorization Code with PKCE flow (the README notes RS256 and OIDC Conformant must be enabled in the dashboard).
• Reading auth state in components through the useAuth0 hook, which exposes isLoading, isAuthenticated, error, user, loginWithRedirect, and logout.
• Protecting routes via the withAuthenticationRequired higher-order component or the useAuth0Suspense hook for React Suspense-based loading states.
• Integrating with Auth0 enterprise connections using the useEnterpriseConnect hook.
• Enabling Anonymous Sessions, which assign a persistent identity to visitors before login (Early Access; requires contacting an Auth0 representative).
• Forcing a specific Experiment Center variant on login by passing experiment_id and variation_id in authorizationParams (Early Access).

Documented limitations include the Early Access status of both Anonymous Sessions and Experiment Center support, which are not generally available without approval.

How engineers can use it

Setup steps shown in the README:

1. Install the package:

   npm install @auth0/auth0-react
   

   or yarn add @auth0/auth0-react.
2. Create a Single Page Application in the Auth0 Dashboard and set Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins to the app's origin (the README example uses http://localhost:3000).
3. Wrap the app in Auth0Provider with the domain, clientId, and a redirect_uri in authorizationParams.
4. Use useAuth0() in components to trigger loginWithRedirect() and logout({ logoutParams: { returnTo: window.location.origin } }) and to render the user object.

For full configuration, additional examples (e.g., silent authentication, organization handling), and the public API surface, the README points to the linked EXAMPLES.md, FAQ.md, and the generated API reference at auth0.github.io/auth0-react.