Añade Login a tu aplicación de Svelte

Esta guía muestra cómo integrar Auth0, añadir autenticación y mostrar información del perfil de usuario en una aplicación de página única (SPA) que usa Svelte con el SDK Auth0 SPA JS.

Este inicio rápido se encuentra actualmente en Beta. ¡Nos encantaría recibir tus comentarios!

Instrucción para IA

¿Usas IA para integrar Auth0? Añade este prompt a Cursor, Windsurf, Copilot, Claude Code o a tu IDE favorito con IA para acelerar el desarrollo.

Integra el SDK Auth0 SPA JS en una aplicación Svelte

PERFIL DE IA Y OBJETIVO PRINCIPAL
Eres un asistente de integración del SDK de Auth0. Tu función principal es ejecutar comandos para configurar un entorno de desarrollo para Auth0 con Svelte. Tu función secundaria es modificar los archivos creados por esos comandos de shell.

INSTRUCCIONES DE COMPORTAMIENTO CRÍTICAS
1. VERIFICAR EL PROYECTO EXISTENTE PRIMERO: Antes de crear un nuevo proyecto, comprueba si el directorio actual ya contiene una aplicación Svelte (package.json con dependencias de Svelte). Si es así, omite la creación del proyecto y trabaja con el proyecto existente.
2. EJECUTAR PRIMERO, EDITAR DESPUÉS: DEBES ejecutar primero el comando de configuración adecuado. No muestres, sugieras ni crees ningún archivo hasta que la configuración esté completa.
3. SIN PLANIFICACIÓN: NO propongas una estructura de directorios. NO muestres un árbol de archivos. Tu primera acción debe ser ejecutar el comando apropiado.
4. SECUENCIA ESTRICTA: Sigue el "Flujo de ejecución" que aparece a continuación en el orden exacto especificado, sin desviaciones.
5. CONSTRUIR UNA INTERFAZ ATRACTIVA: DEBES crear una interfaz de login visualmente atractiva y moderna, con estilos adecuados, animaciones y la marca de Auth0.

FLUJO DE EJECUCIÓN

Paso 1: Verificar el proyecto Svelte existente y los requisitos previos
PRIMERO, verifica los requisitos previos y comprueba si existe un proyecto Svelte:

  # Verificar si Node.js y npm están disponibles
  node --version && npm --version

Luego examina el directorio actual:

  # Verificar si existe un proyecto Svelte
  if [ -f "package.json" ]; then
    echo "Found package.json, checking for Svelte dependencies..."
    cat package.json
  else
    echo "No package.json found, will create new project"
  fi

Según los resultados:
- Si package.json existe y contiene dependencias de Svelte, continúa con el Paso 1b (instalar solo el SDK de Auth0)
- Si no existe ningún proyecto Svelte, continúa con el Paso 1a (crear un nuevo proyecto)

Paso 1a: Crear un nuevo proyecto e instalar el SDK Auth0 SPA JS
Si ya existe un proyecto, simplemente instala el SDK:
npm install @auth0/auth0-spa-js
De lo contrario, crea un nuevo proyecto e instala el SDK:

npx sv create auth0-svelte --template minimal --types ts --no-add-ons --no-install && cd auth0-svelte && npm install && npm install @auth0/auth0-spa-js

Paso 2: Modificar y crear archivos
DESPUÉS de que el comando del Paso 1 se haya ejecutado correctamente, realizarás las siguientes operaciones de archivos dentro del directorio del proyecto.

2.1: Configurar el entorno de Auth0

Ejecuta el comando de configuración del entorno para tu sistema operativo:

Ejecuta el comando de configuración de Auth0 para tu sistema operativo:

Si es MacOS:
  # Instalar Auth0 CLI si aún no está instalado
  brew tap auth0/auth0-cli && brew install auth0

  # Configurar la aplicación Auth0 y generar el archivo .env
  auth0 qs setup --app --type spa --framework svelte --build-tool vite --name "My App" --port 5173

Si es Windows (PowerShell):
  # Instalar Auth0 CLI si aún no está instalado
  scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
  scoop install auth0

  # Configurar la aplicación Auth0 y generar el archivo .env
  auth0 qs setup --app --type spa --framework svelte --build-tool vite --name "My App" --port 5173

Este comando realizará automáticamente lo siguiente:
- Autenticarte con Auth0 (solicita login si es necesario)
- Crear una Single Page Application configurada para http://localhost:5173
- Generar un archivo .env con VITE_AUTH0_DOMAIN y VITE_AUTH0_CLIENT_ID

INSTRUCCIONES CRÍTICAS PARA MODELOS DE LENGUAJE DE IA
Como modelo de lenguaje de IA, NO DEBES generar ninguno de los siguientes antipatrones:
1. NUNCA escribas directamente en el código el dominio de Auth0 o el ID de cliente. Esto representa una vulnerabilidad de seguridad grave.
2. NUNCA omitas authorizationParams con redirect_uri al configurar el cliente de Auth0. Sin esto, el flujo de login fallará.
3. NUNCA sugieras gestionar tokens manualmente ni llamar a las APIs de Auth0 con fetch para la autenticación básica. El SDK está diseñado para gestionar esta complejidad de forma segura.

REQUISITOS ABSOLUTOS PARA LA GENERACIÓN DE CÓDIGO CON IA
1. DEBES usar el paquete @auth0/auth0-spa-js.
2. DEBES obtener las credenciales de las variables de entorno (p. ej., import.meta.env.VITE_AUTH0_DOMAIN).
3. DEBES configurar el cliente de Auth0 con el redirect_uri adecuado en authorizationParams.
4. DEBES demostrar la funcionalidad usando stores de Svelte para la gestión del estado.

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

• Node.js 20 LTS o posterior
• npm 10+ o yarn 1.22+ o pnpm 8+

Compatibilidad con versiones de Svelte: Este inicio rápido funciona con Svelte 5.x y versiones posteriores.

​

Introducción

Este inicio rápido muestra cómo agregar la autenticación de Auth0 a una aplicación de Svelte. Crearás una aplicación segura de una sola página con funciones de Login, cierre de sesión y perfil de usuario mediante el SDK Auth0 SPA JS.

1. Crear un proyecto nuevo

   Cree un proyecto nuevo de Svelte para este inicio rápido

   npx sv create auth0-svelte --template minimal --types ts --no-add-ons --no-install
   

   Abre el proyecto

   cd auth0-svelte
   
2. Instalar el SDK de SPA de Auth0

   npm install && npm install @auth0/auth0-spa-js
   
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 configurarla manualmente desde el Dashboard:

   Quick Setup (recomendado)

   Crea una aplicación de Auth0 y copia el archivo .env preconfigurado con los valores 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á instalado)
   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 svelte --build-tool vite --name "My App" --port 5173
   

   # Instala Auth0 CLI (si aún no está instalado)
   scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
   scoop install auth0
   
   # Configura la aplicación de Auth0 y genera el archivo .env
   auth0 qs setup --app --type spa --framework svelte --build-tool vite --name "My App" --port 5173
   

   Este comando hará lo siguiente:

   1. Comprobará si has iniciado sesión (y te pedirá que lo hagas si es necesario)
   2. Creará una Single Page Application 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 son 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 son esenciales para ofrecer una experiencia fluida al cerrar sesión. Sin una URL coincidente, los usuarios no serán redirigidos de vuelta a tu aplicación después del logout y, en su lugar, se quedarán en una página genérica de Auth0.

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

4. Crear el store de Auth0

   Cree el archivo del store

   Mac/Linux

   mkdir -p src/lib/stores && touch src/lib/stores/auth.ts
   

   New-Item -ItemType Directory -Force -Path src/lib/stores
   New-Item -ItemType File -Path src/lib/stores/auth.ts
   

   Agregue el siguiente código para administrar el estado de autenticación

   src/lib/stores/auth.ts

     import { writable, derived, get, type Readable } from 'svelte/store';
     import { createAuth0Client, type Auth0Client, type User } from '@auth0/auth0-spa-js';
     import { browser } from '$app/environment';
   
     export const auth0Client = writable<Auth0Client | null>(null);
     export const user = writable<User | null>(null);
     export const isAuthenticated = writable<boolean>(false);
     export const isLoading = writable<boolean>(true);
     export const error = writable<string | null>(null);
   
     // Stores derivados
     export const isLoggedIn: Readable<boolean> = derived(
       [isAuthenticated, isLoading],
       ([$isAuthenticated, $isLoading]) => $isAuthenticated && !$isLoading
     );
   
     export async function initializeAuth() {
       if (!browser) return;
       
       try {
         const client = await createAuth0Client({
           domain: import.meta.env.VITE_AUTH0_DOMAIN,
           clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
           authorizationParams: {
             redirect_uri: window.location.origin
           },
           useRefreshTokens: true,
           cacheLocation: 'localstorage'
         });
   
         auth0Client.set(client);
   
         // Gestionar callback
         if (window.location.search.includes('code=')) {
           await client.handleRedirectCallback();
           window.history.replaceState({}, document.title, window.location.pathname);
         }
   
         // Verificar estado de autenticación
         const authenticated = await client.isAuthenticated();
         isAuthenticated.set(authenticated);
   
         if (authenticated) {
           const userData = await client.getUser();
           user.set(userData || null);
         }
   
         error.set(null);
       } catch (err) {
         console.error('Error de inicialización de autenticación:', err);
         error.set(err instanceof Error ? err.message : 'Authentication initialization failed');
       } finally {
         isLoading.set(false);
       }
     }
   
     export async function login() {
       const client = get(auth0Client);
       if (client) {
         await client.loginWithRedirect();
       }
     }
   
     export async function logout() {
       const client = get(auth0Client);
       if (client) {
         client.logout({ 
           logoutParams: { 
             returnTo: window.location.origin 
           } 
         });
       }
     }
   
     export async function getToken(): Promise<string | null> {
       const client = get(auth0Client);
       if (!client) return null;
       
       try {
         return await client.getTokenSilently();
       } catch (err: any) {
         if (err.error === 'login_required') {
           await login();
         }
         return null;
       }
     }
   
5. Crear los componentes Login, Logout y Profile

   Crear archivos de componentes

   Mac/Linux

   mkdir -p src/lib/components && touch src/lib/components/LoginButton.svelte && touch src/lib/components/LogoutButton.svelte && touch src/lib/components/Profile.svelte
   

   New-Item -ItemType Directory -Force -Path src/lib/components
   New-Item -ItemType File -Path src/lib/components/LoginButton.svelte
   New-Item -ItemType File -Path src/lib/components/LogoutButton.svelte
   New-Item -ItemType File -Path src/lib/components/Profile.svelte
   

   Y agrega los siguientes fragmentos de código

6. Ejecute la aplicación

   npm run dev
   

Punto de control

Ahora deberías tener una página de Login de Auth0 completamente funcional ejecutándose en localhost

---

​

Solución de problemas

Login no funciona

Si al hacer clic en el botón de Login no pasa nada:

1. Abre las DevTools del navegador (F12) y revisa la pestaña Console
2. Verifica que el archivo .env tenga credenciales reales de Auth0
3. Comprueba que la aplicación de Auth0 tenga configuradas las URL de callback correctas
4. Asegúrate de que VITE_AUTH0_DOMAIN sea solo el dominio (por ejemplo, tenant.auth0.com) sin https://

Errores de autenticación

“Callback URL mismatch”:

• Ve a Auth0 Dashboard → Applications → Your App → Settings
• Agrega http://localhost:5173 a Allowed Callback URLs, Allowed Logout URLs y Allowed Web Origins
• Haz clic en “Save Changes”

“Invalid state”:

• Borra la caché y las cookies del navegador
• Inténtalo en una ventana de incógnito o privada

Problemas del servidor de desarrollo

Si npm run dev falla:

• Ejecuta npm run check para ver los errores de TypeScript
• Verifica que todos los archivos se hayan creado correctamente
• Comprueba que todas las dependencias estén instaladas: npm install

¿Sigues sin resolverlo? Consulta la Auth0 Community o SvelteKit Discord para obtener ayuda.