Vue/Vite router has /#/ which doesn't work with Oauth flow callback URL

Viewed 418

So I'm pretty sure this is easy but I'm brand new to Vite and I haven't hit upon the right combination yet. I have all of this working in Vue-Cli 3 but would like to get it working in Vite.

I'm using Vue Router 4.0.0 and Vue 3.2.25 and Vite and Okta as my Oauth provider. I have a sign-in redirect URI in Okta of http://localhost:8080/login/callback. When I initiate my login flow it redirects to http://localhost:8080/login/callback?code=PnrOH4v4_... which resolves to my Home route of "/" and not my LoginCallback route of "/login/callback". I'm pretty sure it's the hash. I've tried various combinations of things but haven't hit the right combination yet.

Here's my router.

import { createRouter, createWebHashHistory } from "vue-router";
import { LoginCallback, navigationGuard } from "@okta/okta-vue";

import Home from "../views/Home.vue";
import User from "../views/User.vue";
import Profile from "@/components/Profile.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/login/callback",
    component: LoginCallback,
  },
  {
    path: "/user",
    name: "User",
    component: User,
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: "/profile",
    component: Profile,
    meta: {
      requiresAuth: true,
    },
  },
];

console.log("base = " + import.meta.env.BASE_URL);
const router = createRouter({
  mode: "history",
  history: createWebHashHistory(import.meta.env.BASE_URL),
  hash: false,
  routes,
});

router.beforeEach(navigationGuard);

export default router;

and here's my vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  base: "http://localhost:8080/",
  server: {
    port: 3030,
  },
  preview: {
    port: 8080,
  },
  plugins: [vue()],
  resolve: {
    alias: [
      { find: "@", replacement: path.resolve(__dirname, "./src") },
      {
        // I got this from https://github.com/okta/okta-auth-js/issues/641
        find: "@okta/okta-auth-js",
        replacement: require.resolve(
          "@okta/okta-auth-js/dist/okta-auth-js.umd.js"
        ),
      },
      { find: "@config", replacement: path.resolve(__dirname, "./src/config") },
    ],
  },
});
1 Answers

I believe you don't need any more alias for replacing "@okta/okta-auth-js" with "@okta/okta-auth-js/dist/okta-auth-js.umd.js" since this issue was fixed in the newest version of Okta Vue SDK.

Since 5.x version you need to install @okta/okta-auth-js as dependency. Here you can find more information about migration.

Related