...

src/app/users/[username]/LogoutButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { LightButton } from "@/components/ui/buttons";
+import { authClient } from "@/lib/auth-client";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+
+export function LogoutButton() {
+    const t = useTranslations("profile");
+    const router = useRouter();
+    return <LightButton onClick={async () => {
+        authClient.signOut({
+            fetchOptions: {
+                onSuccess: () => {
+                    router.push("/auth?redirect=/profile");
+                }
+            }
+        });
+    }}> {t("logout")}</LightButton >;
+}

src/app/users/[username]/page.tsx

@@ -3,6 +3,9 @@ import { Container } from "@/components/ui/Container";
 import { actionGetUserProfileByUsername } from "@/modules/auth/auth-action";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
+import { auth } from "@/auth";
+import { headers } from "next/headers";
+import { LogoutButton } from "@/app/users/[username]/LogoutButton";
 
 interface UserPageProps {
     params: Promise<{ username: string; }>;
@@ -12,6 +15,9 @@ export default async function UserPage({ params }: UserPageProps) {
     const { username } = await params;
     const t = await getTranslations("user_profile");
 
+    // Get current session
+    const session = await auth.api.getSession({ headers: await headers() });
+
     // Get user profile
     const result = await actionGetUserProfileByUsername({ username });
 
@@ -21,11 +27,18 @@ export default async function UserPage({ params }: UserPageProps) {
 
     const user = result.data;
 
+    // Check if viewing own profile
+    const isOwnProfile = session?.user?.username === username || session?.user?.email === username;
+
     return (
         <div className="min-h-[calc(100vh-64px)] bg-gray-50 py-8">
             <Container className="max-w-3xl mx-auto">
                 {/* Header */}
                 <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <div className="flex items-center justify-between mb-4">
+                        <div></div>
+                        {isOwnProfile && <LogoutButton />}
+                    </div>
                     <div className="flex items-center space-x-6">
                         {/* Avatar */}
                         {user.image ? (