From 836df995d0a661e8f873a0caf6e5b6449a51acf8 Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Mon, 3 Apr 2023 22:04:52 +0800
Subject: [PATCH] Improve login and authentication methods to adapt to the SSR
 mode.

---
 components/Conversation.vue     |  2 +-
 composables/useAuthFetch.js     |  5 ++---
 layouts/default.vue             |  4 ++--
 middleware/auth.ts              | 12 ++++++++----
 pages/account/onboarding.vue    |  3 ++-
 pages/account/resetPassword.vue |  3 +--
 pages/account/signin.vue        |  1 -
 pages/account/signup.vue        |  4 +---
 utils/helper.js                 | 15 +++++++--------
 9 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/components/Conversation.vue b/components/Conversation.vue
index 81c8043..e8f050e 100644
--- a/components/Conversation.vue
+++ b/components/Conversation.vue
@@ -2,7 +2,7 @@
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
 import {addConversation} from "../utils/helper";
 
-const { $i18n, $auth } = useNuxtApp()
+const { $i18n } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const currentModel = useCurrentModel()
 const openaiApiKey = useApiKey()
diff --git a/composables/useAuthFetch.js b/composables/useAuthFetch.js
index 72e7d40..a1acd12 100644
--- a/composables/useAuthFetch.js
+++ b/composables/useAuthFetch.js
@@ -1,9 +1,8 @@
-export const useAuthFetch = async (url, options = {}) => {
-    const { $auth } = useNuxtApp()
 
+export const useAuthFetch = async (url, options = {}) => {
     const res = await useFetch(url, options)
     if (res.error.value && res.error.value.status === 401) {
-        await $auth.logout()
+        await logout()
     }
     return res
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 22b6f0e..e56ff2e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <script setup>
 import {useDisplay} from "vuetify";
 
-const { $i18n, $auth } = useNuxtApp()
+const { $i18n } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
 const colorMode = useColorMode()
 const drawer = ref(null)
@@ -94,7 +94,7 @@ const signOut = async () => {
     method: 'POST'
   })
   if (!error.value) {
-    await $auth.logout()
+    await logout()
   }
 }
 
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 381be97..0f8dc54 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,17 +1,21 @@
+
 export default defineNuxtRouteMiddleware(async (to, from) => {
+    // skip middleware on server
+    if (process.server) return
+
     const user = useUser()
     const signInPath = '/account/signin'
     if (!user.value && to.path !== signInPath) {
-        const error = await fetchUser()
-        console.log(error)
-        if (error) {
+        const { error, data} = await fetchUser()
+        if (error.value) {
             return navigateTo({
                 path: signInPath,
                 query: {
                     callback: encodeURIComponent(to.fullPath)
                 }
             })
+        } else {
+            setUser(data.value)
         }
-
     }
 })
diff --git a/pages/account/onboarding.vue b/pages/account/onboarding.vue
index 3e84952..d7accfc 100644
--- a/pages/account/onboarding.vue
+++ b/pages/account/onboarding.vue
@@ -7,6 +7,7 @@ const route = useRoute()
 const sending = ref(false)
 const resent = ref(false)
 const errorMsg = ref(null)
+const user = useUser()
 const resendEmail = async () => {
   errorMsg.value = null
   sending.value = true
@@ -54,7 +55,7 @@ onNuxtReady(() => {
               <div v-else>
                 <h2 class="text-h4">Verify your email</h2>
                 <p class="mt-5">
-                  We've sent a verification email to <strong>{{ $auth.user.email }}</strong>. <br>
+                  We've sent a verification email to <strong>{{ user.email }}</strong>. <br>
                   Please check your inbox and click the link to verify your email address.
                 </p>
                 <p v-if="errorMsg"
diff --git a/pages/account/resetPassword.vue b/pages/account/resetPassword.vue
index 3785013..4d9c4b2 100644
--- a/pages/account/resetPassword.vue
+++ b/pages/account/resetPassword.vue
@@ -24,7 +24,6 @@ const fieldErrors = ref({
   new_password1: '',
   new_password2: '',
 })
-const { $auth } = useNuxtApp()
 const errorMsg = ref(null)
 const resetForm = ref(null)
 const valid = ref(true)
@@ -37,7 +36,7 @@ const signOut = async () => {
     method: 'POST'
   })
   if (!error.value) {
-    await $auth.logout()
+    await logout()
   }
 }
 
diff --git a/pages/account/signin.vue b/pages/account/signin.vue
index ce964f5..ad8264e 100644
--- a/pages/account/signin.vue
+++ b/pages/account/signin.vue
@@ -84,7 +84,6 @@ const formRules = ref({
       v => !!v || 'Password is required'
   ]
 })
-const { $auth } = useNuxtApp()
 const errorMsg = ref(null)
 const signInForm = ref(null)
 const submitting = ref(false)
diff --git a/pages/account/signup.vue b/pages/account/signup.vue
index c67a6ab..d20f68c 100644
--- a/pages/account/signup.vue
+++ b/pages/account/signup.vue
@@ -3,8 +3,6 @@ definePageMeta({
   layout: 'vuetify-app'
 })
 
-const { $auth } = useNuxtApp()
-
 const formData = ref({
   username: '',
   email: '',
@@ -74,7 +72,7 @@ const submit = async () => {
         }
       }
     } else {
-      $auth.setUser(data.value.user)
+      setUser(data.value.user)
       navigateTo('/account/onboarding?email_verification_required='+data.value.email_verification_required)
     }
 
diff --git a/utils/helper.js b/utils/helper.js
index 62e4fae..2fc8e96 100644
--- a/utils/helper.js
+++ b/utils/helper.js
@@ -69,17 +69,16 @@ export const loadSettings = async () => {
 }
 
 export const fetchUser = async () => {
-    const { data, error } = await useFetch('/api/account/user/', {
-        // withCredentials: true
-    })
-    if (!error.value) {
-        setUser(data.value)
-        return null
-    }
-    return error
+    return useFetch('/api/account/user/')
 }
 
 export const setUser = (userData) => {
     const user = useUser()
     user.value = userData
+}
+
+export const logout = () => {
+    const user = useUser()
+    user.value = null
+    return navigateTo('/account/signin');
 }
\ No newline at end of file