Componentes

SignIn

Un componente de inicio de sesión preconstruido que gestiona la autenticación con correo/contraseña y los flujos de proveedores OAuth. Disponible en 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	Valor predeterminado	Descripción
mode	"popup" \| "inline"	"popup"	Cómo se muestra la UI de inicio de sesión
afterSignInUrl	string	provider default	URL a la que redirigir después del inicio de sesión
className	string	—	Clase CSS para el botón disparador (modo popup)
children	ReactNode	"Sign in"	Contenido del botón disparador (modo popup)

Modo popup

El modo popup renderiza un botón que abre el modal de inicio de sesión al hacer clic. Puedes personalizar la apariencia del botón:

tsx

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

Modo inline

El modo inline renderiza el formulario de inicio de sesión directamente. Útil para páginas dedicadas de inicio de sesión:

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

Personalización

La UI de inicio de sesión se estiliza usando la configuración de personalización de tu Panel de Authon → pestaña Personalizar. Puedes configurar:

Nombre de marca y logotipo
Colores del degradado principal
Color de fondo de la tarjeta
Radio de borde
Orden de proveedores OAuth