Componentes

SignIn

Um componente de login pré-construído que gerencia autenticação por e-mail/senha e fluxos de provedor OAuth. Disponível nos modos popup e inline.

Uso

tsx

import { SignIn } from "@authon/react";

// Popup mode — triggers a modal on click
<SignIn mode="popup" />

// Inline mode — renders the form directly on the page
<SignIn mode="inline" />

Props

Prop	Tipo	Padrão	Descrição
mode	"popup" \| "inline"	"popup"	Como a UI de login é exibida
afterSignInUrl	string	provider default	URL para redirecionar após o login
className	string	—	Classe CSS para o botão de acionamento (modo popup)
children	ReactNode	"Sign in"	Conteúdo do botão de acionamento (modo popup)

Modo Popup

O modo popup renderiza um botão que abre o modal de login ao ser clicado. Você pode personalizar a aparência do botão:

tsx

<SignIn mode="popup" className="my-custom-btn">
  Sign in to your account
</SignIn>

Modo Inline

O modo inline renderiza o formulário de login diretamente. Útil para páginas dedicadas de login:

app/sign-in/page.tsx

import { SignIn } from "@authon/react";

export default function SignInPage() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-slate-950">
      <SignIn
        mode="inline"
        afterSignInUrl="/dashboard"
      />
    </div>
  );
}

Personalização

A UI de login é estilizada usando as configurações de personalização do seu Dashboard Authon → aba Personalizar. Você pode configurar:

Nome da marca e logo
Cores do gradiente primário
Cor de fundo do card
Raio da borda
Ordem dos provedores OAuth