Anmeldung auf deiner eigenen Seite

Die meisten Apps schicken Menschen zur Anmeldung in die Lobby ihrer Umgebung. Möchtest du sie lieber auf deiner eigenen Seite behalten, meldet <SignIn /> aus @usher/react sie direkt dort an und schließt dann genau wie bisher mit OpenID Connect ab: Dein Server bekommt seine Tokens weiterhin von Usher, und kein Passwort und kein Token läuft über deine Seite.

Lass den Origin deiner App zu

Öffne in Usher Console die Umgebung und dann Anmeldung → Eingebettete Anmeldung, und füge den Origin deiner App hinzu, etwa https://app.example.com. Nur eingetragene Origins dürfen die Frontend API der Umgebung nutzen, und auch nur für die Anmeldung.

Füge die Komponente hinzu

import { SignIn } from '@usher/react'

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

Sie sitzt innerhalb des UsherProvider, den @usher/nextjs bereits verwendet. frontendApi ist der Issuer deiner Umgebung.

Was passiert

• Zuerst die E-Mail-Adresse, dann ein Passwort oder ein Code per E-Mail, dann der zweite Schritt, falls die Person einen eingerichtet hat. Social Login und „Mit Usher fortfahren“ führen zum jeweiligen Anbieter und zurück zu deiner App.
• Dann OpenID Connect. Sobald die Person bei deiner Umgebung angemeldet ist, schickt die Komponente den Browser zu /auth/sign-in deiner App. Von dort geht es direkt über Usher und mit einem Code zurück. Beim ersten Mal bittet Usher die Person, deine App zuzulassen.
• Bot-Schutz funktioniert wie in der Lobby: Verlangt Usher einen Proof of Work, erbringt ihn die Komponente.
• Alles andere (Passkeys, Unternehmensanmeldung, ein Konto erstellen) ist ein Link zu deiner Lobby.

Nutze in der Produktion deine eigene Domain

Die Komponente bewahrt die Sitzung von Usher in den Cookies deiner Umgebung auf. In der Produktion müssen das First-Party-Cookies sein: Gib der Umgebung deine eigene Domain, auf derselben Site wie deine App (login.example.com für app.example.com). In der Entwicklung sendet eine Umgebung, die das Einbetten erlaubt, ihre Cookies auch websiteübergreifend, was Chrome akzeptiert. Wo ein Browser sie nicht behält, übergibt die Komponente stattdessen an deine Lobby.