Login på din egen side

De fleste apps sender folk til deres miljøs Lobby for at logge ind. Vil du hellere holde dem på din egen side, logger <SignIn /> fra @usher/react dem ind lige der og afslutter derefter med OpenID Connect præcis som før: din server får stadig sine tokens fra Usher, og ingen adgangskode eller token passerer gennem din side.

Tillad din apps origin

Åbn miljøet i Usher Console, vælg derefter Login → Indlejret login, og tilføj din apps origin, f.eks. https://app.example.com. Kun origins på listen må bruge miljøets Frontend API, og kun til at logge ind.

Tilføj komponenten

import { SignIn } from '@usher/react'

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

Den ligger inde i den UsherProvider, som @usher/nextjs allerede bruger. frontendApi er dit miljøs udsteder.

Det sker der

• E-mail først, derefter en adgangskode eller en kode via e-mail og så det andet trin, hvis personen har et. Login med sociale konti og Fortsæt med Usher går til udbyderen og kommer tilbage til din app.
• Derefter OpenID Connect. Når personen er logget ind i dit miljø, sender komponenten browseren til din apps /auth/sign-in, som går direkte gennem Usher og tilbage med en kode. Første gang beder Usher personen om at give din app adgang.
• Bot-beskyttelse virker som i Lobbyen: når Usher beder om et proof of work, udfører komponenten det.
• Alt andet (adgangsnøgler, virksomhedslogin, oprettelse af en konto) er et link til din Lobby.

Brug dit eget domæne i produktion

Komponenten gemmer Ushers session i dit miljøs cookies. I produktion skal de være førstepartscookies: giv miljøet dit eget domæne på samme site som din app (login.example.com til app.example.com). I udvikling sender et miljø, der tillader indlejring, sine cookies på tværs af sites, hvilket Chrome accepterer. Hvor en browser ikke vil beholde dem, overlader komponenten i stedet opgaven til din Lobby.