From 4cd0487bdcae52393583ec42a9938fecbc2e3d7f Mon Sep 17 00:00:00 2001
From: ClasWen <clas.wen@icloud.com>
Date: Sat, 24 Aug 2024 17:12:25 +0800
Subject: [PATCH] fix server side code

---
 src/components/NavigationUser.vue | 16 +++++++++++-----
 src/pages/callback.astro          |  4 ++--
 src/utils/auth.ts                 |  9 +++++----
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/NavigationUser.vue b/src/components/NavigationUser.vue
index c3f2e62..32853c0 100644
--- a/src/components/NavigationUser.vue
+++ b/src/components/NavigationUser.vue
@@ -1,29 +1,35 @@
 <script setup lang="ts">
+import { makeLogtoClient } from "../utils/auth"
 import { onMounted, ref } from "vue"
-import { logtoClient } from "../utils/auth"
 import type { IdTokenClaims } from "@logto/browser"
 import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"
+import type LogtoClient from "@logto/browser"
 
+const logtoClient = ref<LogtoClient>()
 const onSignIn = async () => {
-  logtoClient.signIn(import.meta.env.PUBLIC_LOGTO_CALLBACK_URL)
+  logtoClient.value?.signIn(import.meta.env.PUBLIC_LOGTO_CALLBACK_URL)
 }
 const onSignOut = async () => {
-  logtoClient.signOut(import.meta.env.PUBLIC_LOGTO_REDIRECT_URL)
+  logtoClient.value?.signOut(import.meta.env.PUBLIC_LOGTO_REDIRECT_URL)
 }
 
 const isAuthenticated = ref<boolean>()
 const userInfo = ref<IdTokenClaims>()
 const initAuth = async () => {
+  if(!logtoClient.value){
+    return
+  }
   try {
     await Promise.all([
-        userInfo.value = await logtoClient.getIdTokenClaims(),
-        isAuthenticated.value = await logtoClient.isAuthenticated()
+      (userInfo.value = await logtoClient.value.getIdTokenClaims()),
+      (isAuthenticated.value = await logtoClient.value.isAuthenticated()),
     ])
   } catch (error) {
     isAuthenticated.value = false
   }
 }
 onMounted(() => {
+  logtoClient.value = makeLogtoClient()
   initAuth()
 })
 </script>
diff --git a/src/pages/callback.astro b/src/pages/callback.astro
index ae40e4e..4f85f8d 100644
--- a/src/pages/callback.astro
+++ b/src/pages/callback.astro
@@ -1,7 +1,7 @@
 <div></div>
 
 <script>
-import { logtoClient } from "../utils/auth"
+import { makeLogtoClient } from "../utils/auth"
 import LogtoClient from "@logto/browser"
 
 const callbackHandler = async (logtoClient: LogtoClient) => {
@@ -18,6 +18,6 @@ const callbackHandler = async (logtoClient: LogtoClient) => {
     window.location.assign("/")
   }
 }
-
+const logtoClient = makeLogtoClient()
 callbackHandler(logtoClient)
 </script>
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index f236c05..445db32 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,6 +1,7 @@
 import LogtoClient from "@logto/browser"
 
-export const logtoClient = new LogtoClient({
-  endpoint: import.meta.env.PUBLIC_LOGTO_ENDPOINT,
-  appId: import.meta.env.PUBLIC_LOGTO_APP_ID,
-})
+export const makeLogtoClient = () =>
+  new LogtoClient({
+    endpoint: import.meta.env.PUBLIC_LOGTO_ENDPOINT,
+    appId: import.meta.env.PUBLIC_LOGTO_APP_ID,
+  })