React Basic Authentication is a JavaScript code sample from Auth0 that demonstrates implementing user authentication in a React Single-Page Application (SPA) built with React Router 6.
What is this code sample?
React Basic Authentication is a starter code sample from the Auth0 Developer Resources that shows how to add authentication to a React SPA using the Auth0 React SDK and React Router 6. As input, it takes an Auth0 tenant configuration (domain, client ID, and callback URLs); as output, it produces a working React application with login, logout, and route protection. The sample runs on the React JavaScript framework and is maintained by Auth0 as part of its developer documentation.
Key features
Key features of this code sample include a React Router 6 SPA with guarded routes, Auth0 React SDK integration, a structure designed to pair with an API server, and public availability on GitHub with 78 stars.
- React Router 6 SPA — The sample is built on React Router 6, the current version of React's routing library, to handle navigation and route rendering.
- Route guards — It demonstrates creating route guards that redirect unauthenticated users to a login page or block access to protected components.
- Auth0 React SDK integration — Uses the Auth0 React SDK to manage the authentication flow, including login, logout, and user session state.
- Backend-ready structure — The sample can be integrated with an API server of your choice to form a full-stack code sample, as noted on the Auth0 Developer Resources page.
- Part of Auth0 Developer Resources — The page includes step-by-step instructions for configuration and running, making it easy to reproduce the setup.
- Open repository — The GitHub repository that hosts the code has 78 stars, indicating some community recognition.
Who should use this code sample?
React developers who want to implement authentication without building it from scratch are the primary audience. The sample is also useful for teams evaluating Auth0 as an identity provider and for developers learning how to integrate Auth0 with React Router 6. Specifically, front-end engineers can use it as a reference for protecting routes; full-stack developers can use it as the front-end half of a secure API integration; and technical leads can evaluate Auth0's developer experience.
Use cases
Here are the concrete scenarios this sample supports:
- React developers: Add login/logout to a new or existing React SPA by copying the sample, plugging in Auth0 credentials, and adapting the route structure.
- Full-stack teams: Pair this SPA with a backend API to create an end-to-end authentication flow, where the API validates access tokens issued by Auth0.
- Startups prototyping: Quickly stand up an authenticated user area for a demo or MVP without building session management, token handling, or login UI from scratch.
How does it work?
After setting up an Auth0 application, you provide your tenant's domain, client ID, and callback URLs to the sample's configuration. The Auth0 React SDK then handles the OAuth 2.0 authorization flow — redirecting users to Auth0's login page and returning them to the app with an access token. React Router 6 route guards check authentication state and redirect unauthenticated visitors away from protected routes.
FAQ
Is this code sample free to use?
Yes, the code sample is publicly available on GitHub as part of Auth0's Developer Resources. You need an Auth0 tenant to provide the domain and client ID required by the sample.
What do I need to run this sample?
You need Node.js and npm or a similar JavaScript package manager to install dependencies, plus an Auth0 account to create an application and obtain your domain, client ID, and callback URLs. The Auth0 Developer Resources page includes step-by-step instructions for configuration and running.
Does it work with React Router 6?
Yes, the sample is specifically built for React Router 6, using its routing APIs and route guard patterns. If you are on an older version of React Router, you would need to adapt the code.
Can I connect it to a backend API?
Yes, the Auth0 Developer Resources page explains how to integrate this SPA with an API server of your choice to create a full-stack code sample, with Auth0 validating access tokens on the backend.
