skills.rest
dev-khoi
dev-khoiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

auth0-react

Integrate Auth0 authentication into React single-page applications using the @auth0/auth0-react SDK.

Updated Apr 29, 2026
Search Tags:#authentication#react#oauth#spa#login#mfa#auth0
One-click install
npx skills add https://github.com/dev-khoi/AURA-conHack-2026 --skill auth0-react-dev-khoi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auth0-react
Source: https://github.com/dev-khoi/AURA-conHack-2026/tree/main/.opencode/skills/auth0-react
Command: npx skills add https://github.com/dev-khoi/AURA-conHack-2026 --skill auth0-react-dev-khoi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @auth0/auth0-react, and includes references (resource) components.

What problem does it solve? Adding login, logout, session management, and protected routes to a React SPA requires correctly configuring the Auth0 SDK, environment variables, redirect URLs, and token handling, which is error-prone when done manually. ## Core Features & Use Cases - SDK Integration: Install and configure @auth0/auth0-react with Auth0Provider, useAuth0 hooks, and login/logout UI for Vite or Create React App projects. - Protected Routes & API Calls: Implement route guards, attach access tokens to API requests, and handle loading and error states. - MFA Support: Handle in-app Multi-Factor Authentication flows including enrollment, challenge, and verification via the SDK's mfa API. - Use Case: You are building a React dashboard with Vite and need users to sign in before viewing their profile. This Skill walks you through installing the SDK, configuring Auth0 credentials, wrapping the app in Auth0Provider, and protecting routes. ## Quick Start Add Auth0 login and logout to my React app using the auth0-react skill, including a protected profile page.

Frequently Asked Questions about auth0-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Auth0 authentication to a React app?▼

Install @auth0/auth0-react, set your Auth0 domain and client ID as environment variables, and wrap your app in Auth0Provider. Then use the useAuth0 hook to access loginWithRedirect, logout, isAuthenticated, and user profile data.

How do I protect routes in React with Auth0?▼

Create a ProtectedRoute component that checks isAuthenticated and isLoading from useAuth0, redirecting unauthenticated users to login. Wrap protected route elements with this component when using React Router.

Does @auth0/auth0-react work with Next.js or React Native?▼

No, this SDK is only for React single-page applications built with Vite or Create React App. Use the auth0-nextjs SDK for Next.js and auth0-react-native for mobile apps instead.

Why are my Auth0 environment variables not loading in Vite?▼

Vite requires environment variables to be prefixed with VITE_ and accessed via import.meta.env, while Create React App uses the REACT_APP_ prefix with process.env. Restart the dev server after creating or editing the .env file.

How do I call a protected API with an Auth0 access token in React?▼

Call getAccessTokenSilently from useAuth0 with your API audience, then include the returned token as a Bearer token in the Authorization header. Configure the audience in Auth0Provider's authorizationParams so tokens are issued for your API.

How do I handle MFA in a React app without redirecting to Universal Login?▼

Catch MfaRequiredError from getAccessTokenSilently and use the mfa property from useAuth0 to enroll authenticators, send challenges, and verify codes in-app. Alternatively, set interactiveErrorHandler to popup with refresh tokens enabled for automatic popup-based MFA.

Related Skills

Explore More Software Engineering Skills→
auth0auth0
40

auth0-flutter-web

Configure Auth0Web with domain and client ID for Flutter web authentication.

Official
Intermediate
ResgridResgrid
224

authentication

Implements JWT bearer authentication and authorization policies for ASP.NET Core APIs.

Official
Advanced
marquesfelipmarquesfelip

jwt-security

Validate JWT algorithms, claims, and refresh token rotation for backend services.

Community
Advanced
NOMARJNOMARJ

auth0-nextjs

Integrate Auth0 authentication into Next.js apps with the @auth0/nextjs-auth0 SDK.

Official
Intermediate