Vue3 Callback URL mismatch

Get Help
,
1

Hi!
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:

app.use(
    createAuth0({
        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:

image
image712×884 75.9 KB

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

image
image996×415 21.3 KB

Any ideas as to what I’m missing?

2

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