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 luego termina con OpenID Connect exactamente como 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 luego Inicio de sesión → Inicio de sesión integrado, y agrega 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.

Agrega el componente

TSX

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, luego una contraseña o un código por correo, y después el segundo paso, si la persona lo tiene configurado. El inicio de sesión social y Continuar con Usher pasan por el proveedor y vuelven a tu app.
Luego, 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 le pide a la persona que autorice tu app.
La protección contra bots funciona igual que 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, creación de cuentas) 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, deben ser cookies propias (first-party): asígnale 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. Cuando un navegador no las conserva, el componente deriva a la persona a tu Lobby.