Composants d'authentification

NOW.TS fournit tous les composants necessaires pour gerer facilement l'authentification. Ils se trouvent dans src/features/auth/.

SignInButton

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

LoggedInButton

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

AuthButton (Server Side)

Composant serveur qui affiche automatiquement LoggedInButton ou SignInButton selon l'etat d'authentification de l'utilisateur.

Props : Aucune

Fonctionnalites :

• Utilise Suspense avec un fallback Skeleton
• Recupere l'utilisateur cote serveur
• Ideal pour les layouts et pages serveur

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

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

AuthButtonClient (Client Side)

Composant client avec le meme comportement que AuthButton. Il affiche automatiquement LoggedInButton ou SignInButton selon la session utilisateur.

Props : Aucune

Fonctionnalites :

• Utilise le hook useSession cote client
• A utiliser quand vous avez besoin d'un composant client

"use client";

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

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

Logout

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.