feat: logout button

middleware/auth.global.ts

@@ -1,5 +1,6 @@
 import { useAuthStore } from "#imports";
 
+const validPaths = ["/login", "/lobby", "/rules", "/test"];
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const authStore = useAuthStore();
   const config = useRuntimeConfig();
@@ -37,17 +38,13 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   if (to.path.startsWith("/game")) {
     return;
   }
-  if (to.path == "/login") {
+  if (to.path == "/logout") {
+    // const session = useCookie("heron.session");
+    // session.value = null;
+    // return navigateTo("/lobby");
     return;
   }
-  if (to.path == "/lobby") {
-    return;
-  }
-  if (to.path == "/rules") {
-    return;
-  }
-
-  if (to.path == "/test") {
+  if (validPaths.includes(to.path)) {
     return;
   }
   // In a real app you would probably not redirect every route to `/`

pages/lobby.vue

@@ -74,10 +74,14 @@ onUnmounted(() => {
   <div class="background">
     <header>
       <ClientOnly>
+      <template v-if="authStore.logged">
         <GamePlayerIcon
-          v-if="authStore.logged"
+          
           :user="(authStore.selfUser as User)"
         />
+        <button @click="navigateTo('/logout')">Logout</button>
+      </template>
+        
         <button v-else @click="navigateTo('/login')">Login</button>
       </ClientOnly>
     </header>

pages/logout.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const route = useRoute();
+const config = useRuntimeConfig();
+
+const code = route.query.code;
+
+navigateTo(config.public.endpoint + "/logout", { external: true });
+</script>