Inicio de sesión en tu propia página

La mayoría de las apps envían a las personas al Lobby de su entorno para iniciar sesión. Si prefieres que se queden en tu propia página, <SignIn /> de @usher/react inicia su sesión ahí mismo y después termina con OpenID Connect exactamente igual que siempre: tu servidor sigue recibiendo sus tokens de Usher, y ninguna contraseña ni ningún token pasa por tu página.

Permite el origen de tu app

En Usher Console, abre el entorno y ve a Inicio de sesión → Inicio de sesión integrado, y añade el origen de tu app, como https://app.example.com. Solo los orígenes de la lista pueden usar la Frontend API del entorno, y solo para iniciar sesión.

Añade el componente

import { SignIn } from '@usher/react'

export function SignInPage() {
  return <SignIn frontendApi="https://login.example.com" returnTo="/dashboard" />
}

Va dentro del UsherProvider que ya usa @usher/nextjs. frontendApi es el emisor de tu entorno.

Qué pasa

• Primero el correo electrónico, después una contraseña o un código por correo electrónico, y luego el segundo paso si la persona lo tiene. El inicio de sesión social y Continuar con Usher van al proveedor y vuelven a tu app.
• Después, OpenID Connect. Una vez iniciada la sesión en tu entorno, el componente envía el navegador a /auth/sign-in de tu app, que pasa directamente por Usher y vuelve con un código. La primera vez, Usher pide a la persona que dé permiso a tu app.
• La protección contra bots funciona como en el Lobby: cuando Usher pide una prueba de trabajo, el componente la resuelve.
• Todo lo demás (llaves de acceso, inicio de sesión empresarial, crear una cuenta) es un enlace a tu Lobby.

Usa tu propio dominio en producción

El componente guarda la sesión de Usher en las cookies de tu entorno. En producción, tienen que ser cookies propias (first-party): da al entorno tu propio dominio, en el mismo sitio que tu app (login.example.com para app.example.com). En desarrollo, un entorno que permite la integración envía sus cookies entre sitios, algo que Chrome acepta. Si un navegador no las conserva, el componente pasa el relevo a tu Lobby.