How do I suppress errors in vue router - vue.js

Question

I'm getting this error in a VueJS application: Uncaught (in promise) Error: Navigation cancelled from "/" to "/dashboard" with a new navigation. Its been documents in SO before
here and I've seen another article explaining it's due to the OAuth library I am using, making 2 calls thus causing a redirect.
I can't figure out how to suppress the error in my situation, the other answers use router.push(), i'm using a function in beforeEnter.
I've tried using: Try/Accept and catch (but not sure where to put them):
try {
next("/dashboard");
} catch (err) {
throw new Error(`Problem handling something: ${err}.`);
}
How do I suppress the error?
My Router:
export default new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "Landing",
component: Landing,
meta: {
title: "Landing",
},
beforeEnter: loginRedirectDashboard,
},
})
Router Guard (beforeEnter)
function loginRedirectDashboard(to, from, next) {
const authService = getInstance();
authService.$watch("loading", (loading) => {
if (loading === false) {
if (to.path === "/") {
next("/dashboard");
} else {
next();
}
}
});
}
Update:
instance() code
import Vue from "vue";
import createAuth0Client from "#auth0/auth0-spa-js";
/** Define a default action to perform after authentication */
const DEFAULT_REDIRECT_CALLBACK = () =>
window.history.replaceState({}, document.title, window.location.pathname);
let instance;
/** Returns the current instance of the SDK */
export const getInstance = () => instance;
/** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */
export const useAuth0 = ({
onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
redirectUri = window.location.origin,
...options
}) => {
if (instance) return instance;
// The 'instance' is simply a Vue object
instance = new Vue({
data() {
return {
loading: true,
isAuthenticated: false,
user: {},
auth0Client: null,
popupOpen: false,
error: null,
permission: null,
};
},
methods: {
/** Authenticates the user using a popup window */
async loginWithPopup(options, config) {
this.popupOpen = true;
try {
await this.auth0Client.loginWithPopup(options, config);
this.user = await this.getUserWithMeta(); //await this.auth0Client.getUser();
this.isAuthenticated = await this.auth0Client.isAuthenticated();
this.error = null;
this.permission = await this.permissionLevels();
} catch (e) {
this.error = e;
// eslint-disable-next-line
console.error(e);
} finally {
this.popupOpen = false;
}
this.user = await this.auth0Client.getUser();
this.isAuthenticated = true;
},
/** Handles the callback when logging in using a redirect */
async handleRedirectCallback() {
this.loading = true;
try {
await this.auth0Client.handleRedirectCallback();
this.user = await this.getUserWithMeta(); //await this.auth0Client.getUser();
this.isAuthenticated = true;
this.error = null;
this.permission = await this.permissionLevels();
} catch (e) {
this.error = e;
} finally {
this.loading = false;
}
},
/** Authenticates the user using the redirect method */
loginWithRedirect(o) {
return this.auth0Client.loginWithRedirect(o);
},
/** Returns all the claims present in the ID token */
getIdTokenClaims(o) {
return this.auth0Client.getIdTokenClaims(o);
},
/** Returns the access token. If the token is invalid or missing, a new one is retrieved */
getTokenSilently(o) {
return this.auth0Client.getTokenSilently(o);
},
/** Gets the access token using a popup window */
async getUserWithMeta() {
var userObject = await this.auth0Client.getUser();
if (userObject != null) {
var namespace = '********';
var extractUserMeta = userObject[namespace];
delete userObject[namespace];
userObject.userInfo = extractUserMeta;
return userObject;
}
},
async permissionLevels(o) {
if (this.isAuthenticated) {
const jwtToken = await this.auth0Client.getTokenSilently(o);
var base64Url = jwtToken.split(".")[1];
var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
var jsonPayload = decodeURIComponent(
atob(base64)
.split("")
.map(function(c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(jsonPayload).permissions;
} else {
return false;
}
},
getTokenWithPopup(o) {
return this.auth0Client.getTokenWithPopup(o);
},
/** Logs the user out and removes their session on the authorization server */
logout(o) {
delete localStorage.authToken;
return this.auth0Client.logout(o);
},
},
/** Use this lifecycle method to instantiate the SDK client */
async created() {
// Create a new instance of the SDK client using members of the given options object
this.auth0Client = await createAuth0Client({
...options,
client_id: options.clientId,
redirect_uri: redirectUri,
});
try {
// If the user is returning to the app after authentication..
if (
window.location.search.includes("code=") &&
window.location.search.includes("state=")
) {
// handle the redirect and retrieve tokens
const { appState } = await this.auth0Client.handleRedirectCallback();
this.error = null;
// Notify subscribers that the redirect callback has happened, passing the appState
// (useful for retrieving any pre-authentication state)
onRedirectCallback(appState);
}
} catch (e) {
this.error = e;
} finally {
// Initialize our internal authentication state
this.isAuthenticated = await this.auth0Client.isAuthenticated();
this.user = await this.getUserWithMeta(); //await this.auth0Client.getUser();
this.loading = false;
this.permission = await this.permissionLevels();
}
},
});
return instance;
};
// Create a simple Vue plugin to expose the wrapper object throughout the application
export const Auth0Plugin = {
install(Vue, options) {
Vue.prototype.$auth = useAuth0(options);
},
};