Refactor login and auth

src/boot/appwrite.ts

@@ -1,5 +1,6 @@
 import { boot } from 'quasar/wrappers';
-import { Client, Account, ID } from 'appwrite';
+import { Client, Account, Databases, ID } from 'appwrite';
+import { useAuthStore } from 'src/stores/auth';
 
 const client = new Client();
 
@@ -8,15 +9,14 @@ client
   .setProject('653ef6f76baf06d68034');
 
 const account = new Account(client);
+const databases = new Databases(client);
 
-// TODO: Auto-logout on session deletion / expiry
+export default boot(({ app, urlPath, router }) => {
-// account.get().then(
+  // Initialize store
-//   client.subscribe('account', (response) => {
+  const authStore = useAuthStore();
-//     console.log(response);
+  authStore.init().then(() => {
-//   })
+    authStore.currentUser && router.push('/');
-// );
+  });
+});
 
-// export default boot(({ app, urlPath, redirect }) => {
+export { client, account, databases, ID };
-// });
-
-export { client, account };

src/layouts/MainLayout.vue

@@ -37,11 +37,11 @@
 
 <script setup lang="ts">
 import EssentialLink from 'components/EssentialLink.vue';
-import { account } from 'boot/appwrite';
 import type { Models } from 'appwrite';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
+import { useAuthStore } from 'src/stores/auth';
 
 const linksList = [
   {
@@ -55,16 +55,13 @@ const linksList = [
 const q = useQuasar();
 const leftDrawerOpen = ref(false);
 
-const loggedInUser = ref<Models.User<Models.Preferences> | null>();
+const authStore = useAuthStore();
+const loggedInUser = authStore.currentUser;
 
 const router = useRouter();
 
-account.get().then((result) => {
-  loggedInUser.value = result;
-});
-
 async function logout() {
-  await account.deleteSession('current');
+  await authStore.logout();
   q.notify({
     message: 'Logged out!',
     type: 'warning',

src/pages/LoginPage.vue

@@ -68,7 +68,7 @@
 <script setup lang="ts">
 import { AppwriteException } from 'appwrite';
 import { ref } from 'vue';
-import { account } from 'boot/appwrite';
+import { useAuthStore } from 'src/stores/auth';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 
@@ -76,9 +76,10 @@ defineOptions({
   name: 'LoginPage',
 });
 
+const authStore = useAuthStore();
+
 const email = ref('');
 const password = ref('');
-const errorMessage = ref('');
 const router = useRouter();
 const q = useQuasar();
 
@@ -91,8 +92,8 @@ function login(email: string, password: string) {
     timeout: 2000,
     group: false,
   });
-  account
+  authStore
-    .createEmailSession(email, password)
+    .login(email, password)
     .then(() => {
       notification({
         type: 'positive',
@@ -103,7 +104,7 @@ function login(email: string, password: string) {
       });
       router.push({ name: 'index' });
     })
-    .catch((reason: AppwriteException) => {
+    .catch((reason: Error) => {
       notification({
         type: 'negative',
         message: 'Login failed. Error:' + reason.message,

src/router/index.ts

@@ -7,7 +7,7 @@ import {
 } from 'vue-router';
 
 import routes from './routes';
-import { account } from 'boot/appwrite';
+import { useAuthStore } from 'src/stores/auth';
 
 /*
  * If not building with SSR mode, you can
@@ -35,24 +35,14 @@ export default route(function (/* { store, ssrContext } */) {
     history: createHistory(process.env.VUE_ROUTER_BASE),
   });
 
-  const accountRoutes = ['login', 'register'];
-
   Router.beforeEach(async (to, from, next) => {
-    const name = to.name as string;
+    const auth = useAuthStore();
-    try {
+    console.log([to.meta.accountRoute, auth.currentUser]);
-      const session = await account.getSession('current');
+    return !to.meta.accountRoute && !auth.currentUser
-      to.meta.session = session;
+      ? next({ name: 'login' })
-
+      : to.meta.accountRoute && auth.currentUser
-      if (accountRoutes.includes(name)) {
+      ? next({ name: 'index' })
-        return next({ name: 'index' });
+      : next();
-      }
-    } catch {
-      if (!accountRoutes.includes(name)) {
-        return next({ name: 'login' });
-      }
-    }
-
-    next();
   });
 
   return Router;

src/router/routes.ts

@@ -16,11 +16,17 @@ const routes: RouteRecordRaw[] = [
     path: '/login',
     component: () => import('pages/LoginPage.vue'),
     name: 'login',
+    meta: {
+      accountRoute: true,
+    },
   },
   // {
   //   path: '/register',
   //   component: () => import('pages/RegisterPage.vue'),
   //   name: 'register'
+  //   meta: {
+  //    accountRoute: true,
+  //   }
   // },
   // Always leave this as last one,
   // but you can also remove it