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

packages/vue/src/auth/mapAuthState.ts

@@ -19,7 +19,7 @@ import {
   AuthActions,
 } from '@frontegg/redux-store';
 import { ActionsHolder } from './ActionsHolder';
-import { AuthState, EnhancedStore, FRONTEGG_AFTER_AUTH_REDIRECT_URL, isSteppedUp, IsSteppedUpOptions } from '@frontegg/redux-store';
+import { AuthState, EnhancedStore, FRONTEGG_AFTER_AUTH_REDIRECT_URL, isSteppedUp, IsSteppedUpOptions, defaultFronteggRoutes } from '@frontegg/redux-store';
 import { FronteggAuthService } from './service';
 import VueRouter from 'vue-router';
 import {
@@ -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 ?? defaultFronteggRoutes.hostedLoginRedirectUrl)) {
       fronteggStore.dispatch({ type: 'auth/setState', payload: { isLoading: true } });
       fronteggAuth.loginActions.requestHostedLoginAuthorize();
     }
@@ -244,15 +244,10 @@ export const useFronteggAuthGuard = (options?: FronteggAuthGuardOptions) => {
   const router = inject(routerKey) as VueRouter;
   const fronteggStore = useFronteggStore() as EnhancedStore;
 
-  const isAuthRoutes = (path: string) => {
-    const { routes } = authState;
-    return Object.values(routes)
-      .filter(path => path !== routes.authenticatedUrl)
-      .includes(path);
-  };
-
   const checkGuard = () => {
-    if (!isAuthRoutes(fronteggAuth.router?.currentRoute.path!) && !authState.isAuthenticated && !authState.isLoading) {
+    const route = fronteggAuth.getCurrentRoute();
+
+    if (!fronteggAuth.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,27 @@ export class FronteggAuthService implements FronteggPluginService {
       }
     }
   };
+
+
+  getCurrentRoute = (): string => {
+    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?.fullPath) {
+      // @ts-ignore vue-router v4
+      route = this.router?.currentRoute?.value?.fullPath;
+    }
+
+    return route;
+  };
+
+  isAuthRoutes = (path: string): boolean => {
+    const pathname = new URL(path, window.location.origin).pathname;
+    return Object.values(this.routes)
+      .filter(route => route != this.routes.authenticatedUrl)
+      .includes(pathname);
+  };
 }

packages/vue/src/index.ts

@@ -176,15 +176,9 @@ const Frontegg: PluginObject<PluginOptions> | any = {
       }
     }, 10);
 
-    const isAuthRoutes = (path: string) => {
-      const { routes } = Vue.fronteggAuth;
-      return Object.values(routes)
-        .filter(path => path != routes.authenticatedUrl)
-        .includes(path);
-    };
 
     const authorizedContentGuard = (_this: any) => {
-      if (!_this.authorizedContent || isAuthRoutes(_this.$route.path)) {
+      if (!_this.authorizedContent || Vue.fronteggAuth.isAuthRoutes(_this.$route.path)) {
         return;
       }
       if (!Vue.fronteggAuth.loading && !Vue.fronteggAuth.isAuthenticated) {