refactor: Auth API status should be rendered on client

NamesMT · Jun 6, 2024 · 856aa2a · 856aa2a
1 parent ec4c763
commit 856aa2a
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/apps/frontend/app/pages/index.vue b/apps/frontend/app/pages/index.vue
@@ -100,15 +100,20 @@ const authApiStatus = $auth.health ? 'Activated' : 'Not found'
     </div>
 
     <div>
-      <div>Auth API status: {{ authApiStatus }}</div>
-      <template v-if="$auth && authApiStatus === 'Activated'">
-        <div>User information:</div>
-        <pre class="rounded bg-black p-2 px-4 text-left text-white">{{ $auth }}</pre>
-        <div class="mt-2">
-          <Button v-if="$auth.loggedIn" label="Sign-out" @pointerdown="navigateTo(`${runtimeConfig.public.backendUrl}/api/auth/logout`, { external: true })" />
-          <Button v-else label="Sign-in" @pointerdown="navigateTo(`${runtimeConfig.public.backendUrl}/api/auth/login`, { external: true })" />
-        </div>
-      </template>
+      <ClientOnly>
+        <template #fallback>
+          <div>Auth API status: ...</div>
+        </template>
+        <div>Auth API status: {{ authApiStatus }}</div>
+        <template v-if="$auth.health">
+          <div>User information:</div>
+          <pre class="rounded bg-black p-2 px-4 text-left text-white">{{ $auth }}</pre>
+          <div class="mt-2">
+            <Button v-if="$auth.loggedIn" label="Sign-out" @pointerdown="navigateTo(`${runtimeConfig.public.backendUrl}/api/auth/logout`, { external: true })" />
+            <Button v-else label="Sign-in" @pointerdown="navigateTo(`${runtimeConfig.public.backendUrl}/api/auth/login`, { external: true })" />
+          </div>
+        </template>
+      </ClientOnly>
     </div>
 
     <Carousel class="relative max-w-xs w-full">