Added Local Storage Based Login Method while in Development Environment

src/core/app/api.ts

@@ -2,6 +2,9 @@ import { useAuth } from "@/stores/Auth/auth.store";
 import axios from "axios";
 import { storeToRefs } from "pinia";
 import { auth } from "./endpoints";
+import { isDevelopment } from "../utils/common.util";
+import jwtServices from "./jwt";
+import router from "@/router";
 
 const apiURL: string = DOLPHIN.config.API_BASE_URL;
 
@@ -13,9 +16,14 @@ const api = axios.create({
     withCredentials: true,
 });
 
-// No need to save the Token as they are already attached to the cookie from backend
 api.interceptors.request.use(
     function (config) {
+        if (isDevelopment()) {
+            const token = jwtServices.getToken();
+            if (token) {
+                config.headers["Authorization"] = `Bearer ${token}`;
+            }
+        }
         return config;
     },
     function (error) {
@@ -33,14 +41,29 @@ api.interceptors.response.use(
             response: { status },
         } = error;
         const originalRequest = config;
+        const authStore = useAuth();
+        const { isAuthenticated } = storeToRefs(authStore);
         if (status === 401 && !originalRequest._retry) {
             originalRequest._retry = true;
-            const authStore = useAuth();
-            const { isAuthenticated } = storeToRefs(authStore);
             try {
-                await api.post(auth.tokenRefresh, null, {
-                    withCredentials: true,
-                });
+                let data = {};
+                if (isDevelopment()) {
+                    const refreshToken = jwtServices.getRefreshToken();
+                    data = {
+                        refresh: refreshToken,
+                    };
+                }
+                await api
+                    .post(auth.tokenRefresh, data, {
+                        withCredentials: true,
+                    })
+                    .then((response) => {
+                        if (isDevelopment()) {
+                            const token = response.data.access;
+                            jwtServices.setToken(token);
+                            originalRequest.headers["Authorization"] = `Bearer ${token}`;
+                        }
+                    });
                 isAuthenticated.value = true;
                 return await axios(originalRequest);
             } catch (e) {
@@ -48,6 +71,12 @@ api.interceptors.response.use(
                 isAuthenticated.value = false;
                 throw e;
             }
+        } else if (status === 401 && originalRequest._retry) {
+            isAuthenticated.value = false;
+            router.push({ name: "login" });
+            if (isDevelopment()) {
+                jwtServices.destroyToken();
+            }
         }
         return Promise.reject(error);
     }

src/core/app/jwt.ts

@@ -0,0 +1,35 @@
+const tokenKey: string = "token";
+const refreshTokenKey: string = "refresh";
+
+const setToken = function (token: string): void {
+    if (token) window.localStorage.setItem(tokenKey, token);
+};
+
+const setRefreshToken = function (refresh: string): void {
+    if (refresh) window.localStorage.setItem(refreshTokenKey, refresh);
+};
+
+const getToken = function (): string | null {
+    const token = window.localStorage.getItem(tokenKey);
+    return token;
+};
+
+const getRefreshToken = function (): string | null {
+    const refreshToken = window.localStorage.getItem(refreshTokenKey);
+    return refreshToken;
+};
+
+const destroyToken = function (): void {
+    window.localStorage.removeItem(tokenKey);
+    window.localStorage.removeItem(refreshTokenKey);
+};
+
+const jwtServices = {
+    setToken,
+    setRefreshToken,
+    getToken,
+    getRefreshToken,
+    destroyToken,
+};
+
+export default jwtServices;

src/core/utils/common.util.ts

@@ -8,4 +8,16 @@ const getNameInitials = (name: string): string => {
     return first + last;
 };
 
-export { getNameInitials };
+const getEnvironment = () => {
+    return DOLPHIN.config.ENVIRONMENT;
+};
+
+const isDevelopment = () => {
+    return getEnvironment() == "DEVELOPMENT";
+};
+
+const isProduction = () => {
+    return getEnvironment() == "PRODUCTION";
+};
+
+export { getNameInitials, getEnvironment, isDevelopment, isProduction };

src/stores/Auth/auth.store.ts

@@ -4,6 +4,8 @@ import type { LoginDetails, UserDetails } from "@/core/types/auth/auth.type";
 import { defineStore } from "pinia";
 import { useLoader } from "../App/loader.store";
 import router from "@/router";
+import { isDevelopment } from "@/core/utils/common.util";
+import jwtServices from "@/core/app/jwt";
 
 export const useAuth = defineStore("auth", {
     state: () => ({
@@ -28,8 +30,12 @@ export const useAuth = defineStore("auth", {
             loaderStore.start("login");
             await api
                 .post(auth.login, this.loginDetails)
-                .then(() => {
+                .then((response) => {
                     loaderStore.stop("login");
+                    if (isDevelopment()) {
+                        jwtServices.setToken(response.data.data[0].access);
+                        jwtServices.setRefreshToken(response.data.data[0].refresh);
+                    }
                     this.isAuthenticated = true;
                     router.push({ name: "dashboard" });
                 })
@@ -65,6 +71,9 @@ export const useAuth = defineStore("auth", {
                     this.isAuthenticated = false;
                     router.push({ name: "login" });
                     loaderStore.stop("logout");
+                    if (isDevelopment()) {
+                        jwtServices.destroyToken();
+                    }
                 })
                 .catch((e) => {
                     console.log(e);