Inloggen op je eigen pagina

De meeste apps sturen mensen naar de Lobby van hun omgeving om in te loggen. Wil je ze liever op je eigen pagina houden, dan laat <SignIn /> uit @usher/react ze daar meteen inloggen, en rondt het daarna af met OpenID Connect, precies zoals altijd: je server krijgt zijn tokens nog steeds van Usher, en er gaat geen wachtwoord of token via je pagina.

Sta de origin van je app toe

Open in Usher Console de omgeving en kies Inloggen → Ingesloten inloggen. Voeg daar de origin van je app toe, zoals https://app.example.com. Alleen origins op de lijst mogen de Frontend API van de omgeving gebruiken, en alleen om in te loggen.

Voeg de component toe

import { SignIn } from '@usher/react'

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

De component staat binnen de UsherProvider die @usher/nextjs al gebruikt. frontendApi is de issuer van je omgeving.

Wat er gebeurt

• Eerst het e-mailadres, dan een wachtwoord of een code per e-mail, en dan de tweede stap als iemand die heeft ingesteld. Inloggen met sociale accounts en ‘Ga door met Usher’ gaan naar de provider en komen terug bij je app.
• Daarna OpenID Connect. Zodra iemand bij je omgeving is ingelogd, stuurt de component de browser naar /auth/sign-in van je app, dat meteen via Usher gaat en terugkomt met een code. De eerste keer vraagt Usher of iemand je app wil toestaan.
• Botbescherming werkt zoals in de Lobby: als Usher om een proof of work vraagt, levert de component die.
• Al het andere (toegangssleutels, zakelijk inloggen, een account aanmaken) is een link naar je Lobby.

Gebruik in productie je eigen domein

De component bewaart de sessie van Usher in de cookies van je omgeving. In productie moeten dat first-party cookies zijn: geef de omgeving je eigen domein, op dezelfde site als je app (login.example.com voor app.example.com). In ontwikkeling stuurt een omgeving die insluiten toestaat haar cookies cross-site mee, en dat accepteert Chrome. Waar een browser ze niet bewaart, geeft de component het stokje over aan je Lobby.