Connexion sur votre propre page

La plupart des apps envoient les utilisateurs vers le Lobby de leur environnement pour se connecter. Si vous préférez les garder sur votre propre page, <SignIn /> de @usher/react les connecte sur place, puis termine avec OpenID Connect exactement comme avant : votre serveur obtient toujours ses jetons auprès d’Usher, et aucun mot de passe ni aucun jeton ne transite par votre page.

Autoriser l’origine de votre app

Dans Usher Console, ouvrez l’environnement, puis Connexion → Connexion intégrée, et ajoutez l’origine de votre app, comme https://app.example.com. Seules les origines de la liste peuvent utiliser l’API Frontend de l’environnement, et uniquement pour la connexion.

Ajouter le composant

TSX

import { SignIn } from '@usher/react'

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

Il se place à l’intérieur du UsherProvider qu’utilise déjà @usher/nextjs. frontendApi est l’émetteur de votre environnement.

Ce qui se passe

D’abord l’adresse courriel, puis un mot de passe ou un code par courriel, puis la seconde étape si la personne en a une. La connexion sociale et Continuer avec Usher passent par le fournisseur et reviennent à votre app.
Ensuite, OpenID Connect. Une fois la personne connectée à votre environnement, le composant envoie le navigateur vers /auth/sign-in de votre app, qui passe directement par Usher et revient avec un code. La première fois, Usher demande à la personne d’autoriser votre app.
La protection contre les robots fonctionne comme dans le Lobby : quand Usher demande une preuve de travail, le composant s’en charge.
Tout le reste (clés d’accès, connexion d’entreprise, création de compte) est un lien vers votre Lobby.

Utiliser votre propre domaine en production

Le composant conserve la session Usher dans les cookies de votre environnement. En production, ces cookies doivent être propriétaires : donnez à l’environnement votre propre domaine, sur le même site que votre app (login.example.com pour app.example.com). En développement, un environnement qui autorise l’intégration envoie ses cookies d’un site à l’autre, ce que Chrome accepte. Lorsqu’un navigateur refuse de les conserver, le composant passe le relais à votre Lobby.