logout

packages/dashboard/package.json

@@ -12,6 +12,7 @@
     "@ory/kratos-client": "^0.5.4-alpha.1",
     "@tailwindcss/forms": "^0.2.1",
     "autoprefixer": "^10.2.4",
+    "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "dayjs": "^1.10.4",
     "express-jwt": "^6.0.0",

packages/dashboard/src/components/Layout.js

@@ -1,15 +1,25 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import Head from "next/head";
+import axios from "axios";
 import { useState } from "react";
 import config from "../../src/config";
 
-const signOutUrl = `${config.kratos.browser}/self-service/browser/flows/logout`;
-
 export default function Layout({ title, children }) {
   const [menuOpen, openMenu] = useState(false);
   const [avatarDropdownOpen, openAvatarDropdown] = useState(false);
   const router = useRouter();
+  const handleSignOut = async (e) => {
+    e.preventDefault();
+
+    try {
+      await axios.post("/logout");
+
+      window.location = `${config.kratos.browser}/self-service/browser/flows/logout`;
+    } catch (error) {
+      console.log(error); // todo: handle errors
+    }
+  };
 
   return (
     <div>
@@ -132,9 +142,9 @@ export default function Layout({ title, children }) {
                             </a>
                           </Link>
                           <a
-                            href={signOutUrl}
                             className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                             role="menuitem"
+                            onClick={handleSignOut}
                           >
                             Sign out
                           </a>
@@ -239,7 +249,7 @@ export default function Layout({ title, children }) {
                   </a>
                 </Link>
                 <a
-                  href={signOutUrl}
+                  onClick={handleSignOut}
                   className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
                 >
                   Sign out

packages/dashboard/src/pages/api/accounts/login.js

@@ -3,11 +3,11 @@ import superagent from "superagent";
 export default async (req, res) => {
   if (req.cookies.ory_kratos_session) {
     try {
-      const auth = await superagent
+      const { header } = await superagent
         .post("http://oathkeeper:4455/login")
         .set("cookie", `ory_kratos_session=${req.cookies.ory_kratos_session}`);
 
-      res.setHeader("Set-Cookie", auth.header["set-cookie"]);
+      res.setHeader("Set-Cookie", header["set-cookie"]);
       res.redirect(req.query.return_to ?? "/");
     } catch (error) {
       // credentials were correct but accounts service failed

packages/dashboard/src/pages/auth/login.js

@@ -8,7 +8,7 @@ const kratos = new PublicApi(new Configuration({ basePath: config.kratos.public
 
 export async function getServerSideProps(context) {
   const flow = context.query.flow;
-  const redirect = encodeURIComponent(`/api/accounts/authenticate?return_to=${context.query.return_to ?? "/"}`);
+  const redirect = encodeURIComponent(`/api/accounts/login?return_to=${context.query.return_to ?? "/"}`);
 
   if (process.env.NODE_ENV === "development") {
     return { props: { flow: require("../../../stubs/login.json") } };