fix: use POST to logout

getAlby · Dec 27, 2023 · 80af9b2 · 80af9b2
1 parent 1b4b03d
commit 80af9b2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/echo_handlers.go b/echo_handlers.go
@@ -65,7 +65,7 @@ func (svc *Service) RegisterSharedRoutes(e *echo.Echo) {
 	e.POST("/api/apps", svc.AppsCreateHandler)
 	e.DELETE("/api/apps/:pubkey", svc.AppsDeleteHandler)
 	e.GET("/api/info", svc.InfoHandler)
-	e.GET("/api/logout", svc.LogoutHandler)
+	e.POST("/api/logout", svc.LogoutHandler)
 	frontend.RegisterHandlers(e)
 }
 

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useInfo } from "../hooks/useInfo";
 import { logout } from "../utils/logout";
 import { useLogin } from "../hooks/useLogin";
@@ -7,6 +7,9 @@ import caretIcon from "../assets/icons/caret.svg";
 import aboutIcon from "../assets/icons/about.svg";
 import React from "react";
 import { LogoutIcon } from "./icons/LogoutIcon";
+import { handleFetchError, validateFetchResponse } from "../utils/fetch";
+import toast from "./Toast";
+import { useSWRConfig } from "swr";
 
 function Navbar() {
   const { data: info } = useInfo();
@@ -85,6 +88,24 @@ function ProfileDropdown() {
     return null;
   }
 
+  async function logout() {
+    try {
+      if (!info) {
+        throw new Error("info not loaded");
+      }
+      const response = await fetch("/api/logout", {
+        method: "POST",
+        headers: {
+          "X-CSRF-Token": info.csrf,
+        },
+      });
+      await validateFetchResponse(response);
+      window.location.href = "/";
+    } catch (error) {
+      handleFetchError("Failed to logout", error);
+    }
+  }
+
   // TODO: add a proper dropdown component
   return (
     <div className="flex items-center relative">

diff --git a/frontend/src/utils/logout.ts b/frontend/src/utils/logout.ts