From 3b6c48a776cbabf87cb894c1de8b92942dc11def Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Thu, 2 Mar 2023 23:10:56 +0800
Subject: [PATCH 1/3] account

---
 nuxt.config.ts               |   3 +-
 pages/account/onboarding.vue |  66 +++++++++++++++
 pages/account/signin.vue     |  98 ++++++++++++++++++++++
 pages/account/signup.vue     | 158 +++++++++++++++++++++++++++++++++++
 plugins/auth.js              |  18 ++--
 5 files changed, 334 insertions(+), 9 deletions(-)
 create mode 100644 pages/account/onboarding.vue
 create mode 100644 pages/account/signin.vue
 create mode 100644 pages/account/signup.vue

diff --git a/nuxt.config.ts b/nuxt.config.ts
index a7ca469..05a8ca8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -53,7 +53,8 @@ export default defineNuxtConfig({
         devProxy: {
             "/api": {
                 target: "http://localhost:8000/api",
-                prependPath: true
+                prependPath: true,
+                changeOrigin: true
             }
 
         }
diff --git a/pages/account/onboarding.vue b/pages/account/onboarding.vue
new file mode 100644
index 0000000..687faba
--- /dev/null
+++ b/pages/account/onboarding.vue
@@ -0,0 +1,66 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app',
+  middleware: ['auth']
+})
+const email = ref('')
+const sending = ref(false)
+const resendEmail = async () => {
+  sending.value = true
+  const { data, error } = await useFetch('/api/account/resend-verification-email/', {
+    method: 'POST'
+  })
+  if (error.value) {
+    console.log(error.value)
+  }
+  sending.value = false
+}
+</script>
+
+<template>
+  <v-card
+      class="h-100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="8"
+            offset-md="2"
+        >
+          <v-card
+              class="mt-20vh"
+              elevation="0"
+          >
+            <div class="text-center">
+              <h2 class="text-h4">Verify your email</h2>
+              <p class="text-body-2 mt-5">
+                We've sent a verification email to <strong>{{ email }}</strong>. <br>
+                Please check your inbox and click the link to verify your email address.
+              </p>
+              <v-btn
+                  variant="text"
+                  class="mt-5"
+                  color="primary"
+                  :loading="sending"
+                  @click="resendEmail"
+              >
+                Resend email
+              </v-btn>
+            </div>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<style scoped>
+.h-100vh {
+  height: 100vh;
+}
+.mt-20vh {
+  margin-top: 20vh;
+}
+</style>
\ No newline at end of file
diff --git a/pages/account/signin.vue b/pages/account/signin.vue
new file mode 100644
index 0000000..fd78573
--- /dev/null
+++ b/pages/account/signin.vue
@@ -0,0 +1,98 @@
+<template>
+  <v-card
+      style="height: 100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="6"
+            offset-md="3"
+        >
+          <v-card
+              class="mt-15"
+              elevation="0"
+          >
+            <div class="text-center text-h4">Sign in</div>
+            <v-card-text>
+              <v-form ref="signInForm">
+                <v-text-field
+                    v-model="formData.username"
+                    :rules="formRules.username"
+                    label="User name"
+                    variant="underlined"
+                ></v-text-field>
+                <v-text-field
+                    v-model="formData.password"
+                    :rules="formRules.password"
+                    label="Password"
+                    variant="underlined"
+                ></v-text-field>
+
+              </v-form>
+
+              <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
+
+              <v-btn
+                  block
+                  color="primary"
+                  :loading="submitting"
+                  @click="submit"
+                  class="mt-5"
+              >Submit</v-btn>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app'
+})
+const formData = ref({
+  username: '',
+  password: ''
+})
+const formRules = ref({
+  username: [
+      v => !!v || 'Username is required'
+  ],
+  password: [
+      v => !!v || 'Password is required'
+  ]
+})
+const { $auth } = useNuxtApp()
+const errorMsg = ref(null)
+const signInForm = ref(null)
+const valid = ref(true)
+const submitting = ref(false)
+const submit = async () => {
+  errorMsg.value = null
+  const { valid } = await signInForm.value.validate()
+  if (valid) {
+    submitting.value = true
+    const { data, error } = await useFetch('/api/account/login/', {
+      method: 'POST',
+      credentials: 'omit',
+      body: JSON.stringify(formData.value)
+    })
+    if (error.value) {
+      if (error.value.status === 400) {
+        if (error.value.data.non_field_errors) {
+          errorMsg.value = error.value.data.non_field_errors[0]
+        }
+      } else {
+        errorMsg.value = 'Something went wrong. Please try again.'
+      }
+    } else {
+    }
+    submitting.value = false
+  }
+}
+
+</script>
\ No newline at end of file
diff --git a/pages/account/signup.vue b/pages/account/signup.vue
new file mode 100644
index 0000000..5001885
--- /dev/null
+++ b/pages/account/signup.vue
@@ -0,0 +1,158 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app'
+})
+
+const formData = ref({
+  username: '',
+  email: '',
+  password1: '',
+  password2: '',
+})
+
+const fieldErrors = ref({
+  username: '',
+  email: '',
+  password1: '',
+  password2: '',
+})
+
+const formRules = ref({
+  username: [
+    v => !!v || 'Please enter your username',
+    v => v.length >= 4 || 'Username must be at least 4 characters'
+  ],
+  email: [
+    v => !!v || 'Please enter your e-mail address',
+    v => /.+@.+\..+/.test(v) || 'E-mail address must be valid'
+  ],
+  password1: [
+    v => !!v || 'Please enter your password',
+    v => v.length >= 8 || 'Password must be at least 8 characters'
+  ],
+  password2: [
+    v => !!v || 'Please confirm your password',
+    v => v.length >= 8 || 'Password must be at least 8 characters',
+    v => v === formData.value.password1 || 'Confirm password must match password'
+  ]
+})
+
+const submitting = ref(false)
+const errorMsg = ref(null)
+const signUpForm = ref(null)
+
+const submit = async () => {
+  errorMsg.value = null
+  const { valid } = await signUpForm.value.validate()
+  if (valid) {
+    submitting.value = true
+
+    const { data, error } = await useFetch('/api/account/registration/', {
+      method: 'POST',
+      body: JSON.stringify(formData.value)
+    })
+
+    if (error.value) {
+      if (error.value.status === 400) {
+        for (const key in formData.value) {
+          if (error.value.data[key]) {
+            fieldErrors.value[key] = error.value.data[key][0]
+          }
+        }
+        if (error.value.data.non_field_errors) {
+          errorMsg.value = error.value.data.non_field_errors[0]
+        }
+      } else {
+        errorMsg.value = 'Something went wrong. Please try again.'
+      }
+    } else {
+      navigateTo('/account/onboarding')
+    }
+
+    submitting.value = false
+  }
+}
+
+const handleFieldUpdate = (field) => {
+  // fieldErrors.value[field] = ''
+}
+</script>
+
+<template>
+  <v-card
+      style="height: 100vh"
+  >
+    <v-container>
+      <v-row>
+        <v-col
+            sm="9"
+            offset-sm="1"
+            md="6"
+            offset-md="3"
+        >
+          <v-card
+              class="mt-15"
+              elevation="0"
+          >
+            <div class="text-center text-h4">Create your account</div>
+            <v-card-text>
+              <v-form ref="signUpForm" class="mt-5">
+                <v-text-field
+                    v-model="formData.username"
+                    :rules="formRules.username"
+                    :error-messages="fieldErrors.username"
+                    label="User name"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('username')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.email"
+                    :rules="formRules.email"
+                    :error-messages="fieldErrors.email"
+                    label="Email"
+                    variant="underlined"
+                    @@update:modelValue="handleFieldUpdate('email')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.password1"
+                    :rules="formRules.password1"
+                    :error-messages="fieldErrors.password1"
+                    label="Password"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('password1')"
+                    clearable
+                ></v-text-field>
+
+                <v-text-field
+                    v-model="formData.password2"
+                    :rules="formRules.password2"
+                    :error-messages="fieldErrors.password2"
+                    label="Confirm password"
+                    variant="underlined"
+                    @update:modelValue="handleFieldUpdate('password2')"
+                    clearable
+                ></v-text-field>
+
+              </v-form>
+
+              <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
+
+              <v-btn
+                  block
+                  size="large"
+                  color="primary"
+                  :loading="submitting"
+                  @click="submit"
+                  class="mt-5"
+              >Submit</v-btn>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
\ No newline at end of file
diff --git a/plugins/auth.js b/plugins/auth.js
index 0761434..afb227f 100644
--- a/plugins/auth.js
+++ b/plugins/auth.js
@@ -1,7 +1,7 @@
 
 const AUTH_ROUTE = {
     home: '/',
-    login: '/login'
+    login: '/account/signin',
 }
 
 const COOKIE_OPTIONS = {
@@ -13,13 +13,13 @@ const COOKIE_OPTIONS = {
 
 const ENDPOINTS = {
     login: {
-        url: '/api/auth/signin'
+        url: '/api/account/login/'
     },
     refresh: {
         url: '/api/auth/token/refresh'
     },
     user: {
-        url: '/api/auth/session'
+        url: '/api/account/user/'
     }
 }
 
@@ -68,7 +68,9 @@ export default defineNuxtPlugin(() => {
         }
 
         async fetchUser () {
-            const { data, error } = await useAuthFetch(ENDPOINTS.user.url)
+            const { data, error } = await useFetch(ENDPOINTS.user.url, {
+                // withCredentials: true
+            })
             if (!error.value) {
                 this.user = data.value
                 this.loginIn.value = true
@@ -117,10 +119,10 @@ export default defineNuxtPlugin(() => {
 
     addRouteMiddleware('auth', async (to, from) => {
         if (!auth.loginIn.value) {
-            const token = await auth.retrieveToken()
-            if (!token) {
-                return await auth.redirectToLogin()
-            }
+            // const token = await auth.retrieveToken()
+            // if (!token) {
+            //     return await auth.redirectToLogin()
+            // }
             const error = await auth.fetchUser()
             if (error) {
                 return await auth.redirectToLogin()

From ef6657187a1104a210202ee4d7a40dce53033ebf Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Fri, 3 Mar 2023 00:10:50 +0800
Subject: [PATCH 2/3] account

---
 nuxt.config.ts           | 2 +-
 pages/account/signin.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 05a8ca8..9e747d1 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -54,7 +54,7 @@ export default defineNuxtConfig({
             "/api": {
                 target: "http://localhost:8000/api",
                 prependPath: true,
-                changeOrigin: true
+                changeOrigin: true,
             }
 
         }
diff --git a/pages/account/signin.vue b/pages/account/signin.vue
index fd78573..b96b579 100644
--- a/pages/account/signin.vue
+++ b/pages/account/signin.vue
@@ -78,7 +78,6 @@ const submit = async () => {
     submitting.value = true
     const { data, error } = await useFetch('/api/account/login/', {
       method: 'POST',
-      credentials: 'omit',
       body: JSON.stringify(formData.value)
     })
     if (error.value) {

From f166581a73c85204d3da2aeecbf4ca95c69429a1 Mon Sep 17 00:00:00 2001
From: Rafi <rafiwx@gmail.com>
Date: Fri, 3 Mar 2023 18:50:02 +0800
Subject: [PATCH 3/3] email verification

---
 composables/useAuthFetch.js    |  12 ----
 docker-compose.yml             |   6 ++
 pages/account/onboarding.vue   |  27 +++++++--
 pages/account/signin.vue       |  29 +++++++---
 pages/account/signup.vue       |  30 +++++++---
 pages/account/verify-email.vue | 100 +++++++++++++++++++++++++++++++++
 pages/index.vue                |   4 +-
 pages/login.vue                |  87 ----------------------------
 plugins/auth.js                |  89 ++++-------------------------
 utils/helper.js                |   4 +-
 10 files changed, 185 insertions(+), 203 deletions(-)
 create mode 100644 pages/account/verify-email.vue
 delete mode 100644 pages/login.vue

diff --git a/composables/useAuthFetch.js b/composables/useAuthFetch.js
index 9e95d4a..72e7d40 100644
--- a/composables/useAuthFetch.js
+++ b/composables/useAuthFetch.js
@@ -1,18 +1,6 @@
 export const useAuthFetch = async (url, options = {}) => {
     const { $auth } = useNuxtApp()
 
-    const token = await $auth.retrieveToken()
-
-    if (!token) {
-        return await $auth.redirectToLogin()
-    }
-
-    options = Object.assign(options, {
-        headers: {
-            'Authorization': 'Bearer ' + token
-        }
-    })
-
     const res = await useFetch(url, options)
     if (res.error.value && res.error.value.status === 401) {
         await $auth.logout()
diff --git a/docker-compose.yml b/docker-compose.yml
index 8083a24..15320e3 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,6 +17,12 @@ services:
       - DJANGO_SUPERUSER_USERNAME=admin # default superuser name
       - DJANGO_SUPERUSER_PASSWORD=password # default superuser password
       - DJANGO_SUPERUSER_EMAIL=admin@example.com # default superuser email
+      # If you want to use the email verification function, you need to configure the following parameters
+#      - EMAIL_HOST=SMTP server address
+#      - EMAIL_PORT=SMTP server port
+#      - EMAIL_HOST_USER=
+#      - EMAIL_HOST_PASSWORD=
+#      - EMAIL_USE_TLS=True
     ports:
       - '8000:8000'
     networks:
diff --git a/pages/account/onboarding.vue b/pages/account/onboarding.vue
index 687faba..cf34e02 100644
--- a/pages/account/onboarding.vue
+++ b/pages/account/onboarding.vue
@@ -3,18 +3,29 @@ definePageMeta({
   layout: 'vuetify-app',
   middleware: ['auth']
 })
-const email = ref('')
+const route = useRoute()
 const sending = ref(false)
+const resent = ref(false)
+const errorMsg = ref(null)
 const resendEmail = async () => {
+  errorMsg.value = null
   sending.value = true
-  const { data, error } = await useFetch('/api/account/resend-verification-email/', {
-    method: 'POST'
+  const { data, error } = await useFetch('/api/account/registration/resend-email/', {
+    method: 'POST',
   })
   if (error.value) {
-    console.log(error.value)
+    errorMsg.value = 'Something went wrong. Please try again later.'
+  } else {
+    resent.value = true
   }
   sending.value = false
 }
+
+onNuxtReady(() => {
+  if (route.query.resend) {
+    resendEmail()
+  }
+})
 </script>
 
 <template>
@@ -36,17 +47,21 @@ const resendEmail = async () => {
             <div class="text-center">
               <h2 class="text-h4">Verify your email</h2>
               <p class="text-body-2 mt-5">
-                We've sent a verification email to <strong>{{ email }}</strong>. <br>
+                We've sent a verification email to <strong>{{ $auth.user.email }}</strong>. <br>
                 Please check your inbox and click the link to verify your email address.
               </p>
+              <p v-if="errorMsg"
+                 class="text-red"
+              >{{ errorMsg }}</p>
               <v-btn
                   variant="text"
                   class="mt-5"
                   color="primary"
                   :loading="sending"
                   @click="resendEmail"
+                  :disabled="resent"
               >
-                Resend email
+                {{ resent ? 'Resent' : 'Resend email'}}
               </v-btn>
             </div>
           </v-card>
diff --git a/pages/account/signin.vue b/pages/account/signin.vue
index b96b579..1eb2368 100644
--- a/pages/account/signin.vue
+++ b/pages/account/signin.vue
@@ -28,19 +28,30 @@
                     :rules="formRules.password"
                     label="Password"
                     variant="underlined"
+                    @keyup.enter="submit"
                 ></v-text-field>
 
               </v-form>
 
               <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
 
-              <v-btn
-                  block
-                  color="primary"
-                  :loading="submitting"
-                  @click="submit"
-                  class="mt-5"
-              >Submit</v-btn>
+              <div
+                class="mt-5 d-flex justify-space-between"
+              >
+                <v-btn
+                    @click="navigateTo('/account/signup')"
+                    variant="text"
+                    color="primary"
+                >Create account</v-btn>
+
+                <v-btn
+                    color="primary"
+                    :loading="submitting"
+                    @click="submit"
+                    size="large"
+                >Submit</v-btn>
+              </div>
+
             </v-card-text>
           </v-card>
         </v-col>
@@ -71,6 +82,8 @@ const errorMsg = ref(null)
 const signInForm = ref(null)
 const valid = ref(true)
 const submitting = ref(false)
+const route = useRoute()
+
 const submit = async () => {
   errorMsg.value = null
   const { valid } = await signInForm.value.validate()
@@ -89,6 +102,8 @@ const submit = async () => {
         errorMsg.value = 'Something went wrong. Please try again.'
       }
     } else {
+      $auth.setUser(data.value.user)
+      navigateTo(route.query.callback || '/')
     }
     submitting.value = false
   }
diff --git a/pages/account/signup.vue b/pages/account/signup.vue
index 5001885..b01f4f8 100644
--- a/pages/account/signup.vue
+++ b/pages/account/signup.vue
@@ -3,6 +3,8 @@ definePageMeta({
   layout: 'vuetify-app'
 })
 
+const { $auth } = useNuxtApp()
+
 const formData = ref({
   username: '',
   email: '',
@@ -52,6 +54,8 @@ const submit = async () => {
       body: JSON.stringify(formData.value)
     })
 
+    console.log(error.value)
+
     if (error.value) {
       if (error.value.status === 400) {
         for (const key in formData.value) {
@@ -66,6 +70,7 @@ const submit = async () => {
         errorMsg.value = 'Something went wrong. Please try again.'
       }
     } else {
+      $auth.setUser(data.value.user)
       navigateTo('/account/onboarding')
     }
 
@@ -141,14 +146,23 @@ const handleFieldUpdate = (field) => {
 
               <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
 
-              <v-btn
-                  block
-                  size="large"
-                  color="primary"
-                  :loading="submitting"
-                  @click="submit"
-                  class="mt-5"
-              >Submit</v-btn>
+              <div
+                  class="mt-5 d-flex justify-space-between"
+              >
+                <v-btn
+                    @click="navigateTo('/account/signin')"
+                    variant="text"
+                    color="primary"
+                >Sign in instead</v-btn>
+
+                <v-btn
+                    size="large"
+                    color="primary"
+                    :loading="submitting"
+                    @click="submit"
+                >Submit</v-btn>
+              </div>
+
             </v-card-text>
           </v-card>
         </v-col>
diff --git a/pages/account/verify-email.vue b/pages/account/verify-email.vue
new file mode 100644
index 0000000..d5e79e6
--- /dev/null
+++ b/pages/account/verify-email.vue
@@ -0,0 +1,100 @@
+<script setup>
+definePageMeta({
+  layout: 'vuetify-app',
+  path: '/account/verify-email/:token',
+  title: 'Verify Email'
+})
+const route = useRoute()
+const verifying = ref(false)
+const status = ref('')
+
+const verifyEmail = async () => {
+  verifying.value = true
+  const { data, error } = await useFetch(`/api/account/registration/verify-email/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      key: route.params.token
+    })
+  })
+  if (!error.value && data.value.detail === 'ok') {
+    status.value = 'success'
+  } else {
+    status.value = 'error'
+  }
+  verifying.value = false
+}
+
+onNuxtReady(() => {
+  verifyEmail()
+})
+</script>
+
+<template>
+  <v-container class="h-100vh">
+    <v-row
+        class="fill-height"
+        align-content="center"
+        justify="center"
+    >
+      <v-col
+          class="text-subtitle-1 text-center"
+          cols="12"
+          v-if="verifying"
+      >
+        Verifying your email
+      </v-col>
+      <v-col
+          cols="6"
+          v-if="verifying"
+      >
+        <v-progress-linear
+            color="deep-purple-accent-4"
+            indeterminate
+            rounded
+            height="6"
+        ></v-progress-linear>
+      </v-col>
+      <v-col
+          cols="12"
+          v-if="status === 'success'"
+          class="text-center"
+      >
+        <h2 class="text-h4">
+          Your email has been verified.
+        </h2>
+        <p class="text-subtitle-1">
+          You can now sign in to your account.
+        </p>
+        <v-btn
+            color="primary"
+            variant="text"
+            @click="navigateTo('/account/login')"
+        >
+          Sign in
+        </v-btn>
+      </v-col>
+      <v-col
+          cols="12"
+          v-if="status === 'error'"
+          class="text-center"
+      >
+        <h2 class="text-h4">
+          There was an error verifying your email.
+        </h2>
+        <v-btn
+            color="primary"
+            variant="text"
+            @click="navigateTo('/account/onboarding?resend=1')"
+        >
+          Resend email
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.h-100vh {
+  height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 1972cf4..f6dd049 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,16 +18,14 @@ const abortFetch = () => {
   fetchingResponse.value = false
 }
 const fetchReply = async (message, parentMessageId) => {
-  const token = await $auth.retrieveToken()
   ctrl = new AbortController()
   try {
-    await fetchEventSource('/api/conversation', {
+    await fetchEventSource('/api/conversation/', {
       signal: ctrl.signal,
       method: 'POST',
       headers: {
         'accept': 'application/json',
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`
       },
       body: JSON.stringify({
         model: currentModel.value,
diff --git a/pages/login.vue b/pages/login.vue
deleted file mode 100644
index 7676a39..0000000
--- a/pages/login.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <v-card
-      color="red-lighten-5"
-      style="height: 100vh"
-  >
-    <v-container>
-      <v-row>
-        <v-col
-            sm="9"
-            offset-sm="1"
-            md="8"
-            offset-md="2"
-        >
-          <v-card
-              class="mt-15"
-          >
-            <v-card-title>Sign in</v-card-title>
-            <v-card-text>
-              <v-form ref="signInForm">
-                <v-text-field
-                    v-model="formData.username"
-                    :rules="formRules.username"
-                    label="User name"
-                    variant="underlined"
-                ></v-text-field>
-                <v-text-field
-                    v-model="formData.password"
-                    :rules="formRules.password"
-                    label="Password"
-                    variant="underlined"
-                ></v-text-field>
-                <div v-if="errorMsg" class="text-red">{{ errorMsg }}</div>
-                <v-card-actions>
-                  <v-spacer></v-spacer>
-                  <v-btn
-                      variant="elevated"
-                      color="primary"
-                      :loading="submitting"
-                      @click="submit"
-                  >Submit</v-btn>
-                </v-card-actions>
-              </v-form>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-
-</template>
-
-<script setup>
-definePageMeta({
-  layout: 'vuetify-app'
-})
-const formData = ref({
-  username: '',
-  password: ''
-})
-const formRules = ref({
-  username: [
-      v => !!v || 'Username is required'
-  ],
-  password: [
-      v => !!v || 'Password is required'
-  ]
-})
-const { $auth } = useNuxtApp()
-const errorMsg = ref(null)
-const signInForm = ref(null)
-const valid = ref(true)
-const submitting = ref(false)
-const submit = async () => {
-  errorMsg.value = null
-  const { valid } = await signInForm.value.validate()
-  if (valid) {
-    submitting.value = true
-    const error = await $auth.login(formData.value.username, formData.value.password)
-    submitting.value = false
-    if (!error) {
-      return await $auth.callback()
-    }
-    errorMsg.value = error
-  }
-}
-
-</script>
\ No newline at end of file
diff --git a/plugins/auth.js b/plugins/auth.js
index afb227f..0288d03 100644
--- a/plugins/auth.js
+++ b/plugins/auth.js
@@ -4,20 +4,10 @@ const AUTH_ROUTE = {
     login: '/account/signin',
 }
 
-const COOKIE_OPTIONS = {
-    prefix: '_Secure-auth',
-    path: '/',
-    tokenName: 'access-token',
-    refreshTokenName: 'refresh-token',
-}
-
 const ENDPOINTS = {
     login: {
         url: '/api/account/login/'
     },
-    refresh: {
-        url: '/api/auth/token/refresh'
-    },
     user: {
         url: '/api/account/user/'
     }
@@ -25,16 +15,6 @@ const ENDPOINTS = {
 
 
 export default defineNuxtPlugin(() => {
-    const tokenKey = COOKIE_OPTIONS.prefix + '.' + COOKIE_OPTIONS.tokenName
-    const refreshTokenKey = COOKIE_OPTIONS.prefix + '.' + COOKIE_OPTIONS.refreshTokenName
-    const tokenOptions = {
-        maxAge: 60 * 5,
-    }
-    const refreshTokenOptions = {
-        maxAge: 60 * 60 * 24,
-    }
-    const token = useCookie(tokenKey, tokenOptions)
-    const refreshToken = useCookie(refreshTokenKey, refreshTokenOptions)
 
     class Auth {
         constructor() {
@@ -42,75 +22,32 @@ export default defineNuxtPlugin(() => {
             this.user = useState('user')
         }
 
-        async login (username, password) {
-            const { data, error } = await useFetch(ENDPOINTS.login.url, {
-                method: 'POST',
-                body: {
-                    username,
-                    password
-                }
-            })
-            if (!error.value) {
-                token.value = data.value.access
-                refreshToken.value = data.value.refresh
-                return null
-            }
-            if (error.value.status === 401) {
-                return error.value.data.detail
-            }
-            return 'Request failed, please try again.'
-        }
-
         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.user = data.value
-                this.loginIn.value = true
+                this.setUser(data.value)
                 return null
             }
             return error
         }
 
-        async refresh () {
-            const { data, error } = await useFetch(ENDPOINTS.refresh.url, {
-                method: 'POST',
-                body: {
-                    'refresh': refreshToken.value
-                }
-            })
-            if (!error.value) {
-                token.value = data.value.access
-                return data.value.access
-            }
-            return null
-        }
-
-        async callback () {
-            return await navigateTo(AUTH_ROUTE.home)
-        }
-
-        async redirectToLogin () {
-            return await navigateTo(AUTH_ROUTE.login)
-        }
-
-        async retrieveToken () {
-            const token = useCookie(tokenKey, tokenOptions)
-            const refreshToken = useCookie(refreshTokenKey, refreshTokenOptions)
-            if (!refreshToken.value) {
-                return null
-            }
-            if (!token.value) {
-                return await this.refresh()
-            }
-            return token.value
+        async redirectToLogin (callback) {
+            return await navigateTo(
+                AUTH_ROUTE.login + '?callback=' + encodeURIComponent(callback || AUTH_ROUTE.home)
+            )
         }
 
     }
@@ -119,13 +56,9 @@ export default defineNuxtPlugin(() => {
 
     addRouteMiddleware('auth', async (to, from) => {
         if (!auth.loginIn.value) {
-            // const token = await auth.retrieveToken()
-            // if (!token) {
-            //     return await auth.redirectToLogin()
-            // }
             const error = await auth.fetchUser()
             if (error) {
-                return await auth.redirectToLogin()
+                return await auth.redirectToLogin(to.fullPath)
             }
         }
     })
diff --git a/utils/helper.js b/utils/helper.js
index 6607d02..b3c0b6c 100644
--- a/utils/helper.js
+++ b/utils/helper.js
@@ -9,7 +9,7 @@ export const getDefaultConversionData = () => {
 }
 
 export const getConversions = async () => {
-    const { data, error } = await useAuthFetch('/api/chat/conversations')
+    const { data, error } = await useAuthFetch('/api/chat/conversations/')
     if (!error.value) {
         return data.value
     }
@@ -33,7 +33,7 @@ export const openConversationMessages = async (currentConversation) => {
 }
 
 export const genTitle = async (conversationId) => {
-    const { data, error } = await useAuthFetch('/api/gen_title', {
+    const { data, error } = await useAuthFetch('/api/gen_title/', {
         method: 'POST',
         body: {
             conversationId: conversationId