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

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

Permita a origem do seu app

No Usher Console, abra o ambiente, vá em Início de sessão → Início de sessão incorporado e adicione a origem do seu 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" />
}

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

O que acontece

• Primeiro o e-mail, depois uma senha ou um código por e-mail e, então, a segunda etapa, se a pessoa tiver uma. O início de sessão social e o Continuar com o Usher vão até o provedor e voltam para o seu app.
• Depois, OpenID Connect. Com a sessão iniciada no seu ambiente, o componente envia o navegador para o /auth/sign-in do seu app, que passa direto pelo Usher e volta com um código. Na primeira vez, o Usher pede à pessoa que autorize o seu app.
• A proteção contra bots funciona como no Lobby: quando o Usher pede uma prova de trabalho, o componente cuida disso.
• Todo o resto (chaves-senha, início de sessão corporativo, criação de conta) é um link para o seu Lobby.

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

O componente mantém a sessão do Usher nos cookies do seu ambiente. Em produção, eles precisam ser primários (first-party): dê ao ambiente o seu próprio domínio, no mesmo site que o seu app (login.example.com para app.example.com). Em desenvolvimento, um ambiente que permite a incorporação envia os cookies entre sites, o que o Chrome aceita. Quando um navegador não os guarda, o componente passa a vez para o seu Lobby.