Add logout button to /user

server/router/handler/logout.go

@@ -18,7 +18,7 @@ func HandleLogout(sc context.ServerContext) echo.HandlerFunc {
 		)
 		if cookie, err = c.Cookie("session"); err != nil {
 			// cookie not found
-			return c.Redirect(http.StatusSeeOther, "/")
+			return c.JSON(http.StatusNotFound, map[string]string{"reason": "session not found"})
 		}
 		sessionId = cookie.Value
 		if err = sc.Db.DeleteSession(&db.Session{SessionId: sessionId}); err != nil {
@@ -26,6 +26,6 @@ func HandleLogout(sc context.ServerContext) echo.HandlerFunc {
 		}
 		// tell browser that cookie is expired and thus can be deleted
 		c.SetCookie(&http.Cookie{Name: "session", HttpOnly: true, Path: "/", Value: sessionId, Secure: true, Expires: time.Now()})
-		return c.Redirect(http.StatusSeeOther, "/")
+		return c.JSON(http.StatusSeeOther, map[string]string{"status": "OK"})
 	}
 }

server/router/router.go

@@ -25,7 +25,6 @@ func mountMiddleware(e *echo.Echo, sc ServerContext) {
 
 func addFrontendRoutes(e *echo.Echo, sc ServerContext) {
 	GET(e, sc, "/", handler.HandleIndex)
-	POST(e, sc, "/logout", handler.HandleLogout)
 	GET(e, sc, "/user",
 		handler.HandleUser,
 		middleware.SessionGuard)
@@ -44,6 +43,7 @@ func addFrontendRoutes(e *echo.Echo, sc ServerContext) {
 func addBackendRoutes(e *echo.Echo, sc ServerContext) {
 	GET(e, sc, "/api/login", handler.HandleLogin)
 	GET(e, sc, "/api/login/callback", handler.HandleLoginCallback)
+	POST(e, sc, "/api/logout", handler.HandleLogout)
 	GET(e, sc, "/api/session", handler.HandleCheckSession)
 	GET(e, sc, "/api/invoice/:id",
 		handler.HandleInvoiceStatus,

vue/src/components/UserView.vue

@@ -1,8 +1,32 @@
 <template>
-  <div v-if="session.pubkey">authenticated as {{  session.pubkey.slice(0,8) }}</div>
+  <div v-if="session.pubkey">
+    <div>authenticated as {{  session.pubkey.slice(0,8) }}</div>
+    <button class="my-1" @click="logout">logout</button>
+  </div>
 </template>
 
 <script setup>
 import { useSession } from '@/stores/session'
+import { useRouter } from 'vue-router'
 const session = useSession()
+const router = useRouter()
+
+const logout = async () => {
+  await session.logout()
+  router.push('/')
+}
+
 </script>
+
+<style scoped>
+button {
+  color: #ffffff;
+  border: solid 1px #8787A4;
+  padding: 0 1em;
+}
+
+button:hover {
+  color: #ffffff;
+  background: #8787A4;
+}
+</style>

vue/src/stores/session.js

@@ -37,5 +37,16 @@ export const useSession = defineStore('session', () => {
     return fetch(url, { credentials: 'include' }).then(r => r.json())
   }
 
-  return { pubkey, isAuthenticated, initialized, init, checkSession, login }
+  function logout () {
+    const url = window.origin + '/api/logout'
+    return fetch(url, { method: 'POST', credentials: 'include' })
+      .then(async r => {
+        const body = await r.json()
+        if (body.status === 'OK') {
+          pubkey.value = null
+        }
+      })
+  }
+
+  return { pubkey, isAuthenticated, initialized, init, checkSession, login, logout }
 })