Vue.js: How to Avoid Showing the Callback Page

Knowledge Articles
1

Overview

This article will explain how to avoid showing the callback page when a user navigates backward after following the guide Vue.js Authentication By Example: Composition API.

Applies To

  • Vue.js Router

Cause

There is a step in the documentation to add the rendering of the callback page (located in the src/pages/callback-page.vue) to the router.

  • This step causes a preconfigured callback page if the user navigates back on the browser using the back button.

Solution

  • The SDK does not need this page to exist by default, as it will handle the callback routing. Having this page declared explicitly on the Vue router allows users to navigate “back” to it.
  • When using the SDK without an explicit callback page, the user is not allowed to navigate back to it and instead sees an error from the Universal Login.
  • Removing the rendering of the callback page src/router/index.js resolves this issue.
  • The error “You may have pressed the back button…” shown on the Universal Login page can be resolved by setting up the Login URL for your application from the Auth0 Dashboard.

See an example of how the router should be configured:

 {

  path: "/callback",

  name: "callback",

 },