L’accesso sulla tua pagina

La maggior parte delle app manda le persone alla Lobby del proprio ambiente per accedere. Se preferisci tenerle sulla tua pagina, <SignIn /> di @usher/react le fa accedere direttamente lì, poi conclude con OpenID Connect esattamente come prima: il tuo server riceve comunque i token da Usher, e nessuna password e nessun token passa dalla tua pagina.

Consenti l’origine della tua app

In Usher Console, apri l’ambiente, poi Accesso → Accesso incorporato, e aggiungi l’origine della tua app, come https://app.example.com. Solo le origini elencate possono usare la Frontend API dell’ambiente, e solo per l’accesso.

Aggiungi il componente

import { SignIn } from '@usher/react'

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

Si inserisce all’interno dello UsherProvider che @usher/nextjs usa già. frontendApi è l’issuer del tuo ambiente.

Cosa succede

• Prima l’email, poi una password o un codice via email, poi il secondo passaggio se la persona ne ha uno. L’accesso con account social e Continua con Usher passano dal provider e tornano alla tua app.
• Poi OpenID Connect. Una volta eseguito l’accesso al tuo ambiente, il componente manda il browser a /auth/sign-in della tua app, che passa direttamente da Usher e torna con un codice. La prima volta, Usher chiede alla persona di autorizzare la tua app.
• La protezione dai bot funziona come nella Lobby: quando Usher chiede una proof of work, se ne occupa il componente.
• Tutto il resto (passkey, accesso aziendale, creazione di un account) è un link alla tua Lobby.

Usa il tuo dominio in produzione

Il componente conserva la sessione di Usher nei cookie del tuo ambiente. In produzione devono essere cookie di prima parte: assegna all’ambiente un tuo dominio, sullo stesso sito della tua app (login.example.com per app.example.com). In sviluppo, un ambiente che consente l’incorporamento invia i suoi cookie tra siti diversi, cosa che Chrome accetta. Se un browser non li conserva, il componente passa invece la mano alla tua Lobby.