feat: add logout functionality to navigation component

- Integrated logout feature in the navigation dropdown using authClient.
- Implemented toast notifications for successful logout and error handling.
- Redirected users to the login page post-logout for improved user experience.
This commit is contained in:
Julien Froidefond
2025-08-25 19:14:56 +02:00
parent 42217c1c13
commit abd0de9f12
2 changed files with 33 additions and 65 deletions

View File

@@ -1,6 +1,9 @@
import { NextRequest, NextResponse } from "next/server";
import { AuthService, userService, TeamsService } from "@/services";
/**
* GET /api/auth - Récupère les informations de l'utilisateur connecté
*/
export async function GET(request: NextRequest) {
try {
// Récupérer l'UUID utilisateur depuis le cookie
@@ -51,62 +54,3 @@ export async function GET(request: NextRequest) {
);
}
}
/**
* POST /api/auth - Authentifie un utilisateur et créé/met à jour le cookie
*/
export async function POST(request: NextRequest) {
try {
const profile: UserProfile = await request.json();
if (!profile.firstName || !profile.lastName || !profile.teamId) {
return NextResponse.json(
{ error: "Missing required fields" },
{ status: 400 }
);
}
// Authentifier l'utilisateur et récupérer la configuration du cookie
const { userUuid, cookieConfig } = await AuthService.authenticateUser(
profile
);
// Créer la réponse avec le cookie
const response = NextResponse.json(
{
user: { ...profile, uuid: userUuid },
userUuid,
},
{ status: 200 }
);
// Définir le cookie avec l'UUID utilisateur
response.cookies.set(
cookieConfig.name,
cookieConfig.value,
cookieConfig.options
);
return response;
} catch (error) {
console.error("Error authenticating user:", error);
return NextResponse.json(
{ error: "Failed to authenticate user" },
{ status: 500 }
);
}
}
/**
* DELETE /api/auth - Déconnecte l'utilisateur (supprime le cookie)
*/
export async function DELETE() {
try {
const response = NextResponse.json({ success: true }, { status: 200 });
response.cookies.set(COOKIE_NAME, "", { maxAge: 0 });
return response;
} catch (error) {
console.error("Error logging out user:", error);
return NextResponse.json({ error: "Failed to logout" }, { status: 500 });
}
}

View File

@@ -1,7 +1,7 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/layout/theme-toggle";
import {
@@ -17,6 +17,8 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { authClient } from "@/clients";
import { useToast } from "@/hooks/use-toast";
interface NavigationProps {
userInfo?: {
@@ -28,6 +30,27 @@ interface NavigationProps {
export function Navigation({ userInfo }: NavigationProps = {}) {
const pathname = usePathname();
const router = useRouter();
const { toast } = useToast();
const handleLogout = async () => {
try {
await authClient.logout();
toast({
title: "Déconnexion réussie",
description: "Vous avez été déconnecté avec succès.",
});
// Rediriger vers la page de login après déconnexion
router.push("/login");
} catch (error: any) {
console.error("Logout failed:", error);
toast({
title: "Erreur de déconnexion",
description: "Erreur lors de la déconnexion. Veuillez réessayer.",
variant: "destructive",
});
}
};
const navItems = [
{
@@ -106,11 +129,12 @@ export function Navigation({ userInfo }: NavigationProps = {}) {
Mon compte
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/login" className="flex items-center gap-2">
<User className="h-4 w-4" />
Se déconnecter
</Link>
<DropdownMenuItem
onClick={handleLogout}
className="flex items-center gap-2"
>
<User className="h-4 w-4" />
Se déconnecter
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>