Improve login and authentication methods to adapt to the SSR mode.

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()

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
 }

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()
   }
 }
 

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)
         }
-
     }
 })

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"

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()
   }
 }
 

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)

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)
     }
 

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');
+}