Por qué podrías ver un 404 al iniciar sesión en tu app integrada con Logto

Antecedentes#

¿Alguna vez has intentado iniciar sesión en una aplicación que usa Logto para la autenticación y te apareció un error de "404 no encontrado"? ¿Alguno de tus usuarios finales ha reportado el mismo problema?

Esto puede suceder cuando accedes directamente a la página de inicio de sesión (por ejemplo, https://tu-app.com/sign-in) sin pasar por el flujo de inicio de sesión previsto desde tu aplicación.

Aquí está el motivo:

La importancia del flujo OIDC#

Logto depende del protocolo OpenID Connect (OIDC) para una autenticación segura. Cuando te conectas a través del flujo normal de la aplicación (por lo general, haciendo clic en un botón de inicio de sesión desde la app), la aplicación inicia una comunicación con el servidor OIDC de Logto. Esta comunicación, llamada "solicitud de autorización", es importante porque primero realiza varias validaciones contra quien hace la solicitud, y entonces establece una sesión segura entre tu navegador y el servidor (gestionada por las cookies).

El problema surge cuando los usuarios navegan directamente a la página " /sign-in ", ya que esto omite la lógica interna de la aplicación que activa la solicitud de autorización OIDC. Como consecuencia, el servidor no reconoce tu navegador como si tuviera una sesión válida, lo que conduce al error 404.

La solución#

Existen dos maneras principales de evitar este problema:

Usa siempre el botón de inicio de sesión de la app#

En lugar de acceder directamente a la página "/sign-in", sigue el flujo de inicio de sesión diseñado por la aplicación. Cuando haces clic en el botón "Iniciar sesión" dentro de la app, esto inicia la solicitud de autorización OIDC apropiada y establece la sesión necesaria.

Redirecciona automáticamente a los usuarios#

Si solo tienes una aplicación en tu instancia de Logto, puedes intentar implementar una lógica que intercepte automáticamente los intentos de los usuarios de acceder a la página "/sign-in" sin una sesión válida y redirigirlos a tu página principal, donde se muestra el botón de inicio de sesión.

Para manejar esto, Logto introdujo una configuración llamada “URL de redirección de sesión desconocida”. Cuando configuras esta URL, Logto redirigirá automáticamente a los usuarios a la página especificada en lugar de mostrar el error 404. Por ejemplo, puedes redirigirlos a la página de inicio de tu aplicación o a una pantalla de inicio de sesión personalizada. Tras la redirección, tu aplicación cliente debería iniciar un nuevo flujo de inicio de sesión.

Para configurarlo, ve a la consola de Logto en Logto Cloud > Experiencia de inicio de sesión > Registro e inicio de sesión > Opciones avanzadas y pon tu URL de respaldo.

Por ejemplo, Logto Cloud configura esto como https://cloud.logto.io/. Una vez configurado, los usuarios que entren a /sign-in sin una sesión válida serán enviados a esa URL para reiniciar la autenticación.

Reflexiones adicionales sobre la mejora de la experiencia#

Queremos mejorar la experiencia del usuario, al menos añadiendo mensajes útiles en la página "/unknown-session", explicando el motivo del 404 y proporcionando instrucciones sobre qué hacer, en lugar de dejar a los usuarios confundidos. Por ejemplo, Logto permite personalizar el correo electrónico de soporte y la dirección web para las páginas de error de inicio de sesión. Así, los usuarios que encuentren un error verán tus datos de contacto y podrán pedir ayuda.

También podemos considerar implementar otras medidas de seguridad para mitigar el problema, como redirigir automáticamente a la "URI de redirección de cierre de sesión" (normalmente la página principal de la aplicación) cuando se detecta solo una aplicación en la instancia actual de Logto, o añadir configuraciones adicionales para mostrar mensajes personalizados en ese caso.

Conclusión#

El error 404 no encontrado (sesión no válida) en la página "/sign-in" normalmente es causado por acceder directamente a la URL de la página de inicio de sesión, lo que omite el flujo normal de inicio de sesión de la aplicación, que activa la solicitud de autorización, y por lo tanto no se establece una sesión válida (gestionada por cookies).

Al comprender este flujo y su importancia, puedes evitar el error y disfrutar de una experiencia de inicio de sesión fluida con tu app integrada con Logto.

Por favor, contáctanos si quieres compartir tus ideas.