Redirect URI when using authGuard
ipmb opened this issue · 1 comments
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!
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`,
},
});