From 856aa2a8a0b53f5a97908d9928892e3c29c4c82c Mon Sep 17 00:00:00 2001
From: NamesMT <dangquoctrung123@gmail.com>
Date: Thu, 6 Jun 2024 14:11:46 +0000
Subject: [PATCH] refactor: Auth API status should be rendered on client

---
 apps/frontend/app/pages/index.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/app/pages/index.vue b/apps/frontend/app/pages/index.vue
index 3b6dec2..a57eb34 100644
--- 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">