Componentes

SignUp

Um componente de cadastro pré-construído que gerencia o registro de usuários com e-mail/senha e provedores OAuth. Exibe o fluxo de verificação de e-mail quando necessário.

Uso

tsx

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

// Popup mode
<SignUp mode="popup" />

// Inline mode
<SignUp mode="inline" afterSignUpUrl="/onboarding" />

Props

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

Fluxo de Registro

Quando a verificação de e-mail está habilitada nas configurações do seu projeto, o componente SignUp gerencia automaticamente o fluxo em múltiplas etapas:

O usuário informa e-mail + senha (ou escolhe OAuth)

Um e-mail de verificação é enviado com um código de 6 dígitos

O usuário insere o código e é autenticado automaticamente

Página Dedicada de Cadastro

app/sign-up/page.tsx

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

export default function SignUpPage() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SignUp
        mode="inline"
        afterSignUpUrl="/onboarding"
      />
    </div>
  );
}