feat: refresh token on initial page load if expired, or logout (#257)

* feat: refresh token on initial page load if expired, or logout

* chore: minor changes

src/components/navigation/HeaderNavigation.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { isBefore } from 'date-fns'
   import { watch } from 'vue'
 
   import DesktopNavbar from '~/components/navigation/header/DesktopNavbar.vue'
@@ -12,6 +13,17 @@
 
   const authStore = useAuthenticationStore()
 
+  if (authStore.RefreshExpiry && authStore.AccessExpiry) {
+    const refreshExpiresAt = new Date(authStore.RefreshExpiry)
+    const accessExpiresAt = new Date(authStore.AccessExpiry)
+
+    if (isBefore(refreshExpiresAt, Date.now())) {
+      authStore.logout()
+    } else if (isBefore(accessExpiresAt, Date.now())) {
+      authStore.refresh()
+    }
+  }
+
   const menuItems: MenuItem[] = [
     {
       key: '1',

src/models/authentication.ts

@@ -1,8 +1,8 @@
 export interface Authentication {
-  UserId: number
-  SteamId: string
-  AccessToken: string
-  AccessExpiry: string
-  RefreshToken: string
-  RefreshExpiry: string
+  UserId?: number
+  SteamId?: string
+  AccessToken?: string
+  AccessExpiry?: string
+  RefreshToken?: string
+  RefreshExpiry?: string
 }

src/services/gtr.ts

@@ -0,0 +1,16 @@
+import ky from 'ky'
+
+import type { Authentication } from '~/models/authentication'
+
+const api = ky.create({
+  prefixUrl: import.meta.env.PROD
+    ? 'https://auth.zeepkist-gtr.com/external/'
+    : '/api/auth/external/'
+})
+
+export const refresh = async (SteamId: string, RefreshToken: string) => {
+  const response = await api.post('refresh', {
+    json: { SteamId, RefreshToken }
+  })
+  return response.json() as Promise<Authentication>
+}

src/stores/authentication.ts

@@ -1,22 +1,23 @@
 import { defineStore } from 'pinia'
 
 import type { Authentication } from '~/models/authentication'
+import { refresh } from '~/services/gtr'
 import { getStorage, removeStorage, setStorage } from '~/utils'
 
 const id = 'authentication'
+const cache = getStorage<Authentication>(id)
 
 export const useAuthenticationStore = defineStore({
   id,
-  state: () => ({
-    ...(getStorage<Authentication>(id) ?? {
+  state: (): Authentication =>
+    cache || {
       UserId: undefined,
       SteamId: undefined,
       AccessToken: undefined,
       AccessExpiry: undefined,
       RefreshToken: undefined,
       RefreshExpiry: undefined
-    })
-  }),
+    },
   actions: {
     login(auth: Authentication) {
       this.UserId = auth.UserId
@@ -35,6 +36,19 @@ export const useAuthenticationStore = defineStore({
       this.AccessExpiry = undefined
       this.RefreshToken = undefined
       this.RefreshExpiry = undefined
+    },
+    async refresh() {
+      console.debug('Refreshing token')
+      if (this.RefreshExpiry && new Date(this.RefreshExpiry) < new Date()) {
+        console.debug('Refresh token expired, logging out')
+        this.logout()
+      } else if (this.RefreshToken && this.SteamId) {
+        console.debug('Refresh token valid, refreshing')
+        this.login(await refresh(this.SteamId, this.RefreshToken))
+      } else {
+        console.debug('No refresh token, logging out')
+        this.logout()
+      }
     }
   }
 })

vite.config.ts

@@ -5,6 +5,15 @@ import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      '/api/auth': {
+        target: 'https://auth.zeepkist-gtr.com',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/api\/auth/, '')
+      }
+    }
+  },
   plugins: [
     createVuePlugin({
       reactivityTransform: true