Composants React et CSS

Le paquet fournit des composants Better Auth prêts à l'emploi tout en laissant la mise en page et la navigation sous le contrôle de l'application.

Configuration Tailwind CSS#

Importez la source du paquet dans le CSS global afin que Tailwind détecte les classes compilées :

@import "tailwindcss";@import "@krak-stack/auth/tailwind.css";

Les composants utilisent les variables shadcn comme --background, --foreground, --primary, --border et --radius. Définissez-les dans :root et .dark, normalement via votre thème shadcn existant.

Fournisseur#

import { KrakstackAuthProvider } from "@krak-stack/auth";
<KrakstackAuthProvider  locale="fr"  projectId={import.meta.env.VITE_KRAKSTACK_AUTH_PROJECT_ID}>  {children}</KrakstackAuthProvider>;

Fournissez baseUrl ou un authClient personnalisé si le client de même origine par défaut ne convient pas.

Contrôles de compte#

import { OrganizationSwitcher, UserButton } from "@krak-stack/auth";
<OrganizationSwitcher side="bottom" /><UserButton signOutRedirect="/" side="bottom" />

Formulaires#

Le paquet exporte Signin, Signup, VerifyEmail, ResetPassword et TwoFactor. Affichez-les dans vos propres routes afin de garder le contrôle des URL, métadonnées et limites d'erreur.

Garde d'autorisation#

MemberRequired protège la présentation selon l'adhésion à une organisation, mais chaque endpoint backend doit aussi vérifier indépendamment la session, l'organisation et le rôle. Une garde frontend n'est jamais une frontière d'autorisation.

Hooks et client#

Les hooks useAuthClient, useKrakstackAuth et useKrakstackAuthProjectConfig sont disponibles dans le fournisseur. Importez les deux derniers depuis @krak-stack/auth/components; ils ne sont pas encore réexportés par la racine du paquet.