Vue3 Callback URL mismatch

Been following the quick setup guide for Vue, but can’t seem to get it to work. I’m running a Vite based project. Here is my main.ts:

        domain: authConfig.domain,
        clientId: authConfig.clientId,
        authorizationParams: {
            redirect_uri: window.location.origin,

And my login function here

const auth0 = useAuth0();

const login = async () => {
  await auth0.loginWithRedirect();

The port I set in Application settings should be 5173:

  VITE v4.0.4  ready in 760 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

And I’ve set the paths properly in Application Details:

Here is my router aswell. (RegisterView is just an old component I route to for now, the name obv doesnt make sense in this context)

import { createRouter, createWebHashHistory } from "vue-router";
import AppLayout from "@/layout/AppLayout.vue";
import PackPlannerView from "@/views/PackPlannerView.vue";
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
      path: "/",
      component: AppLayout,
      children: [
          path: "/",
          component: PackPlannerView,
          path: "/registerform",
          name: "registerform",
          component: () => import("@/views/RegisterView.vue"),
          path: "/callback",
          name: "callback",
          component: () => import("@/views/RegisterView.vue"),

export default router;

But I still get this error

Any ideas as to what I’m missing?

Changing the port to 3000 seems to have solved the problem for some reason!

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.