Composants prets a l'emploi pour la connexion, les menus utilisateur et la gestion de session
NOW.TS fournit tous les composants necessaires pour gerer facilement l'authentification. Ils se trouvent dans src/features/auth/.
Composant client qui affiche un bouton de connexion. Il redirige automatiquement vers /auth/signin avec le callbackUrl correct (la page courante).
Props : VariantProps<typeof buttonVariants> (accepte les variantes de bouton comme size, variant, etc.)
import { SignInButton } from "@/features/auth/sign-in-button";
export default function Home() {
return (
<div>
<SignInButton size="lg" variant="default" />
</div>
);
}
Composant client qui affiche l'avatar de l'utilisateur avec un menu deroulant. Quand l'utilisateur clique dessus, il voit un menu avec des actions (Dashboard, Account Settings, Admin, Theme, Logout).
Props :
{
user: {
name?: string | null;
email?: string | null;
image?: string | null;
}
}
import { LoggedInButton } from "@/features/auth/sign-in-button";
export default function Home() {
const user = await getUser();
if (!user) return null;
return (
<div>
<LoggedInButton user={user} />
</div>
);
}
Composant serveur qui affiche automatiquement LoggedInButton ou SignInButton selon l'etat d'authentification de l'utilisateur.
Props : Aucune
Fonctionnalites :
Suspense avec un fallback Skeletonimport { AuthButton } from "@/features/auth/auth-button";
export default function Header() {
return (
<div>
<AuthButton />
</div>
);
}
Composant client avec le meme comportement que AuthButton. Il affiche automatiquement LoggedInButton ou SignInButton selon la session utilisateur.
Props : Aucune
Fonctionnalites :
useSession cote client"use client";
import { AuthButtonClient } from "@/features/auth/auth-button-client";
export default function ClientHeader() {
return (
<div>
<AuthButtonClient />
</div>
);
}
La deconnexion est geree via le menu deroulant dans LoggedInButton. Le composant UserDropdownLogout gere l'action de deconnexion et redirige automatiquement vers /auth/signin apres la deconnexion.