feat: complete the logout URL

frontend/index.html

@@ -31,6 +31,7 @@
           <li><a href="/verify">Verify</a></li>
           <li><a href="/recovery">Recovery</a></li>
           <li><a href="/settings">Settings</a></li>
+          <li><a href="/logout">Logout</a></li>
         </ul>
       </nav>
     </header>

frontend/src/logout.js

@@ -0,0 +1,19 @@
+import { createFlowForm, getFlowInfo, initFlow, whoami } from "./utils.js";
+
+async function createForm() {
+  var flowInfo;
+
+  var extraHeaders = {
+    Accept: "application/json",
+  };
+
+  flowInfo = await initFlow("logout", extraHeaders);
+
+  var flowJson = await flowInfo.json();
+
+  await fetch(flowJson.logout_url, { credentials: "include" });
+
+  window.location.href = "/login";
+}
+
+export default createForm;

frontend/src/router.js

@@ -4,6 +4,7 @@ import RegisterForm from "./register.js";
 import VerifyForm from "./verify.js";
 import RecoveryForm from "./recovery.js";
 import SettingsForm from "./settings.js";
+import LogOutForm from "./logout.js";
 
 const Router = {
   init: async function init_() {
@@ -55,6 +56,10 @@ const Router = {
         document.title = "Settings - Developer Friendly";
         pageElement = await SettingsForm();
         break;
+      case route.startsWith("/logout"):
+        document.title = "Log Out - Developer Friendly";
+        pageElement = await LogOutForm();
+        break;
       default:
         document.title = "Developer Friendly";
         pageElement = document.createElement("h1");

frontend/src/utils.js

@@ -8,16 +8,22 @@ export async function whoami() {
   return await fetch(`${kratosHost}/sessions/whoami`, fetchOptions);
 }
 
-export async function getFlowInfo(flow, flowId) {
+export async function getFlowInfo(flow, flowId, extraHeaders = {}) {
   switch (flow) {
     case "login":
     case "registration":
     case "verification":
     case "recovery":
     case "settings":
+    case "logout":
       return await fetch(
         `${kratosHost}/self-service/${flow}/flows?id=${flowId}`,
-        fetchOptions
+        {
+          ...fetchOptions,
+          headers: {
+            ...extraHeaders,
+          },
+        }
       );
     default:
       console.error("Unknown flow type", flow);
@@ -101,10 +107,15 @@ export function createFlowForm(flowInfo, submitLabel = "Submit") {
   return form;
 }
 
-export async function initFlow(flow) {
+export async function initFlow(flow, extraHeaders = {}) {
   return await fetch(
     `${kratosHost}/self-service/${flow}/browser`,
-    fetchOptions
+    {
+      ...fetchOptions,
+      headers: {
+        ...extraHeaders,
+      },
+    }
   );
 }
 

kratos/config.yml

@@ -332,6 +332,9 @@ serve:
     cors:
       allowed_origins:
         - http://localhost:8080
+      allowed_headers:
+        - content-type
+        - Accept
       options_passthrough: true
       max_age: 0
       debug: true