auth0/auth0-vue

Redirect URI when using authGuard

ipmb opened this issue · 1 comments

ipmb commented

I'm using authGuard to make sure users have logged in before accessing my app. I'd like users to always get redirected back to the URL they started at once they've logged in. For example, if the user hits /path/in/app the authGuard should authenticate them and the user should end up back at /path/in/app as a logged in user.

This seems like a common use case, so I feel like I must have misconfigured something. In main.ts I'm configuring auth0 like this:

import { createApp } from "vue";
import App from "@/App.vue";
import { createAuth0 } from "@auth0/auth0-vue";
import router from "@/routes/router";
import config from "../config.json";

export const app = createApp(App);

app.use(router);

export const auth0Client = createAuth0({
  domain: config.auth0Domain,
  clientId: config.auth0ClientId,
  legacySameSiteCookie: false,
  authorizationParams: {
    redirect_uri: window.location.origin,
  },
});

app.use(auth0Client);

app.mount("#app");

My router looks like this:

import {
  createRouter,
  createWebHistory,
} from "vue-router";
import { authGuard } from "@auth0/auth0-vue";
import AppList from "./AppList.vue";
import Index from "./Index.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/app-list",
      component: AppList,
      beforeEnter: authGuard,
    },
    {
      path: "/",
      component: Index,
      beforeEnter: authGuard,
    },
  ],
});

export default router;

If I visit /app-list, I'm redirected to /?code=... and then bounced back to / instead of /app-list.

Thanks for your help!

ipmb commented

Adding a proper callback page without an authguard solved the issue and is documented here https://developer.auth0.com/resources/guides/spa/vue/basic-authentication

My routes now have

    {
      path: "/callback",
      component: Auth0Callback,
    },

and main.ts now has

export const auth0Client = createAuth0({
  domain: config.auth0Domain,
  clientId: config.auth0ClientId,
  legacySameSiteCookie: false,
  authorizationParams: {
    redirect_uri: `${window.location.origin}/callback`,
  },
});