Agrega el inicio de sesión a tu aplicación React

Esta guía muestra cómo integrar Auth0, agregar autenticación y mostrar la información del perfil del usuario en una aplicación de página única (SPA) que usa React, mediante el SDK de Auth0 para React.

Usa IA para integrar Auth0

Si usas un asistente de programación con IA como Claude Code, Cursor o GitHub Copilot, puedes añadir la autenticación de Auth0 automáticamente en minutos con agent skills.

Instalar:

npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-react

Luego, pídele a tu asistente de IA:

Add Auth0 authentication to my React app

Tu asistente de IA creará automáticamente tu aplicación de Auth0, obtendrá las credenciales, instalará @auth0/auth0-react, configurará el Auth0Provider y creará todos los componentes necesarios. Documentación completa de agent skills →

Requisitos previos: Antes de empezar, asegúrate de tener instalado lo siguiente:

• Node.js 20 LTS o una versión posterior
• npm 10+ o yarn 1.22+ o pnpm 8+

Verifica la instalación: node --version && npm --version

Compatibilidad de versiones de React: Este inicio rápido funciona con React 18.x y versiones posteriores.

​

Introducción

Este inicio rápido muestra cómo añadir la autenticación de Auth0 a una aplicación de React. Crearás una aplicación segura de una sola página con funciones de inicio de sesión, cierre de sesión y perfil de usuario mediante el SDK de Auth0 para React.

1. Crear un proyecto

   Crea un nuevo proyecto de React para este inicio rápido

   npm create vite@latest auth0-react -- --template react-ts
   

   Abra el proyecto

   cd auth0-react
   
2. Instala el SDK de React para Auth0

   npm add @auth0/auth0-react && npm install
   
3. Configura tu aplicación de Auth0

   A continuación, debes crear una nueva aplicación en tu inquilino de Auth0 y añadir las variables de entorno a tu proyecto.

   Tienes tres opciones para configurar tu aplicación de Auth0: usar la herramienta Quick Setup (recomendado), ejecutar un comando de la CLI o hacerlo manualmente desde el Dashboard:

   Quick Setup (recomendado)

   Crea una aplicación de Auth0 y copia el archivo .env precompletado con los valores de configuración correctos.

   CLI

   Ejecuta el siguiente comando en el directorio raíz de tu proyecto para crear una aplicación de Auth0 y generar un archivo .env:

   Mac

   # Instala Auth0 CLI (si aún no está instalada)
   brew tap auth0/auth0-cli && brew install auth0
   
   # Configura la aplicación de Auth0 y genera el archivo .env
   auth0 qs setup --app --type spa --framework react --build-tool vite --name "My App" --port 5173
   

   Este comando hará lo siguiente:

   1. Comprobará si ya has iniciado sesión (y te pedirá que la inicies si es necesario)
   2. Creará una aplicación de página única de Auth0 configurada para http://localhost:5173
   3. Generará un archivo .env con VITE_AUTH0_DOMAIN y VITE_AUTH0_CLIENT_ID

   Dashboard

   Antes de empezar, crea un archivo .env en el directorio raíz de tu proyecto

   .env

   VITE_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN
   VITE_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID
   

   1. Ve al Auth0 Dashboard
   2. Haz clic en Applications > Applications > Create Application
   3. En la ventana emergente, introduce un nombre para tu aplicación, selecciona Single Page Web Application como tipo de aplicación y haz clic en Create
   4. Ve a la pestaña Settings en la página Application Details
   5. Sustituye YOUR_AUTH0_APP_DOMAIN y YOUR_AUTH0_APP_CLIENT_ID en el archivo .env por los valores de Domain y Client ID del dashboard

   Por último, en la pestaña Settings de la página Application Details, configura las siguientes URL:

   Allowed Callback URLs:

   http://localhost:5173
   

   Allowed Logout URLs:

   http://localhost:5173
   

   Allowed Web Origins:

   http://localhost:5173
   

   Allowed Callback URLs es una medida de seguridad fundamental para garantizar que los usuarios vuelvan de forma segura a tu aplicación después de autenticarse. Sin una URL coincidente, el proceso de inicio de sesión fallará y los usuarios verán una página de error de Auth0 en lugar de acceder a tu aplicación.

   Allowed Logout URLs es esencial para ofrecer una experiencia fluida al cerrar sesión. Sin una URL coincidente, los usuarios no volverán a ser redirigidos a tu aplicación después de cerrar sesión y se quedarán en una página genérica de Auth0.

   Allowed Web Origins es fundamental para la autenticación silenciosa. Sin ello, los usuarios cerrarán sesión al actualizar la página o al volver más tarde a tu aplicación.

   Verifica que exista tu archivo .env: cat .env (Mac/Linux) o type .env (Windows)

4. Añadir el proveedor

   src/main.tsx

   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import './index.css'; // Importación del archivo CSS principal
   import App from './App.tsx';
   import { Auth0Provider } from '@auth0/auth0-react';
   
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <Auth0Provider
         domain={import.meta.env.VITE_AUTH0_DOMAIN}
         clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
         authorizationParams={{
           redirect_uri: window.location.origin
         }}
       >
         <App />
       </Auth0Provider>
     </StrictMode>
   );
   

5. Crear componentes de inicio de sesión, cierre de sesión y perfil

   Crear archivos

   Mac/Linux

   touch src/LoginButton.tsx && touch src/LogoutButton.tsx && touch src/Profile.tsx
   

   Y agrega los siguientes fragmentos de código

6. Inicia tu aplicación

   npm run dev
   

   Si el puerto 5173 está en uso, ejecuta: npm run dev -- --port 5174 y actualiza las URL de devolución de llamada de tu aplicación de Auth0 a http://localhost:5174

Punto de control

Ahora deberías tener una página de inicio de sesión de Auth0 totalmente funcional ejecutándose en tu localhost

---

​

Uso avanzado

Protección de rutas con React Router

Usa el estado de autenticación de Auth0 para proteger rutas concretas de tu aplicación:

src/App.jsx

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';
import Profile from './components/Profile';
import Dashboard from './components/Dashboard';
import LoginButton from './components/LoginButton';

function ProtectedRoute({ children }) {
  const { isAuthenticated, isLoading } = useAuth0();
  
  if (isLoading) return <div>Loading...</div>;
  
  return isAuthenticated ? children : <Navigate to="/" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginButton />} />
        <Route 
          path="/profile" 
          element={
            <ProtectedRoute>
              <Profile />
            </ProtectedRoute>
          } 
        />
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

Llamadas a APIs protegidas

Configura tu Auth0Provider para incluir una audiencia de API y usar el método getAccessTokenSilently:

src/main.jsx

import { Auth0Provider } from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <Auth0Provider
    domain={import.meta.env.VITE_AUTH0_DOMAIN}
    clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
    authorizationParams={{
      redirect_uri: window.location.origin,
      audience: "YOUR_API_IDENTIFIER"
    }}
  >
    <App />
  </Auth0Provider>
);

Luego, realiza llamadas autenticadas a la API:

src/components/ApiCall.jsx

import { useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function ApiCall() {
  const { getAccessTokenSilently } = useAuth0();
  const [apiResponse, setApiResponse] = useState(null);

  const callProtectedApi = async () => {
    try {
      const token = await getAccessTokenSilently();
      
      const response = await fetch('/api/protected', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      
      const data = await response.json();
      setApiResponse(data);
    } catch (error) {
      console.error('API call failed:', error);
    }
  };

  return (
    <div>
      <button onClick={callProtectedApi}>Call API</button>
      {apiResponse && <pre>{JSON.stringify(apiResponse, null, 2)}</pre>}
    </div>
  );
}

export default ApiCall;

Uso de Auth0 con hooks personalizados

Crea hooks personalizados reutilizables para patrones de autenticación comunes:

src/hooks/useAuthenticatedUser.js

import { useAuth0 } from '@auth0/auth0-react';
import { useEffect, useState } from 'react';

export function useAuthenticatedUser() {
  const { user, isAuthenticated, isLoading, getAccessTokenSilently } = useAuth0();
  const [accessToken, setAccessToken] = useState(null);

  useEffect(() => {
    if (isAuthenticated && !isLoading) {
      getAccessTokenSilently()
        .then(token => setAccessToken(token))
        .catch(console.error);
    }
  }, [isAuthenticated, isLoading, getAccessTokenSilently]);

  return {
    user,
    accessToken,
    isAuthenticated,
    isLoading
  };
}

Uso en componentes:

src/components/UserDashboard.jsx

import { useAuthenticatedUser } from '../hooks/useAuthenticatedUser';

function UserDashboard() {
  const { user, accessToken, isLoading } = useAuthenticatedUser();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Welcome, {user?.name}</h1>
      <p>Access Token: {accessToken ? 'Available' : 'Not available'}</p>
    </div>
  );
}