more

composables/auth.js

@@ -16,8 +16,12 @@ export const initAuth = async (oldToken = null) => {
   const auth = {
     user: null,
     token: '',
-    headers: {},
   }
+
+  if (oldToken === 'none') {
+    return auth
+  }
+
   const route = useRoute()
   const authCookie = useCookie('auth-token', {
     maxAge: 60 * 60 * 24 * 365 * 10,
@@ -37,6 +41,11 @@ export const initAuth = async (oldToken = null) => {
 
   if (authCookie.value) {
     auth.token = authCookie.value
+
+    if (!auth.token || !auth.token.startsWith('mra_')) {
+      return auth
+    }
+
     try {
       auth.user = await useBaseFetch(
         'user',
@@ -50,6 +59,36 @@ export const initAuth = async (oldToken = null) => {
     } catch {}
   }
 
+  if (!auth.user) {
+    try {
+      const session = await useBaseFetch(
+        'session/refresh',
+        {
+          method: 'POST',
+          headers: {
+            Authorization: auth.token,
+          },
+        },
+        true
+      )
+
+      auth.token = session.session
+      authCookie.value = auth.token
+
+      auth.user = await useBaseFetch(
+        'user',
+        {
+          headers: {
+            Authorization: auth.token,
+          },
+        },
+        true
+      )
+    } catch {
+      authCookie.value = null
+    }
+  }
+
   return auth
 }
 

composables/user.js

@@ -149,3 +149,18 @@ export const resendVerifyEmail = async () => {
   }
   stopLoading()
 }
+
+export const logout = async () => {
+  startLoading()
+  const auth = await useAuth()
+  try {
+    await useBaseFetch(`session/${auth.value.token}`, {
+      method: 'DELETE',
+    })
+  } catch {}
+
+  await useAuth('none')
+  useCookie('auth-token').value = null
+  await navigateTo('/')
+  stopLoading()
+}

layouts/default.vue

@@ -103,14 +103,14 @@
                     <span class="title">Moderation</span>
                   </NuxtLink>
                   <hr class="divider" />
-                  <button class="item button-transparent" @click="logout()">
+                  <button class="item button-transparent" @click="logoutUser()">
                     <LogOutIcon class="icon" />
                     <span class="dropdown-item__text">Log out</span>
                   </button>
                 </div>
               </div>
               <section v-else class="auth-prompt">
-                <nuxt-link class="btn btn-primary" to="/auth/sign-in">
+                <nuxt-link class="iconified-button brand-button" to="/auth/sign-in">
                   <LogInIcon /> Sign in
                 </nuxt-link>
               </section>
@@ -160,13 +160,13 @@
                 <div>Visit your profile</div>
               </div>
             </NuxtLink>
-            <nuxt-link v-else class="btn btn-primary" to="/auth/sign-in">
+            <nuxt-link v-else class="iconified-button brand-button" to="/auth/sign-in">
               <LogInIcon /> Sign in
             </nuxt-link>
           </div>
           <div class="links">
             <template v-if="auth.user">
-              <button class="iconified-button danger-button" @click="logout()">
+              <button class="iconified-button danger-button" @click="logoutUser()">
                 <LogOutIcon aria-hidden="true" />
                 Log out
               </button>
@@ -406,6 +406,10 @@ function developerModeIncrement() {
     developerModeCounter++
   }
 }
+
+async function logoutUser() {
+  await logout()
+}
 </script>
 <script>
 export default defineNuxtComponent({
@@ -498,22 +502,6 @@ export default defineNuxtComponent({
         this.isMobileMenuOpen = false
       }
     },
-    logout() {
-      useCookie('auth-token').value = null
-
-      this.$notify({
-        group: 'main',
-        title: 'Logged Out',
-        text: 'You have logged out successfully!',
-        type: 'success',
-      })
-
-      useRouter()
-        .push('/')
-        .then(() => {
-          useRouter().go()
-        })
-    },
     changeTheme() {
       updateTheme(this.$colorMode.value === 'dark' ? 'light' : 'dark', true)
     },

middleware/auth.js

@@ -2,6 +2,6 @@ export default defineNuxtRouteMiddleware(async () => {
   const auth = await useAuth()
 
   if (!auth.value.user) {
-    return navigateTo(getAuthUrl(), { external: true })
+    return navigateTo('/auth/sign-in')
   }
 })