Composants

SignIn

Un composant de connexion préconstruit qui gère l'authentification par e-mail/mot de passe et les flux de fournisseurs OAuth. Disponible en modes popup et en ligne.

Utilisation

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	Type	Défaut	Description
mode	"popup" \| "inline"	"popup"	Comment l'interface de connexion est affichée
afterSignInUrl	string	provider default	URL de redirection après la connexion
className	string	—	Classe CSS pour le bouton déclencheur (mode popup)
children	ReactNode	"Sign in"	Contenu du bouton déclencheur (mode popup)

Mode popup

Le mode popup affiche un bouton qui ouvre le modal de connexion au clic. Vous pouvez personnaliser l'apparence du bouton :

tsx

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

Mode en ligne

Le mode en ligne affiche le formulaire de connexion directement. Utile pour les pages de connexion dédiées :

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

Personnalisation

L'interface de connexion est stylisée à partir des paramètres de personnalisation de votre tableau de bord Authon → onglet Personnaliser. Vous pouvez configurer :

Nom de la marque et logo
Couleurs du dégradé principal
Couleur d'arrière-plan de la carte
Rayon de bordure
Ordre des fournisseurs OAuth