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

Esta guía muestra cómo integrar Auth0, agregar autenticación y mostrar información del perfil del usuario en cualquier aplicación de Vue mediante el SDK de Auth0 para Vue.

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.

Instala:

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

Luego, pídele a tu asistente de IA:

Add Auth0 authentication to my Vue app

Tu asistente de IA creará automáticamente tu aplicación de Auth0, recuperará las credenciales, instalará @auth0/auth0-vue, creará el plugin de autenticación y configurará tus rutas. Documentación completa sobre agent skills →

Requisitos previos: Antes de comenzar, asegúrate de tener instalados los siguientes elementos:

• 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 Vue: Esta guía de inicio rápido funciona con Vue 3.x y versiones posteriores.

​

Primeros pasos

En esta guía de inicio rápido se muestra cómo integrar la autenticación de Auth0 en una aplicación de Vue.js 3. Crearás una aplicación de página única adaptable con autenticación segura de usuario mediante la API de composición de Vue y el SDK de Auth0 para Vue.

1. Crear un nuevo proyecto

   Crea un nuevo proyecto de Vue 3 para esta guía de inicio rápido

   npm create vue@latest auth0-vue -- --typescript --router --pinia
   

   Abre el proyecto

   cd auth0-vue
   
2. Instala el SDK de Auth0 para Vue

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

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

   Tienes tres opciones para configurar tu aplicación de Auth0: usar la herramienta de configuración rápida (recomendado), ejecutar un comando de la CLI o configurarla manualmente desde el Dashboard:

   Configuración rápida (recomendado)

   Crea una aplicación de Auth0 y copia el archivo .env rellenado previamente 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á 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 vue --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 vue --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 web de una sola página 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. Reemplaza 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 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 esta configuración, los usuarios cerrarán sesión al actualizar la página o al volver más tarde a tu aplicación.

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

4. Configura el plugin de Auth0

   src/main.ts

   import './assets/main.css'
   
   import { createApp } from 'vue'
   import { createPinia } from 'pinia'
   import router from './router'
   import { createAuth0 } from '@auth0/auth0-vue'
   
   import App from './App.vue'
   
   const app = createApp(App)
   
   app.use(createAuth0({
     domain: import.meta.env.VITE_AUTH0_DOMAIN,
     clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
     authorizationParams: {
       redirect_uri: window.location.origin
     }
   }))
   
   app.use(createPinia())
   app.use(router)
   
   app.mount('#app')
   

5. Crear componentes de autenticación

   Crear archivos de componentes

   Mac/Linux

   touch src/components/LoginButton.vue && touch src/components/LogoutButton.vue && touch src/components/UserProfile.vue
   

   New-Item -ItemType File -Path src/components/LoginButton.vue
   New-Item -ItemType File -Path src/components/LogoutButton.vue
   New-Item -ItemType File -Path src/components/UserProfile.vue
   

   Y agrega los siguientes fragmentos de código

6. Ejecuta la 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 completamente funcional ejecutándose en tu localhost

---

​

Uso avanzado

Protección de rutas con Vue Router

Usa las guardas de navegación de Vue Router para proteger rutas específicas:

src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { authGuard } from '@auth0/auth0-vue'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'
import Dashboard from '../views/Dashboard.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    beforeEnter: authGuard
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    beforeEnter: authGuard
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Llamadas a APIs protegidas

Configura tu plugin de Auth0 para incluir la audiencia de una API y realizar solicitudes autenticadas:

src/main.ts

import { createAuth0 } from '@auth0/auth0-vue'

const app = createApp(App)

app.use(
  createAuth0({
    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"
    }
  })
)

Luego, realiza llamadas autenticadas a la API en tus componentes:

src/components/ApiCall.vue

<template>
  <div>
    <button @click="callProtectedApi" :disabled="isLoading">
      Llamar a la API protegida
    </button>
    <pre v-if="apiResponse">{{ JSON.stringify(apiResponse, null, 2) }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAuth0 } from '@auth0/auth0-vue'

const { getAccessTokenSilently } = useAuth0()
const apiResponse = ref(null)
const isLoading = ref(false)

const callProtectedApi = async () => {
  try {
    isLoading.value = true
    const token = await getAccessTokenSilently()
    
    const response = await fetch('/api/protected', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    
    apiResponse.value = await response.json()
  } catch (error) {
    console.error('La llamada a la API falló:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

Uso de composables para la lógica de autenticación

Crea composables reutilizables para patrones de autenticación comunes:

src/composables/useAuthenticatedUser.ts

import { computed, ref, watchEffect } from 'vue'
import { useAuth0 } from '@auth0/auth0-vue'

export function useAuthenticatedUser() {
  const { user, isAuthenticated, isLoading, getAccessTokenSilently } = useAuth0()
  const accessToken = ref<string | null>(null)

  watchEffect(async () => {
    if (isAuthenticated.value && !isLoading.value) {
      try {
        accessToken.value = await getAccessTokenSilently()
      } catch (error) {
        console.error('No se pudo obtener el token de acceso:', error)
      }
    }
  })

  return {
    user: computed(() => user.value),
    accessToken: computed(() => accessToken.value),
    isAuthenticated: computed(() => isAuthenticated.value),
    isLoading: computed(() => isLoading.value)
  }
}

Uso en componentes:

src/components/UserDashboard.vue

<template>
  <div v-if="!isLoading">
    <h1>Te damos la bienvenida, {{ user?.name }}</h1>
    <p>Token de acceso: {{ accessToken ? 'Disponible' : 'No disponible' }}</p>
  </div>
  <div v-else>Cargando...</div>
</template>

<script setup lang="ts">
import { useAuthenticatedUser } from '../composables/useAuthenticatedUser'

const { user, accessToken, isLoading } = useAuthenticatedUser()
</script>