Composants d’authentification

Composants prêts à l’emploi pour la connexion, le menu utilisateur et les sessions.

NowStack fournit les composants nécessaires à la gestion de l’authentification. Ils se trouvent dans src/features/auth/.

SignInButton

Ce composant client affiche un bouton de connexion et redirige vers /auth/signin avec la page courante dans callbackUrl.

Propriétés : VariantProps<typeof buttonVariants> accepte notamment size et variant.

import { SignInButton } from "@/features/auth/sign-in-button";

export default function Home() {
  return (
    <div>
      <SignInButton size="lg" variant="default" />
    </div>
  );
}

LoggedInButton

Ce composant client affiche l’avatar et un menu donnant accès au tableau de bord, au compte, à l’administration, au thème et à la déconnexion.

Propriétés :

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

AuthButton (côté serveur)

Ce composant serveur affiche automatiquement LoggedInButton ou SignInButton selon l’état de connexion.

Propriétés : aucune

Fonctionnalités :

Utilise Suspense avec un Skeleton
Charge l’utilisateur côté serveur
Convient aux layouts et aux pages serveur

import { AuthButton } from "@/features/auth/auth-button";

export default function Header() {
  return (
    <div>
      <AuthButton />
    </div>
  );
}

AuthButtonClient (côté client)

Ce composant client reprend le comportement d’AuthButton à partir de la session utilisateur.

Propriétés : aucune

Fonctionnalités :

Utilise le hook useSession
À privilégier lorsqu’un composant client est requis

import { AuthButtonClient } from "@/features/auth/auth-button-client";

export default function ClientHeader() {
  return (
    <div>
      <AuthButtonClient />
    </div>
  );
}

Déconnexion

La déconnexion est proposée dans le menu de LoggedInButton. UserDropdownLogout exécute l’action puis redirige vers /auth/signin.