fix: logout request (#235)

server/rpc/interceptors/validator.go

@@ -8,6 +8,8 @@ import (
 	"github.com/bufbuild/protovalidate-go"
 	"go.uber.org/zap"
 	"google.golang.org/protobuf/proto"
+
+	"github.com/crlssn/getstronger/server/pkg/xzap"
 )
 
 var _ connect.Interceptor = (*validator)(nil)
@@ -38,7 +40,7 @@ func (v *validator) WrapUnary(next connect.UnaryFunc) connect.UnaryFunc {
 		}
 
 		if err := v.validator.Validate(msg); err != nil {
-			v.log.Warn("invalid request", zap.Error(err))
+			v.log.Warn("invalid request", zap.Error(err), xzap.FieldRPC(req.Spec().Procedure))
 			return nil, connect.NewError(connect.CodeInvalidArgument, err)
 		}
 

web/src/http/interceptors.ts

@@ -1,8 +1,6 @@
 import type { Interceptor } from '@connectrpc/connect'
 
 import { useAuthStore } from '@/stores/auth'
-import { refreshAccessTokenOrLogout } from '@/jwt/jwt'
-import { Code, ConnectError } from '@connectrpc/connect'
 
 export const logger: Interceptor = (next) => async (req) => {
   console.debug(`sending message to ${req.url}`)
@@ -11,22 +9,6 @@ export const logger: Interceptor = (next) => async (req) => {
 
 export const auth: Interceptor = (next) => async (req) => {
   const authStore = useAuthStore()
-  try {
-    req.header.set('Authorization', `Bearer ${authStore.accessToken}`)
-    return next(req)
-  } catch (error) {
-    console.error('error in auth interceptor', error)
-    if (!(error instanceof ConnectError)) {
-      throw error
-    }
-
-    if (error.code !== Code.Unauthenticated) {
-      throw error
-    }
-
-    console.log('refreshing access token to attempt request again')
-    await refreshAccessTokenOrLogout()
-    req.header.set('Authorization', `Bearer ${authStore.accessToken}`)
-    return next(req)
-  }
+  req.header.set('Authorization', `Bearer ${authStore.accessToken}`)
+  return next(req)
 }

web/src/router/router.ts

@@ -1,7 +1,5 @@
 import { useAuthStore } from '@/stores/auth'
 import { usePageTitleStore } from '@/stores/pageTitle'
-import { logout as logoutRequest } from '@/http/requests.ts'
-import { useNotificationStore } from '@/stores/notifications.ts'
 import { createRouter, createWebHistory, type Router } from 'vue-router'
 import { useActionButton } from '@/stores/actionButton.ts'
 import { useNavTabs } from '@/stores/navTabs.ts'
@@ -151,9 +149,8 @@ const router: Router = createRouter({
       path: '/signup',
     },
     {
-      beforeEnter: [logout],
-      children: [],
-      component: null,
+      beforeEnter: [auth],
+      component: () => import('@/ui/auth/UserLogout.vue'),
       name: 'logout',
       path: '/logout',
     },
@@ -225,19 +222,6 @@ async function guest() {
   }
 }
 
-async function logout() {
-  await logoutRequest()
-  const authStore = useAuthStore()
-  authStore.logout()
-
-  const notificationStore = useNotificationStore()
-  notificationStore.unreadCount = 0
-
-  return {
-    path: '/login',
-  }
-}
-
 async function landing() {
   const authStore = useAuthStore()
   if (authStore.accessToken) return { path: '/home' }

web/src/stores/auth.ts

@@ -30,7 +30,7 @@ export const useAuthStore = defineStore(
     }
 
     const authorised = () => {
-      return accessToken.value !== ''
+      return userId.value !== '' && accessToken.value !== ''
     }
 
     return {

web/src/ui/auth/UserLogout.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { logout } from '@/http/requests.ts'
+import { useAuthStore } from '@/stores/auth.ts'
+import { useNotificationStore } from '@/stores/notifications.ts'
+import router from '@/router/router.ts'
+
+onMounted(async () => {
+  await logout()
+  const authStore = useAuthStore()
+  authStore.logout()
+
+  const notificationStore = useNotificationStore()
+  notificationStore.unreadCount = 0
+
+  await router.push('/login')
+})
+</script>
+
+<template></template>
+
+<style scoped></style>

web/src/ui/profile/ProfileView.vue

@@ -21,10 +21,10 @@ const fetchUser = async () => {
 </script>
 
 <template>
-  <div class="container">
+  <div class="container" v-if="user">
     <UserCircleIcon class="size-48 mx-auto text-gray-900" />
-    <h1>{{ user?.firstName }} {{ user?.lastName }}</h1>
-    <p>{{ user?.email }}</p>
+    <h1>{{ user.firstName }} {{ user.lastName }}</h1>
+    <p>{{ user.email }}</p>
   </div>
   <AppButton type="link" to="/logout" colour="red">Logout</AppButton>
 </template>