Added auth - login/logout/session (vue app)

src/Overmoney.Portal/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "^1.6.8",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "primevue": "^3.51.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

src/Overmoney.Portal/src/components/generic/NavigationMenu.vue

@@ -1,24 +1,35 @@
 <template>
-    <nav>
+    <nav v-if="session.isAuthenticated">
         <router-link to="/">Dashobards</router-link> |
         <router-link to="/payees">Payees</router-link> |
         <router-link to="/categories">Categories</router-link> |
         <router-link to="/transactions">Transactions</router-link> |
         <!-- <a v-for="wallet in wallets" :key="wallet.id" href="#">{{ wallet.name }}</a> | -->
         <router-link to="/settings">Settings</router-link> |
-        <a href="#">Log out</a> |
+        <a href="#" @click.prevent="logout">Log out</a> |
     </nav>
 </template>
 
 <script lang="ts">
+import { userSessionStore } from '@/data_access/sessionStore';
 import type { Wallet } from '../../data_access/models/wallet'
 
 export default {
     props: {
         wallets: Array<Wallet>
     },
     data() {
-        
+        const session = userSessionStore();
+
+        return {
+            session
+        }
+    },
+    methods: {
+        logout() {
+            this.session.logoutUser();
+            this.$router.push('/login');
+        }
     }
 }
 </script>

src/Overmoney.Portal/src/components/modals/UpdateTransactionModal.vue

@@ -61,8 +61,8 @@ import type { Wallet } from '../../data_access/models/wallet'
 import type { Payee } from '../../data_access/models/payee'
 import type { Category } from '../../data_access/models/category'
 import type { Transaction } from '../../data_access/models/transaction'
-import { updateTransactionRequest } from '@/data_access/models/requests/updateTransactionRequest'
-import { PropType } from 'vue';
+import type { updateTransactionRequest } from '@/data_access/models/requests/updateTransactionRequest'
+import type { PropType } from 'vue';
 
 export default {
     props: {

src/Overmoney.Portal/src/components/views/CategoryView.vue

@@ -58,7 +58,7 @@ export default {
                 console.log("Category cannot be null");
             }
             cat!.name = newName;
-            await this.client.updateCategory({ name: newName, userid: category.userId, id: category.id });
+            await this.client.updateCategory({ name: newName, userId: category.userId, id: category.id });
         }
     }
 };

src/Overmoney.Portal/src/components/views/LoginView.vue

@@ -0,0 +1,34 @@
+<template>
+    <form @submit.prevent="onLogin">
+        <input type="text" v-model="email" />
+        <input type="password" v-model="password" />
+        <button type="submit">Login</button>
+    </form>
+</template>
+
+<script lang="ts">
+import { userSessionStore } from '@/data_access/sessionStore';
+
+export default {
+    data() {
+        let session = userSessionStore();
+
+        return {
+            email: "" as string,
+            password: "" as string,
+            session
+        }
+    },
+    methods: {
+        async onLogin() {
+            let response = await this.session.loginUser(this.email, this.password);
+            if (response === false) {
+                console.log("nope!");
+            }
+            this.email = "";
+            this.password = "";
+            this.$router.push('/');
+        }
+    }
+}
+</script>

src/Overmoney.Portal/src/data_access/authClient.ts

@@ -0,0 +1,24 @@
+import axios, { isCancel, AxiosError } from "axios";
+import type { LoginResponse } from "./models/auth/loginResponse";
+import type { UserProfile } from "./models/auth/profile";
+
+export class AuthClient {
+  async loginUser(email: string, password: string) {
+    const response = await axios.post<LoginResponse>(
+      import.meta.env.VITE_API_URL +
+        `Identity/login?useCookies=false&useSessionCookies=false`,
+      { email, password }
+    );
+    return response.data;
+  }
+
+  async getUserProfile(token: string) {
+    const response = await axios.get<UserProfile>(
+        import.meta.env.VITE_API_URL + `users/profile`, {
+            headers: {
+                "Authorization": `Bearer ${token}`
+            }
+        });
+      return response.data;
+  }
+}

src/Overmoney.Portal/src/data_access/client.ts

@@ -2,7 +2,7 @@ import axios, { isCancel, AxiosError } from "axios";
 import type { Category } from "./models/category";
 import type { Payee } from "./models/payee";
 import type { createCategoryRequest } from "./models/requests/createCategoryRequest";
-import type { updateCategoryRequest } from "./models/requests/createCategoryRequest";
+import type { updateCategoryRequest } from "./models/requests/updateCategoryRequest";
 import type { createPayeeReqeuest } from "./models/requests/createPayeeReqeuest";
 import type { updatePayeeRequest } from "./models/requests/updatePayeeRequest";
 import type { createTransactionRequest } from "./models/requests/createTransactionRequest";

src/Overmoney.Portal/src/data_access/models/auth/loginResponse.ts

@@ -0,0 +1,6 @@
+export type LoginResponse = {
+    tokenType: string,
+    accessToken: string,
+    expiresIn: number,
+    refreshToken: string
+}

src/Overmoney.Portal/src/data_access/models/auth/profile.ts

@@ -0,0 +1,4 @@
+export type UserProfile = {
+    id: number,
+    email: string
+}

src/Overmoney.Portal/src/data_access/sessionStore.ts

@@ -0,0 +1,66 @@
+import { defineStore } from "pinia";
+import type { UserContext } from "./userContext";
+import { AuthClient } from "./authClient";
+
+export const userSessionStore = defineStore("user", {
+  state: () => {
+    return {
+      userContext: null as UserContext | null,
+    };
+  },
+  getters: {
+    apiToken(): string | undefined {
+      return this.userContext?.token;
+    },
+    getUserId(): number | undefined {
+      return this.userContext?.userId;
+    },
+    isAuthenticated(): boolean {
+      //no token
+      if (this.userContext === null || this.userContext === undefined) {
+        return false;
+      }
+
+      //no token
+      if (this.userContext?.token === null) {
+        return false;
+      }
+
+      //token expired
+      if (this.userContext?.expiresOn <= new Date()) {
+        return false;
+      }
+
+      return true;
+    },
+  },
+  actions: {
+    async loginUser(email: string, password: string): Promise<boolean> {
+      const client = new AuthClient();
+      try {
+        const authResponse = await client.loginUser(email, password);
+
+        const profileResponse = await client.getUserProfile(
+          authResponse.accessToken
+        );
+
+        this.userContext = {
+          token: authResponse.accessToken,
+          userId: profileResponse.id,
+          expiresOn: new Date(
+            new Date().getTime() + authResponse.expiresIn * 1000
+          ),
+        };
+
+        return true;
+      } catch (error) {
+        console.log(error);
+        return false;
+      }
+    },
+    logoutUser() {
+      this.$reset();
+    },
+  },
+  persist: true,
+});

src/Overmoney.Portal/src/data_access/userContext.ts

@@ -1,3 +1,5 @@
 export type UserContext = {
     userId: number;
+    token: string;
+    expiresOn: Date
 }

src/Overmoney.Portal/src/main.ts

@@ -1,9 +1,11 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia';
+import piniaPluginPersistedstate  from 'pinia-plugin-persistedstate';
 import App from './App.vue'
 import router from './router';
 
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 const app = createApp(App);
 app.use(router);

src/Overmoney.Portal/src/router.ts

@@ -1,22 +1,61 @@
-import { createMemoryHistory, createRouter } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
+import axios from "axios";
+import { userSessionStore } from "./data_access/sessionStore";
 
-import MainView from './components/views/testComp.vue'
-import PayeeView from './components/views/PayeeView.vue'
-import CategoryView from './components/views/CategoryView.vue'
-import TransactionView from './components/views/TransactionView.vue'
-import SettingsView from './components/views/SettingsView.vue'
+import MainView from "./components/views/testComp.vue";
+import PayeeView from "./components/views/PayeeView.vue";
+import CategoryView from "./components/views/CategoryView.vue";
+import TransactionView from "./components/views/TransactionView.vue";
+import SettingsView from "./components/views/SettingsView.vue";
+import LoginView from "./components/views/LoginView.vue";
 
 const routes = [
-  { path: '/', component: MainView },
-  { path: '/payees', component: PayeeView },
-  { path: '/categories', component: CategoryView },
-  { path: '/transactions', component: TransactionView },
-  { path: '/settings', component: SettingsView }
-]
+  { path: "/login", component: LoginView, meta: { requiresAuth: false } },
+  { path: "/", component: MainView, meta: { requiresAuth: true } },
+  { path: "/payees", component: PayeeView, meta: { requiresAuth: true } },
+  {
+    path: "/categories",
+    component: CategoryView,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/transactions",
+    component: TransactionView,
+    meta: { requiresAuth: true },
+  },
+  { path: "/settings", component: SettingsView, meta: { requiresAuth: true } },
+];
 
 const router = createRouter({
-  history: createMemoryHistory(),
+  history: createWebHistory(),
   routes,
-})
+});
 
-export default router;
+const setAuthorization = (token: string) => {
+  axios.defaults.headers.common.Authorization = `Bearer ${token}`;
+};
+
+router.beforeEach((to, from, next) => {
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
+  const session = userSessionStore();
+  if (session.isAuthenticated) {
+    setAuthorization(session.apiToken!);
+  }
+  if (requiresAuth && !session.isAuthenticated) {
+    next("/login");
+  } else if (to.path === "/login" && session.isAuthenticated) {
+    next("/");
+  } else {
+    next();
+  }
+});
+
+axios.interceptors.response.use(null, (error) => {
+  if (error.response.status == 403 || error.response.status == 401) {
+    router.push("/login");
+  }
+
+  return Promise.reject(error);
+});
+
+export default router;