fix: django 5 logout is POST not GET

Author: joonatank

packages/common/package.json

@@ -44,7 +44,8 @@
   "peerDependencies": {
     "@apollo/client": "^3.8.10",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "typescript-cookie": "^1.0.6"
   },
   "devDependencies": {
     "@apollo/client": "^3.8.10",
@@ -71,6 +72,7 @@
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "typescript-cookie": "^1.0.6"
   }
 }

packages/common/src/browserHelpers.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { isBrowser } from "./helpers";
 import { getSignOutUrl, getSignInUrl } from "./urlBuilder";
+import { getCookie } from "typescript-cookie";
 
 // TODO add wrapper a that blocks importing on nodejs
 
@@ -31,5 +32,24 @@ export function signOut(apiBaseUrl: string) {
   if (!isBrowser) {
     throw new Error("signIn can only be called in the browser");
   }
-  window.location.href = getSignOutUrl(apiBaseUrl);
+  const logoutUrl = getSignOutUrl(apiBaseUrl);
+  const csrfToken = getCookie("csrftoken");
+  if (!csrfToken) {
+    throw new Error("csrf token not found");
+  }
+
+  // NOTE dynamically create a form and submit it so this function can be used anywhere
+  // can't use fetch because the logout goes through redirects after Django logout
+  const form = document.createElement("form");
+  form.method = "POST";
+  form.action = logoutUrl;
+  form.style.display = "none";
+  const csrfTokenInput = document.createElement("input");
+  csrfTokenInput.type = "hidden";
+  csrfTokenInput.name = "csrfmiddlewaretoken";
+  csrfTokenInput.value = csrfToken;
+  form.appendChild(csrfTokenInput);
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
 }

packages/common/src/urlBuilder.ts

@@ -45,5 +45,5 @@ export function getSignInUrl(
 /// @return url for logging out with redirect url to /logout
 export function getSignOutUrl(apiBaseUrl: string): string {
   const authUrl = buildAuthUrl(apiBaseUrl);
-  return `${authUrl}logout`;
+  return `${authUrl}logout/`;
 }