Início de sessão na sua própria página

A maioria das apps envia as pessoas para o Lobby do seu ambiente para iniciarem sessão. Se preferir mantê-las na sua própria página, o <SignIn /> do @usher/react inicia-lhes a sessão ali mesmo e depois termina com OpenID Connect, exatamente como antes: o seu servidor continua a receber os tokens do Usher, e nenhuma palavra-passe ou token passa pela sua página.

Autorize a origem da sua app

Na Usher Console, abra o ambiente e escolha Início de sessão → Início de sessão integrado, e adicione a origem da sua app, como https://app.example.com. Só as origens da lista podem usar a Frontend API do ambiente, e apenas para iniciar sessão.

Adicione o componente

import { SignIn } from '@usher/react'

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

Fica dentro do UsherProvider que o @usher/nextjs já usa. O frontendApi é o emissor do seu ambiente.

O que acontece

• Primeiro o e-mail, depois uma palavra-passe ou um código por e-mail, e depois o segundo passo, se a pessoa o tiver. O início de sessão social e o Continuar com o Usher vão ao fornecedor e voltam à sua app.
• Depois, OpenID Connect. Com a sessão iniciada no seu ambiente, o componente envia o navegador para o /auth/sign-in da sua app, que passa diretamente pelo Usher e volta com um código. Da primeira vez, o Usher pede à pessoa que autorize a sua app.
• A proteção contra bots funciona como no Lobby: quando o Usher pede uma prova de trabalho, o componente trata dela.
• Tudo o resto (chaves-passe, início de sessão empresarial, criação de conta) é uma ligação para o seu Lobby.

Use o seu próprio domínio em produção

O componente guarda a sessão do Usher nos cookies do seu ambiente. Em produção, esses cookies têm de ser próprios (first-party): dê ao ambiente o seu próprio domínio, no mesmo site que a sua app (login.example.com para app.example.com). Em desenvolvimento, um ambiente que permite a integração envia os seus cookies entre sites, o que o Chrome aceita. Quando um navegador não os guarda, o componente passa a vez ao seu Lobby.