finish srs system

client/src/stores/auth.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 
 interface User {
 	id: number
@@ -12,6 +12,12 @@ export const useAuthStore = defineStore('auth', () => {
 	const loading = ref(false)
 	const error = ref<string | null>(null)
 
+	let refreshInterval: ReturnType<typeof setInterval> | null = null
+
+	/**
+	 * Fetch the current logged-in user from the server.
+	 * Tries refresh if access token expired.
+	 */
 	async function fetchUser() {
 		try {
 			loading.value = true
@@ -19,11 +25,17 @@ export const useAuthStore = defineStore('auth', () => {
 				method: 'GET',
 				credentials: 'include',
 			})
+
 			if (res.ok) {
 				const data = await res.json()
 				user.value = data.user
 				error.value = null
-			} else if (res.status === 401) {
+				startAutoRefresh()
+				return true
+			}
+
+			// Token expired or invalid → try refresh
+			if (res.status === 401) {
 				const refreshed = await refreshToken()
 				if (refreshed) return await fetchUser()
 				user.value = null
@@ -31,6 +43,7 @@ export const useAuthStore = defineStore('auth', () => {
 				throw new Error('Failed to fetch user')
 			}
 		} catch (err: any) {
+			console.warn('fetchUser failed:', err)
 			error.value = err.message
 			user.value = null
 		} finally {
@@ -38,22 +51,30 @@ export const useAuthStore = defineStore('auth', () => {
 		}
 	}
 
-	async function login(username: string, password: string) {
+	/**
+	 * Perform login and set cookies.
+	 */
+	async function login(username: string, password: string, remember: boolean) {
 		try {
 			loading.value = true
 			error.value = null
+
 			const res = await fetch('/api/v1/auth/login', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
 				credentials: 'include',
-				body: JSON.stringify({ username, password }),
+				body: JSON.stringify({ username, password, remember }),
 			})
+
 			if (!res.ok) throw new Error('Invalid credentials')
 			const data = await res.json()
+
 			if (data.ok && data.user) {
 				user.value = data.user
+				startAutoRefresh()
 				return true
 			}
+
 			throw new Error('Login failed')
 		} catch (err: any) {
 			error.value = err.message
@@ -63,24 +84,64 @@ export const useAuthStore = defineStore('auth', () => {
 		}
 	}
 
+	/**
+	 * Refresh the access token using refresh cookie.
+	 */
 	async function refreshToken() {
+		// Skip if no refresh cookie (expired or logged out)
 		if (!document.cookie.includes('refresh_token')) return false
+
 		try {
 			const res = await fetch('/api/v1/auth/refresh', {
 				method: 'POST',
 				credentials: 'include',
 			})
+
 			if (res.ok) {
-				console.info('Token refreshed')
+				console.info('[Auth] Token refreshed')
 				return true
 			}
-			console.warn('Token refresh failed')
+
+			console.warn('[Auth] Token refresh failed with status', res.status)
 			return false
-		} catch {
+		} catch (err) {
+			console.error('[Auth] Refresh error', err)
 			return false
 		}
 	}
 
+	/**
+	 * Automatically refresh tokens before expiry.
+	 */
+	function startAutoRefresh() {
+		if (refreshInterval) clearInterval(refreshInterval)
+
+		// Refresh every 7.5 minutes (half of 15m access token)
+		refreshInterval = setInterval(async () => {
+			if (!user.value) return
+			const success = await refreshToken()
+			if (!success) {
+				console.warn('[Auth] Auto-refresh failed, trying fetchUser')
+				const ok = await fetchUser()
+				if (!ok) {
+					console.warn('[Auth] Session expired, logging out')
+					await logout()
+				}
+			}
+		}, 7.5 * 60 * 1000)
+
+		// Also refresh immediately if tab comes back from background
+		document.addEventListener('visibilitychange', async () => {
+			if (document.visibilityState === 'visible' && user.value) {
+				const success = await refreshToken()
+				if (!success) await logout()
+			}
+		})
+	}
+
+	/**
+	 * Stop the refresh timer and logout from backend.
+	 */
 	async function logout() {
 		try {
 			await fetch('/api/v1/auth/logout', {
@@ -91,6 +152,8 @@ export const useAuthStore = defineStore('auth', () => {
 			console.warn('Logout error:', err)
 		} finally {
 			user.value = null
+			if (refreshInterval) clearInterval(refreshInterval)
+			refreshInterval = null
 		}
 	}