feat: implement feature to verify role while log in

packages/vue-user/src/store.ts

@@ -51,6 +51,10 @@ const useUserStore = defineStore("user", () => {
         "sFrontToken=; Max-Age=0; path=/; domain=" + location.hostname;
     });
 
+    removeUser();
+  };
+
+  const removeUser = () => {
     localStorage.removeItem(USER_KEY);
   };
 
@@ -83,6 +87,7 @@ const useUserStore = defineStore("user", () => {
     getUser,
     login,
     logout,
+    removeUser,
     resetPassword,
     requestPasswordReset,
     setUser,

packages/vue-user/src/supertokens/helper.ts

@@ -0,0 +1,49 @@
+import Session from "supertokens-web-js/recipe/session";
+import { UserRoleClaim } from "supertokens-web-js/recipe/userroles";
+
+import logout from "./logout";
+import useUserStore from "../store";
+
+export async function verifySessionRoles(claims: string[]): Promise<boolean> {
+  if (await Session.doesSessionExist()) {
+    let errorCount = 0;
+
+    const validationErrors = await Session.validateClaims({
+      overrideGlobalClaimValidators: (globalValidators) => {
+        const validators = claims.map((claim) =>
+          UserRoleClaim.validators.includes(claim),
+        );
+
+        return [...globalValidators, ...validators];
+      },
+    });
+
+    if (validationErrors.length === 0) {
+      return true;
+    }
+
+    for (const err of validationErrors) {
+      if (err.validatorId === UserRoleClaim.id) {
+        // user roles claim check failed
+        errorCount += 1;
+      } else {
+        // some other claim check failed (from the global validators list)
+      }
+    }
+
+    if (errorCount < claims.length) {
+      // some user roles claim check passed
+      return true;
+    } else {
+      const userStore = useUserStore();
+
+      const { removeUser } = userStore;
+      // all user roles claim check failed
+      removeUser();
+      await logout();
+    }
+  }
+  // either a session does not exist, or one of the validators failed.
+  // so we do not allow access to this page.
+  return false;
+}

packages/vue-user/src/supertokens/index.ts

@@ -4,6 +4,7 @@ import Session from "supertokens-web-js/recipe/session";
 import ThirdPartyEmailPassword from "supertokens-web-js/recipe/thirdpartyemailpassword";
 
 import googleSignIn from "./google-signin";
+import { verifySessionRoles } from "./helper";
 import login from "./login";
 import logout from "./logout";
 import requestPasswordReset from "./request-password-reset";
@@ -66,4 +67,5 @@ export {
   resetPassword,
   signup,
   verifyEmail,
+  verifySessionRoles,
 };

packages/vue-user/src/types/config.ts

@@ -19,6 +19,7 @@ interface DzangolabVueUserConfig {
   };
   routes?: RouteOverrides;
   socialLogins?: string[];
+  supportedRoles?: string[];
 }
 
 declare module "@dzangolab/vue3-config" {

packages/vue-user/src/views/Login.vue

@@ -46,6 +46,7 @@ import GoogleLogin from "../components/GoogleLogin.vue";
 import LoginForm from "../components/LoginForm.vue";
 import { useTranslations } from "../index";
 import useUserStore from "../store";
+import { verifySessionRoles } from "../supertokens";
 
 import type { LoginCredentials } from "../types";
 import type { AppConfig } from "@dzangolab/vue3-config";
@@ -81,7 +82,13 @@ const handleSubmit = async (credentials: LoginCredentials) => {
   });
 
   if (user.value) {
-    router.push({ name: "home" });
+    if (
+      config &&
+      config.user?.supportedRoles &&
+      (await verifySessionRoles(config.user?.supportedRoles))
+    ) {
+      router.push({ name: "home" });
+    }
   }
 
   loading.value = false;