独自ページでのサインイン

ほとんどのアプリは、サインインのためにユーザーを環境のLobbyへ送ります。ユーザーを自分のページにとどめておきたい場合は、@usher/reactの<SignIn />を使えば、その場でサインインでき、そのあとはこれまでとまったく同じようにOpenID Connectで完了します。サーバーは引き続きUsherからトークンを受け取り、パスワードやトークンがあなたのページを通ることはありません。

アプリのオリジンを許可する

Usher Consoleで環境を開き、サインイン → 埋め込みサインインを選んで、https://app.example.comのようなアプリのオリジンを追加します。環境のFrontend APIを使えるのは登録されたオリジンだけで、用途もサインインに限られます。

コンポーネントを追加する

TSX

import { SignIn } from '@usher/react'

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

このコンポーネントは、@usher/nextjsがすでに使っているUsherProviderの中に置きます。frontendApiは環境の発行者です。

何が起きるか

まずメールアドレス、次にパスワードかメールで届くコード、そして2段階認証を設定しているユーザーにはその2段階目。ソーシャルサインインと「Usherで続ける」は、プロバイダーへ移動してから、アプリに戻ってきます。
次にOpenID Connect：環境でのサインインが済むと、コンポーネントはブラウザーをアプリの/auth/sign-inへ送ります。そこからUsherをそのまま通過し、コードを持って戻ってきます。初回は、Usherがユーザーにアプリの許可を求めます。
ボット対策は、Lobbyと同じように働きます。Usherがプルーフ・オブ・ワークを求めると、コンポーネントがそれを実行します。
それ以外（パスキー、エンタープライズサインイン、アカウントの作成）は、Lobbyへのリンクになります。

本番環境では独自ドメインを使う

コンポーネントは、Usherのセッションを環境のCookieに保持します。本番環境では、これがファーストパーティのCookieである必要があります。アプリと同じサイトにある独自ドメインを環境に設定してください（app.example.comならlogin.example.com）。開発環境では、埋め込みを許可した環境はCookieをクロスサイトで送り、Chromeはそれを受け入れます。Cookieを保持しないブラウザーでは、コンポーネントが代わりにLobbyへ引き継ぎます。