support ssr

composables/states.js

@@ -9,4 +9,6 @@ export const useConversation = () => useState('conversation', () => getDefaultCo
 
 export const useConversations = () => useState('conversations', () => [])
 
-export const useSettings = () => useState('settings', () => {})
+export const useSettings = () => useState('settings', () => {})
+
+export const useUser = () => useState('user', () => null)

layouts/default.vue

@@ -107,6 +107,8 @@ watchEffect(() => {
   }
 })
 
+const user = useUser()
+
 onMounted(async () => {
   loadConversations()
   loadSettings()
@@ -125,11 +127,12 @@ onMounted(async () => {
     >
       <template
           v-slot:prepend
+          v-if="user"
       >
         <v-list>
           <v-list-item
-              :title="$auth.user.username"
+              :title="user.username"
-              :subtitle="$auth.user.email"
+              :subtitle="user.email"
           >
             <template v-slot:prepend>
               <v-icon

middleware/auth.ts

@@ -0,0 +1,17 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+    const user = useUser()
+    const signInPath = '/account/signin'
+    if (!user.value && to.path !== signInPath) {
+        const error = await fetchUser()
+        console.log(error)
+        if (error) {
+            return navigateTo({
+                path: signInPath,
+                query: {
+                    callback: encodeURIComponent(to.fullPath)
+                }
+            })
+        }
+
+    }
+})

nuxt.config.ts

@@ -2,8 +2,8 @@
 const appName = process.env.NUXT_PUBLIC_APP_NAME ?? 'ChatGPT UI'
 
 export default defineNuxtConfig({
-    dev: false,
+    debug: process.env.NODE_ENV !== 'production',
-    ssr: false,
+    ssr: true,
     app: {
         head: {
             title: appName,
@@ -73,7 +73,6 @@ export default defineNuxtConfig({
         devProxy: {
             "/api": {
                 target: process.env.NUXT_DEV_SERVER ?? 'http://localhost:8000/api',
-                prependPath: true,
                 changeOrigin: true,
             }
 

package.json

@@ -12,7 +12,7 @@
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/i18n": "^8.0.0-beta.9",
     "material-design-icons-iconfont": "^6.7.0",
-    "nuxt": "^3.2.0"
+    "nuxt": "^3.3.3"
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",

pages/account/signin.vue

@@ -67,6 +67,8 @@
 </template>
 
 <script setup>
+import {useUser} from "~/composables/states";
+
 definePageMeta({
   layout: 'vuetify-app'
 })
@@ -85,7 +87,6 @@ const formRules = ref({
 const { $auth } = useNuxtApp()
 const errorMsg = ref(null)
 const signInForm = ref(null)
-const valid = ref(true)
 const submitting = ref(false)
 const route = useRoute()
 const passwordInputType = ref('password')
@@ -99,6 +100,7 @@ const submit = async () => {
       method: 'POST',
       body: JSON.stringify(formData.value)
     })
+    submitting.value = false
     if (error.value) {
       if (error.value.status === 400) {
         if (error.value.data.non_field_errors) {
@@ -108,10 +110,10 @@ const submit = async () => {
         errorMsg.value = 'Something went wrong. Please try again.'
       }
     } else {
-      $auth.setUser(data.value.user)
+      setUser(data.value.user)
-      navigateTo(route.query.callback || '/')
+      const callback = route.query.callback ? decodeURIComponent(route.query.callback) : '/'
+      await navigateTo(callback)
     }
-    submitting.value = false
   }
 }
 

plugins/auth.js

@@ -1,71 +0,0 @@
-
-const AUTH_ROUTE = {
-    home: '/',
-    login: '/account/signin',
-}
-
-const ENDPOINTS = {
-    login: {
-        url: '/api/account/login/'
-    },
-    user: {
-        url: '/api/account/user/'
-    }
-}
-
-
-export default defineNuxtPlugin(() => {
-
-    class Auth {
-        constructor() {
-            this.loginIn = useState('loginIn', () => false)
-            this.user = useState('user')
-        }
-
-        async logout () {
-            this.loginIn.value = false
-            this.user.value = null
-            await this.redirectToLogin()
-        }
-
-        setUser (user) {
-            this.user = user
-            this.loginIn.value = true
-        }
-
-        async fetchUser () {
-            const { data, error } = await useFetch(ENDPOINTS.user.url, {
-                // withCredentials: true
-            })
-            if (!error.value) {
-                this.setUser(data.value)
-                return null
-            }
-            return error
-        }
-
-        async redirectToLogin (callback) {
-            return await navigateTo(
-                AUTH_ROUTE.login + '?callback=' + encodeURIComponent(callback || AUTH_ROUTE.home)
-            )
-        }
-
-    }
-
-    const auth = new Auth()
-
-    addRouteMiddleware('auth', async (to, from) => {
-        if (!auth.loginIn.value) {
-            const error = await auth.fetchUser()
-            if (error) {
-                return await auth.redirectToLogin(to.fullPath)
-            }
-        }
-    })
-
-    return {
-        provide: {
-            auth
-        }
-    }
-})

utils/helper.js

@@ -66,4 +66,20 @@ export const loadSettings = async () => {
     if (!error.value) {
         settings.value = transformData(data.value)
     }
+}
+
+export const fetchUser = async () => {
+    const { data, error } = await useFetch('/api/account/user/', {
+        // withCredentials: true
+    })
+    if (!error.value) {
+        setUser(data.value)
+        return null
+    }
+    return error
+}
+
+export const setUser = (userData) => {
+    const user = useUser()
+    user.value = userData
 }

utils/localStorage.js

@@ -1,6 +1,6 @@
-import {MODELS} from "~/utils/enums";
 
 const get = (key) => {
+    if (process.server) return
     let val = localStorage.getItem(key)
     if (val) {
         val = JSON.parse(val)
@@ -9,6 +9,7 @@ const get = (key) => {
 }
 
 const set = (key, val) => {
+    if (process.server) return
     localStorage.setItem(key, JSON.stringify(val))
 }