restore frontend session

frontend/website/src/router/index.ts

@@ -37,21 +37,31 @@ const router = createRouter({
   ],
 })
 
-router.beforeEach((to) => {
+router.beforeEach(async (to) => {
   const authStore = useAuthStore()
 
   if (to.meta.requiresAuth && !authStore.isAuthenticated) {
-    return {
-      name: 'login',
-      query: {
-        redirect: to.fullPath,
-      },
+    const restoredSession = await authStore.fetchMe()
+    if (!restoredSession) {
+      return {
+        name: 'login',
+        query: {
+          redirect: to.fullPath,
+        },
+      }
     }
   }
 
-  if (to.meta.guestOnly && authStore.isAuthenticated) {
-    return {
-      name: 'dashboard',
+  if (to.meta.guestOnly) {
+    let restoredSession = authStore.isAuthenticated
+    if (!restoredSession) {
+      restoredSession = await authStore.fetchMe()
+    }
+
+    if (restoredSession) {
+      return {
+        name: 'dashboard',
+      }
     }
   }
 })

frontend/website/src/stores/auth.ts

@@ -1,10 +1,67 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
+import { z } from 'zod'
+
+import { API_BASE } from '@/utils/apiBase'
+
+export const authUserSchema = z.object({
+  id: z.number().int().positive(),
+  email: z.string().email(),
+})
+
+const meResponseSchema = z.object({
+  user: authUserSchema,
+})
+
+export type AuthUser = z.infer<typeof authUserSchema>
 
 export const useAuthStore = defineStore('auth', () => {
-  const isAuthenticated = ref(false)
+  const user = ref<AuthUser | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const isAuthenticated = computed(() => user.value !== null)
+
+  async function fetchMe(): Promise<boolean> {
+    loading.value = true
+    error.value = null
+
+    try {
+      const response = await fetch(`${API_BASE}/api/me`, {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+
+      if (response.status === 200) {
+        const responseBody: unknown = await response.json()
+        user.value = meResponseSchema.parse(responseBody).user
+
+        return true
+      }
+
+      user.value = null
+      if (response.status !== 401) {
+        error.value = 'Unable to restore session'
+      }
+
+      return false
+    } catch {
+      user.value = null
+      error.value = 'Unable to restore session'
+
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
 
   return {
+    user,
+    loading,
+    error,
     isAuthenticated,
+    fetchMe,
   }
 })

frontend/website/src/utils/apiBase.ts

@@ -0,0 +1,17 @@
+function resolveApiBase(): string {
+  const configuredApiUrl = import.meta.env.VITE_API_URL
+  if (configuredApiUrl === '') {
+    throw new Error('VITE_API_URL must be configured')
+  }
+
+  if (!import.meta.env.DEV) {
+    return configuredApiUrl
+  }
+
+  const apiUrl = new URL(configuredApiUrl)
+  apiUrl.hostname = window.location.hostname
+
+  return apiUrl.origin
+}
+
+export const API_BASE = resolveApiBase()