Componentes

SignUp

Un componente de registro preconstruido que gestiona el registro de usuarios con correo/contraseña y proveedores OAuth. Muestra el flujo de verificación de correo cuando es requerido.

Uso

tsx

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

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

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

Props

Prop	Tipo	Valor predeterminado	Descripción
mode	"popup" \| "inline"	"popup"	Cómo se muestra la UI de registro
afterSignUpUrl	string	afterSignInUrl	URL a la que redirigir después del registro
className	string	—	Clase CSS para el botón disparador
children	ReactNode	"Sign up"	Contenido del botón (modo popup)

Flujo de registro

Cuando la verificación de correo está habilitada en la configuración de tu proyecto, el componente SignUp gestiona automáticamente el flujo de múltiples pasos:

El usuario ingresa correo + contraseña (o elige OAuth)

Se envía un correo de verificación con un código de 6 dígitos

El usuario ingresa el código y se inicia sesión automáticamente

Página de registro dedicada

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>
  );
}