fix(auth): skip auth middleware on initial client load (#679)

* fix(auth): skip auth middleware on initial client load

* changeset

Author: qwerzl

.changeset/brown-dancers-wonder.md

@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Skip auth middleware on initial client load

app/middleware/auth.ts

@@ -1,19 +1,30 @@
 import { until } from '@vueuse/core'
 import { useClerk, useClerkProvider } from 'vue-clerk'
+import { clerkClient } from 'h3-clerk'
 
 export default defineNuxtRouteMiddleware(async () => {
   const nuxtApp = useNuxtApp()
   const clerk = useClerk()
   const { isClerkLoaded } = useClerkProvider()
 
-  // On server, check if the user isn't authenticated
+  // On server, check if the user isn't authenticated and if the user is binded
   // and redirect to /sign-in.
-  if (process.server && !nuxtApp.ssrContext?.event.context.auth?.userId)
-    return navigateTo('/sign-in')
+  if (import.meta.server) {
+    const userId = nuxtApp.ssrContext?.event.context.auth?.userId
+    if (!userId) {
+      return navigateTo('/sign-in')
+    }
+    if (!(await clerkClient.users.getUser(userId)).publicMetadata.binded) {
+      return navigateTo('/account/bind')
+    }
+  }
 
   // On client, check if clerk is loaded and if user isn't authenticated and if user is binded to a TSIMS account
   // and redirect to /sign-in.
-  if (process.client) {
+  if (import.meta.client) {
+    // Skip on initial client load because server must have loaded in this situation
+    if (nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
+
     await until(isClerkLoaded).toBe(true)
     if (clerk.loaded && !clerk.user?.id)
       return navigateTo('/sign-in')

app/middleware/authWithoutBind.ts

@@ -6,11 +6,11 @@ export default defineNuxtRouteMiddleware(() => {
 
   // On server, check if the user isn't authenticated
   // and redirect to /sign-in.
-  if (process.server && !nuxtApp.ssrContext?.event.context.auth?.userId)
+  if (import.meta.server && !nuxtApp.ssrContext?.event.context.auth?.userId)
     return navigateTo('/sign-in')
 
   // On client, check if clerk is loaded and if user isn't authenticated
   // and redirect to /sign-in.
-  if (process.client && clerk.loaded && !clerk.user?.id)
+  if (import.meta.client && clerk.loaded && !clerk.user?.id)
     return navigateTo('/sign-in')
 })

app/middleware/public.ts

@@ -7,14 +7,14 @@ export default defineNuxtRouteMiddleware(() => {
   // On server, check if the user is authenticated
   // and redirect to /profile.
   if (
-    process.server
+    import.meta.server
     && nuxtApp.ssrContext?.event.context.auth?.userId
   ) {
     return navigateTo('/profile')
   }
 
   // On client, check if clerk is loaded and if user is authenticated
   // and redirect to /profile.
-  if (process.client && clerk.loaded && clerk.user?.id)
+  if (import.meta.client && clerk.loaded && clerk.user?.id)
     return navigateTo('/profile')
 })