$ show auth0/auth0-react
This is the official Auth0 React SDK (`@auth0/auth0-react`), a client-side library that provides React bindings for Auth0 authentication. It wraps the core `@auth0/auth0-spa-js` library and exposes a React-friendly API via context, hooks, and higher-order components. The architecture follows a standard React context provider pattern: `Auth0Provider` wraps the application tree, and `useAuth0` (or `useAuth0Suspense`) provides authentication state and methods (login, logout, token management, MFA, passkeys). The SDK supports OAuth2 Authorization Code Grant with PKCE, refresh token rotation, DPoP, and custom token exchange. It is designed for single-page applications and is compatible with React 19+, including Next.js App Router (via `'use client'` directive injection). Key entry points include `Auth0Provider` (the root provider), `useAuth0` (primary hook), `useAuth0Suspense` (Suspense-enabled variant), `withAuthenticationRequired` (HOC for route protection), and `withAuth0` (legacy HOC). The SDK manages authentication state through a reducer (`src/reducer.tsx`) and provides a rich error hierarchy (`OAuthError`, `MfaRequiredError`, etc.). External dependencies are minimal: React, ReactDOM, and `@auth0/auth0-spa-js`. The codebase is well-tested with Jest unit tests (using a manual mock for the underlying SDK) and Cypress integration tests against a live Auth0 tenant. The SDK demonstrates strong engineering practices: typed interfaces, memoized context values, structured error handling, and a clear separation of concerns between the provider, hooks, and HOCs. It includes generated TypeDoc documentation and example applications for Vite, Gatsby, and Next.js. While the library is tightly coupled to the Auth0 ecosystem, its patterns (context-based auth, Suspense integration, error hierarchy) are reusable in other authentication contexts.
The LLM identified 3 files worth highlighting for reuse:
Defines `OAuthError`, a custom React error class that extends the native `Error` with `error` and `error_description` properties. This pattern is reusable for any OAuth2/OIDC client library that needs structured error handling. The class is self-contained, has no internal dependencies, and can be extracted into a separate package with minimal modification.
Implements a pure reducer function for managing authentication state (loading, authenticated, user, error). It handles actions like `LOGIN_POPUP_COMPLETE`, `HANDLE_REDIRECT_COMPLETE`, `LOGOUT`, and `ERROR`. This reducer is a clean, testable pattern that can be reused in any React authentication context, not just Auth0. It has no external dependencies beyond React's `useReducer`.
A higher-order component that protects routes by redirecting unauthenticated users to the Auth0 login page. It supports `returnTo`, `onRedirecting`, `onBeforeAuthentication`, and `loginOptions` props. This is a reusable pattern for any authentication system that uses redirect-based login. The component is self-contained (depends only on the Auth0 context) and demonstrates a clean HOC pattern with proper prop forwarding and display name.