FR-14999 - Fixed support for vue-router 4 in vue 3

packages/vue/src/auth/mapAuthState.ts

@@ -173,7 +173,7 @@ export const useLoadEntitlements = () => {
 };
 
 /**
- * @returns user state 
+ * @returns user state
  */
 const useGetUserState = () => {
   const authState = inject(authStateKey) as AuthState;
@@ -215,8 +215,8 @@ export const useFrontegg = () => {
   const fronteggStore = useFronteggStore() as EnhancedStore;
 
   const loginWithRedirect = () => {
-    // @ts-ignore
-    if (!fronteggAuth.router?.currentRoute.path.startsWith(authState.routes.hostedLoginRedirectUrl)) {
+    const path = fronteggAuth.getCurrentRoute()
+    if (!path.startsWith(authState.routes.hostedLoginRedirectUrl ?? "/oauth/callback")) {
       fronteggStore.dispatch({ type: 'auth/setState', payload: { isLoading: true } });
       fronteggAuth.loginActions.requestHostedLoginAuthorize();
     }
@@ -245,14 +245,19 @@ export const useFronteggAuthGuard = (options?: FronteggAuthGuardOptions) => {
   const fronteggStore = useFronteggStore() as EnhancedStore;
 
   const isAuthRoutes = (path: string) => {
+    const pathname = new URL(path, window.location.origin).pathname
     const { routes } = authState;
     return Object.values(routes)
-      .filter(path => path !== routes.authenticatedUrl)
-      .includes(path);
+      .filter(route => route !== routes.authenticatedUrl)
+      .includes(pathname);
   };
 
   const checkGuard = () => {
-    if (!isAuthRoutes(fronteggAuth.router?.currentRoute.path!) && !authState.isAuthenticated && !authState.isLoading) {
+
+    // @ts-ignore
+    const route = fronteggAuth.getCurrentRoute();
+
+    if (!isAuthRoutes(route) && !authState.isAuthenticated && !authState.isLoading) {
       if (fronteggOptions.hostedLoginBox) {
         fronteggStore.dispatch({ type: 'auth/setState', payload: { isLoading: true } });
         if (redirectUrl) {

packages/vue/src/auth/service.ts

@@ -109,7 +109,7 @@ export class FronteggAuthService implements FronteggPluginService {
       apiTokensActions,
       securityPolicyActions,
       tenantsActions,
-    }).forEach(([key, actions]: any) => {
+    }).forEach(([ key, actions ]: any) => {
       Object.assign(this, { [key]: bindActionCreators(actions, this.store!.dispatch) });
     });
 
@@ -152,4 +152,20 @@ export class FronteggAuthService implements FronteggPluginService {
       }
     }
   };
+
+
+  getCurrentRoute = () => {
+    let route: string = '/';
+    if (this.router?.currentRoute?.path) {
+      // vue-router v3
+      route = this.router?.currentRoute?.path;
+    }
+    // @ts-ignore vue-router v4
+    if (this.router?.currentRoute?.value?.path) {
+      // @ts-ignore vue-router v4
+      route = this.router?.currentRoute?.value?.fullPath;
+    }
+
+    return route
+  };
 }

packages/vue/src/index.ts

@@ -177,10 +177,11 @@ const Frontegg: PluginObject<PluginOptions> | any = {
     }, 10);
 
     const isAuthRoutes = (path: string) => {
+      const pathname = new URL(path, window.location.origin).pathname
       const { routes } = Vue.fronteggAuth;
       return Object.values(routes)
-        .filter(path => path != routes.authenticatedUrl)
-        .includes(path);
+        .filter(route => route != routes.authenticatedUrl)
+        .includes(pathname);
     };
 
     const authorizedContentGuard = (_this: any) => {