Añadir autenticación Logto a tu aplicación Next.js utilizando Server Actions

Server Actions presenta un enfoque renovado para crear aplicaciones web robustas sin necesidad de APIs REST tradicionales. Hemos discutido esto previamente en nuestro artículo.

Hoy, estamos encantados de anunciar el soporte oficial para Server Actions en nuestro Next.js SDK, a pesar de ser una característica experimental.

Para una vista rápida, revisa este ejemplo y sigue mientras detallamos cómo integrar Logto con Server Actions en esta guía.

Prerrequisitos#

Para comenzar, asegúrate de tener lo siguiente:

• Una instancia de Logto en funcionamiento o acceso a una cuenta de Logto Cloud.
• Un proyecto Next.js con la característica Server Actions habilitada.

Configurar Logto#

Si estás alojando Logto por ti mismo, consulta la documentación de Logto "Get started" para configurar tu instancia de Logto.

Abre la Consola de Logto ingresando la URL https://cloud.logto.io/ si estás usando Logto Cloud, o el endpoint que has configurado para autohospedaje.

Luego, navega a la pestaña "Aplicaciones" y haz clic en "Crear aplicación".

En el modal que aparece, elige "Next.js (App Router)" y proporciona un nombre para la aplicación, como "Next.js App". Luego haz clic en "Crear aplicación".

Serás dirigido a una página de tutorial en Logto. Haz clic en "Terminar y listo" para proceder a la página de detalles de la aplicación.

En la sección "URIs de redirección", ingresa el siguiente valor:

Por ejemplo, si estás alojando Next.js en http://localhost:3000, el valor debe ser:

Haz clic en el botón "Guardar cambios" en la parte inferior. Una vez exitoso, mantén esta página abierta ya que será útil para la configuración de Next.js.

Configurar la aplicación Next.js#

Asegúrate de tener un proyecto con la última versión de Next.js. Si aún no tienes uno, puedes seguir la guía de instalación oficial para crear uno.

Al momento de escribir esta guía, la característica es experimental y requiere activación en el next.config.js

Definir la librería Logto#

Comienza instalando el módulo @logto/next usando npm de la siguiente manera:

También puedes usar yarn o pnpm.

Luego vamos a crear algunas funciones como "server actions”, crea el nuevo archivo libraries/logto.ts:

En este archivo, exportamos cuatro funciones para fines de autenticación. Nota que la primera línea, "use server" indica que el código en el archivo solo puede ejecutarse en el lado del servidor. Usamos "next/headers" para gestionar sesiones basadas en cookies.

• Referencia para "use server": https://react.dev/reference/react/use-server
• Referencia para usar "next/headers" para gestionar cookies: https://nextjs.org/docs/api-reference/next/headers

Las funciones que exportamos arriba pueden ser llamadas directamente desde el componente React del lado del cliente. Esa es la principal ventaja de usar Server Actions. Vamos al siguiente capítulo para ver cómo usar estas funciones.

Implementar botones de inicio y cierre de sesión#

Con las funciones de autenticación en su lugar, construyamos la página. Crearemos dos componentes del cliente para iniciar las acciones de inicio y cierre de sesión.

Sign in#

/app/sign-in.tsx:

Aquí importamos la función signIn que acabamos de definir en el capítulo anterior. Aunque el código se ejecuta en el lado del servidor, esta función aún puede ser invocada directamente por el componente <button> cuando un usuario hace clic en el botón de inicio de sesión. Al hacer esto, eliminamos la necesidad de escribir cualquier API REST para manejar el proceso de inicio de sesión. De hecho, Next.js maneja los detalles de envío de solicitudes "POST" por nosotros. Al recibir la redirectUrl, podemos llamar a router.push para redirigir a la página de inicio de sesión de Logto.

Sign out#

/app/sign-out.tsx:

El proceso de cierre de sesión es similar al proceso de inicio de sesión.

Preparar una página de callback#

Como un proveedor de identidad estándar OIDC, Logto redirige a los usuarios a una URL de callback después de la autenticación. Por lo tanto, debemos preparar una página de callback para manejar el resultado del inicio de sesión.

/app/callback/page.tsx

Aquí usamos un componente del cliente con useEffect, que facilita mostrar una página de "carga" para una mejor experiencia del usuario.

Mostrar contexto del usuario y seguro página#

Ahora, hagamos una página de inicio mínima para exhibir la utilidad del Logto SDK. Si es necesario, protege cualquier recurso de usuarios desconocidos verificando el valor de isAuthenticated y redirigiendo a la página de inicio de sesión o mostrando mensajes de error.

app/page.tsx

Como puedes observar, este es un componente del servidor que evita la necesidad de useEffect y gestionar cambios complejos de estado.

Conclusión#

Las acciones del servidor ofrecen una forma simplificada y directa de implementar autenticación en comparación con las aplicaciones tradicionales de Next.js que dependen de APIs REST.

El ejemplo completo del código se puede encontrar en este repositorio: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample

¿Por qué no pruebas Logto Cloud y experimentas lo fácil que es en acción?