feat: added logout and redirection to login after logout

src/components/shared/ProfileInfo.tsx

@@ -1,11 +1,14 @@
 import { getMe } from "@/handlers/api/user.handler";
 import { IUser } from "@/types/user";
 import React, { useEffect, useState } from "react";
-
+import { Button } from "@/components/ui/button"
 import Link from "next/link";
 import { useConfig } from "@/contexts/ConfigContext";
+import { logoutUser } from "@/handlers/api/user.handler"
+import { useRouter } from 'next/router';
 
 export default function ProfileInfo() {
+  const router = useRouter();
   const { immichURL,exImmichUrl } = useConfig();
   const [user, setUser] = React.useState<IUser | null>(null);
   const [loading, setLoading] = React.useState(true);
@@ -19,6 +22,16 @@ export default function ProfileInfo() {
       })
       .finally(() => setLoading(false));
   };
+  const handleLogout = () => { 
+
+    logoutUser().then((status) => {
+      console.log(status)
+      router.push('/login');
+    }).catch((error) => {
+      setErrorMessage(error.message)
+    })
+
+  }
 
   useEffect(() => {
     fetchData();
@@ -39,6 +52,9 @@ export default function ProfileInfo() {
           {immichURL}
         </Link>
         <p className="text-sm">{user?.name}</p>
+        <Button variant="destructive" className="mx-4" onClick={handleLogout}>
+          Log Out
+        </Button>
       </div>
       <div className="border text-muted-foreground text-xs text-center py-2">
         <p>

src/config/routes.ts

@@ -3,6 +3,7 @@ export const BASE_PROXY_ENDPOINT = BASE_API_ENDPOINT + '/immich-proxy';
 
 export const GET_ME_PATH = BASE_API_ENDPOINT + "/users/me";
 export const LOGIN_PATH = BASE_API_ENDPOINT + "/users/login";
+export const LOGOUT_PATH = BASE_API_ENDPOINT + "/users/logout";
 
 
 export const LIST_PEOPLE_PATH = BASE_API_ENDPOINT + "/people/list";

src/handlers/api/user.handler.ts

@@ -1,4 +1,4 @@
-import { GET_ME_PATH, LOGIN_PATH } from "@/config/routes";
+import { GET_ME_PATH, LOGIN_PATH, LOGOUT_PATH } from "@/config/routes";
 import API from "@/lib/api";
 
 export const getMe = async () => {
@@ -7,4 +7,8 @@ export const getMe = async () => {
 
 export const loginUser = async (email: string, password: string) => {
   return API.post(LOGIN_PATH, { email, password });
+}
+
+export const logoutUser = async () => {
+  return API.post(LOGOUT_PATH);
 }

src/handlers/serverUtils/user.utils.ts

@@ -63,5 +63,22 @@ export const loginUser = async (email: string, password: string) => {
     return res.json()
   }
 
+  return null
+}
+
+export const logoutUser = async (Authorization: string) => {
+  const res = await fetch(ENV.IMMICH_URL + "/api/auth/logout", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization" : "Bearer " + Authorization
+    },
+    
+  })
+
+  if (res.ok) {
+    return res.json()
+  }
+
   return null
 }

src/pages/api/users/logout.ts

@@ -0,0 +1,36 @@
+// pages/api/proxy.js
+
+import { appConfig } from "@/config/app.config";
+import { getCurrentUser, logoutUser } from "@/handlers/serverUtils/user.utils";
+import { serializeCookie } from "@/lib/cookie";
+import { NextApiRequest, NextApiResponse } from "next";
+
+export const config = {
+  api: {
+    bodyParser: true,
+  },
+};
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== "POST") {
+    return res.status(405).json({ message: "Method Not Allowed" });
+  }
+
+
+  try {
+    const user = await getCurrentUser(req);
+    const result = await logoutUser(user.accessToken as string);
+    if (result.successful) {
+      res.setHeader("Set-Cookie", serializeCookie(appConfig.sessionCookieName, ""));
+      return res.status(200).json({ message: "Logged out successfully" });
+    } else {
+      return res.status(403).json({ message: "Invalid User Credentials" });
+    }
+  } catch (error) {
+    console.error("Logout error:", error);
+    return res.status(500).json({ message: "Internal Server Error" });
+  }
+}