Agrega autenticación a tus aplicaciones Nuxt 3 y Vue 3 (Logto)

Logto ofrece SDKs oficiales para varios frameworks y la integración depende del tipo de aplicación: SSR o full stack como Nuxt 3 requieren un SDK con capacidad de servidor para guardar secretos y manejar flujos basados en redirección, mientras que SPAs como Vue 3 usan un SDK cliente y flujos de redirección sin secretos en el servidor. En esta guía práctica implementarás autenticación con Logto en dos entornos: Nuxt 3 SSR usando @logto/nuxt y Vue 3 SPA usando @logto/vue. Antes de empezar crea una aplicación en la consola de Logto: para Nuxt 3 selecciona Traditional Web, para Vue 3 selecciona Single Page Application. Necesitarás estos valores para ambos: endpoint de tu tenant, app id y app secret.

Parte 1 Nuxt 3 SSR con @logto/nuxt. Nuxt suele desplegarse con SSR o render híbrido. El SDK de Nuxt está diseñado para SSR y usa cookies seguras y manejo en servidor para completar la autenticación.

Paso 1 Instalar SDK en el proyecto ejecuta npm i @logto/nuxt o pnpm add @logto/nuxt o yarn add @logto/nuxt.

Paso 2 Variables de entorno crea un archivo .env con variables como NUXT_LOGTO_ENDPOINT=https://your-tenant.logto.app NUXT_LOGTO_APP_ID=your-app-id NUXT_LOGTO_APP_SECRET=your-app-secret NUXT_LOGTO_COOKIE_ENCRYPTION_KEY=a-strong-random-string. Atención la variable NUXT_LOGTO_COOKIE_ENCRYPTION_KEY debe ser una cadena aleatoria y segura ya que protege las cookies cifradas de autenticación.

Paso 3 Configura nuxt.config.ts añade el módulo @logto/nuxt y pasa en runtimeConfig los valores endpoint appId appSecret y cookieEncryptionKey desde las variables de entorno.

Paso 4 Configura Redirect URIs en la consola de Logto asumiendo que tu app corre en https://localhost:3000 los URIs típicos son https://localhost:3000/callback y post sign out https://localhost:3000/ asegúrate de que coincidan con los usados por el SDK.

Paso 5 Rutas integradas El módulo de Nuxt provee rutas listas para el flujo auth: /sign-in /sign-out /callback. Puedes personalizarlas en nuxt.config.ts con las opciones pathnames si necesitas rutas como /login o /auth/callback y en ese caso actualiza los redirect URIs en la consola de Logto.

Paso 6 Botón simple para iniciar o cerrar sesión en pages/index.vue usa la composición useLogtoUser que es reactiva y muestra el estado del usuario. Ejemplo de uso: const user = useLogtoUser y en la plantilla un NuxtLink hacia /sign-in o /sign-out según user.

Paso 7 Solicitar scopes adicionales por defecto obtienes las claims OIDC básicas si necesitas email o phone añade scopes en la configuración del módulo exportando UserScope.Email UserScope.Phone.

Paso 8 Uso del cliente de Logto en servidor useLogtoClient es server only y en cliente devuelve undefined. Un patrón común es obtener user info en el servidor una vez mediante callOnce y almacenarlo en un estado compartido para evitar llamadas repetidas.

Parte 2 Vue 3 SPA con @logto/vue. Las SPAs no tienen runtime servidor seguro para secretos por eso se recomienda usar la configuración SPA en la consola de Logto y el SDK de Vue.

Paso 1 Instalar SDK en el proyecto ejecuta npm i @logto/vue o pnpm add @logto/vue o yarn add @logto/vue.

Paso 2 Configura Redirect URIs en la consola de Logto asumiendo desarrollo en https://localhost:5173 usa https://localhost:5173/callback y post sign out https://localhost:5173/.

Paso 3 Inicializa Logto en main.ts importa createLogto desde @logto/vue y monta el plugin en la app pasando endpoint y appId desde variables de entorno VITE_LOGTO_ENDPOINT=https://your-tenant.logto.app y VITE_LOGTO_APP_ID=your-app-id luego monta el router.

Paso 4 Añade una ruta callback en Vue Router por ejemplo path /callback que renderice una página Callback.vue donde al montarse se llama a handleSignInCallback pasando window.location.href y luego se redirige a la ruta principal.

Paso 5 Botones de Sign in y Sign out en tu Home usa useLogto que expone isAuthenticated signIn signOut getIdTokenClaims y pasa las URIs de redirección desde las variables VITE_LOGTO_REDIRECT_URI=https://localhost:5173/callback y VITE_LOGTO_POST_SIGN_OUT_REDIRECT_URI=https://localhost:5173/. Para mostrar el usuario usa getIdTokenClaims y muestra las claims cuando isAuthenticated es true.

Cómo elegir entre Nuxt y Vue Si tu app necesita SSR o render híbrido y manejo seguro de secretos escoge @logto/nuxt para aprovechar cookies seguras y lógica server side. Si tu app es una SPA sin runtime servidor escoge @logto/vue y configura la app como SPA en la consola de Logto.

Comprobación rápida Al pulsar Sign in deberías ser redirigido a la pantalla de Logto, después de autenticar volver a la ruta callback y terminar en la app. Al pulsar Sign out se debe limpiar la sesión y volver a la URL post sign out.

Próximos pasos típicos proteger rutas usando middleware en Nuxt o guards en Vue llamar a tus APIs con access tokens y añadir organización roles y permisos si tu producto lo necesita.

En Q2BSTUDIO somos especialistas en desarrollo de software a medida y aplicaciones a medida, con experiencia en inteligencia artificial y ciberseguridad para empresas. Si necesitas ayuda para integrar autenticación segura en tus proyectos Nuxt 3 o Vue 3 podemos acompañarte desde la consultoría hasta la implementación completa y despliegue en la nube. Conoce nuestros servicios de desarrollo de aplicaciones a medida en desarrollo de aplicaciones y software multicanal y si necesitas soporte en infraestructura gestionada ofrecemos soluciones cloud en servicios cloud AWS y Azure. Además ofrecemos servicios de ciberseguridad pentesting, proyectos de inteligencia artificial e IA para empresas, agentes IA y soluciones de inteligencia de negocio como Power BI para mejorar la toma de decisiones.

Palabras clave integradas aplicaciones a medida software a medida inteligencia artificial ciberseguridad servicios cloud aws y azure servicios inteligencia de negocio ia para empresas agentes IA power bi.

Si prefieres que en Q2BSTUDIO nos encarguemos de la integración completa contáctanos y te entregamos una solución segura, escalable y lista para producción adaptada a tu arquitectura y necesidades.