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") },
],
},
});