index.js:76 [okta-auth-sdk] WARN: a saved auth transaction exists in storage. This may indicate another auth flow is already in progress.

[PavankalyanPayyavula]

Hi,
I am using vue 3 with vite build tool.
Okta routing is working fine as expected when I am accessing the application but when I deployed in Dev Env the below error is showing in console.log
index.js:76 [okta-auth-sdk] WARN: a saved auth transaction exists in storage. This may indicate another auth flow is already in progress.

Versions I am using in my project
node: 20.9.0
"vue": "^3.4.21",
"vite": "^5.2.10",
"@okta/okta-auth-js": "^7.5.1",
"@okta/okta-vue": "^5.7.0".

Initially I thought it is a okta-vue issue so I raised a bug ticket in Okta-Vue but I understood that there is some issue with Okta Auth. Please check the below screenshot.

Reproduction Steps?

Since this is not my personal project, I am not posting any steps to reproduce.

SDK Versions

"node": "20.9.0",
"vue": "^3.4.21",
"vite": "^5.2.10",
"@okta/okta-auth-js": "^7.5.1",
"@okta/okta-vue": "^5.7.0".

Additional Information?

No response

[jaredperreault-okta]

Since this is not my personal project, I am not posting any steps to reproduce.

Since you're unable to provide repro steps from your commercial app, please create a minimal example in a separate repo (this sample can be used as a starting point) and ideally a live demo

[PavankalyanPayyavula]

Here is my main.js file.

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import { OktaAuth } from "@okta/okta-auth-js";
import OktaVue from "@okta/okta-vue";
import router from "./router";
import axios from "axios";
import CONFIG from "./config";

const app = createApp(App);
const pinia = createPinia();
axios.defaults.withCredentials = true;

export const oktaAuth = new OktaAuth({
  clientId: CONFIG.OKTA.CLIENT_ID,
  issuer: CONFIG.OKTA.ISSUER,
  redirectUri: CONFIG.OKTA.REDIRECT_URI,
  postLogoutRedirectUri: CONFIG.OKTA.POST_LOGOUT_REDIRECT_URI,
  scopes: ["openid", "profile", "email"],
  pkce: true,
});

app.use(router);
app.use(OktaVue, { oktaAuth });
app.use(pinia);
app.mount("#app");

Here is my App.vue file

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from "vue";
import { useAuth } from "@okta/okta-vue";
import { debounce } from "lodash";
import axios from "axios";

import { useWindowSizeStore } from "./stores/modules/windowSize";
import { useLoggedInUserStore } from "./stores/modules/loggedInUser";
import { useCouponStore } from "./stores/modules/coupons";

const $auth = useAuth();
const loggedInUser = useLoggedInUserStore();
const coupons = useCouponStore();
const { setWidth } = useWindowSizeStore();

onMounted(() => {
  $auth.authStateManager.subscribe(async (authState) => {
    if (authState.isAuthenticated) {
      const accessToken = $auth.getAccessToken();
      axios.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`;
      await loggedInUser.getLoggedinUserFromAPI().then(() => {
        const rstarRoleType = loggedInUser.getRStarRoleType;
        if (rstarRoleType === "CLIENT" || rstarRoleType === "ADMIN") {
          coupons.getCoupons();
        }
      });
    }
  });
  setWidth(window.innerWidth);
  window.addEventListener("resize", setWindowWidth, false);
});

onUnmounted(() => {
  window.removeEventListener("resize", setWindowWidth, false);
});

const setWindowWidth = debounce(() => {
  setWidth(window.innerWidth);
}, 0.01);

</script>

Here is my index.js file (router file)

import { createRouter, createWebHistory } from "vue-router";
import { LoginCallback, navigationGuard  } from "@okta/okta-vue";
import { oktaAuth } from "../main.js";
import { useLoggedInUserStore } from "../stores/modules/loggedInUser";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/sso/auth",
      component: LoginCallback,
    },
    {
      path: "/",
      name: "Dashboard",
      meta: { requiresAuth: true },
      component: () => import("../components/Pages/dashboard.vue"),
    },
    {
      path: "/userManagement",
      name: "User Management",
      meta: { title: "User Management - R-Star Client", requiresAuth: true },
      component: () => import("../components/Pages/userManagement.vue"),
    },
    {
      path: "/login",
      name: "Login",
      meta: { title: "Login - R-Star Client", requiresAuth: false },
      component: () => import("../components/Pages/login.vue"),
    },
  ],
});

router.beforeEach(navigationGuard);
router.afterEach((to) => {
  document.title = to.meta.title || "R-Star Client";
});

export default router;

Version I am using is :

"@okta/okta-auth-js": "6.2.0",
"@okta/okta-vue": "5.4.0",
"vite": "5.3.0",
"vue": "^3.4.29",
"vue-router": "^4.3.2",

Node: v20.11.1
Npm: 10.2.4

When I am using in local by npm run dev it is working fine. But When I build it then the above error mentioned in screenshot is getting.

According to my investigation, Rollup used by Vite for build is not able to import Okta-Auth-js in main.js. During local run vite is using ESBuild to start the serve.

[jaredperreault-okta]

@PavankalyanPayyavula I used this sample app, upgrade it to use [email protected] and was able to build no problems

jared:okta-hosted-login$ yarn vite build
yarn run v1.22.19
$ /Users/jaredperreault/Code/devex/samples/vue/okta-hosted-login/node_modules/.bin/vite build
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.3.3 building for production...
✓ 309 modules transformed.
dist/index.html                               0.44 kB │ gzip:   0.30 kB
dist/assets/logo-CPmPqqKk.png                 6.85 kB
dist/assets/outline-icons-BxYFLS9j.woff2     13.58 kB
dist/assets/outline-icons-Cea8WKql.woff      16.80 kB
dist/assets/flags-DOLqOU7Y.png               28.12 kB
dist/assets/outline-icons-CcXn14M0.ttf       34.09 kB
dist/assets/outline-icons-C8GVsgD2.eot       34.39 kB
dist/assets/brand-icons-B9NtTMAN.woff2       76.61 kB
dist/assets/icons-DQndEtzL.woff2             79.44 kB
dist/assets/brand-icons-DqZqNCSp.woff        89.82 kB
dist/assets/icons-Ic6bH3kJ.woff             103.30 kB
dist/assets/brand-icons-BvOfcHLm.ttf        132.73 kB
dist/assets/brand-icons-BP-byM1z.eot        133.03 kB
dist/assets/outline-icons-DYS_BsKA.svg      144.32 kB │ gzip:  37.19 kB
dist/assets/icons-v_-DUAvR.ttf              202.62 kB
dist/assets/icons-DRNqNWD9.eot              202.90 kB
dist/assets/brand-icons-CwYvrPXy.svg        715.89 kB │ gzip: 241.87 kB
dist/assets/icons-QT1_Ihr7.svg              897.43 kB │ gzip: 248.88 kB
dist/assets/index-DJ2rSPac.css            1,353.90 kB │ gzip: 162.11 kB
dist/assets/index-CMPxcq1w.js             1,008.36 kB │ gzip: 309.94 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 1.34s
✨  Done in 1.75s.

What build errors are you seeing?

[PavankalyanPayyavula]

Hey @jaredperreault-okta, there is no error in the build, but okta-token-storage is not generating in browser storage. But in local when I run npm run serve application is opening properly, okta-token-storage also generating for localhost.

Post build okta-shared-transaction-storage is having some value but in my local run I didn't see any value for okta-shared-transaction-storage

[PavankalyanPayyavula]

any clue on it?

[jaredperreault-okta]

I am not able to reproduce your issue.

Do you experience the same issue with the sample?

[31453]

I have a very similar issue. In development, locally, everything works. However, when deployed behind nginx, the app ends on the /login/callback?code=asdfghjkl. I see a blip of the warning mentioned in the title of this issue. Any thoughts or more information I can provide?

[jaredperreault-okta]

@31453 Are you able to test your nginx configuration with this sample app?

Are you certain your nginx configuration is routing the path of requests to the app. This usually involves some sort of wildcard routing rule. If all requests to the app resolve as app.foo/, then the Authorization Code handshake will not complete. The route needs to land on app.foo/login/callback?code=****

[PavankalyanPayyavula]

I am not able to reproduce your issue.

Do you experience the same issue with the sample?

@jaredperreault-okta I haven't tried the sample app because my application architecture is slightly different from it.
For your understanding. I have added the consoles as shown in below.

package.json

{
  "name": "rstar-client-ui",
  "version": "3.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --mode localServe",
    "build": "vite build",
    "build-local": "vite build --mode localServe",
    "build-development": "vite build --mode development --debug",
    "build-staging": "vite build --mode staging",
    "build-production": "vite build --mode production",
    "preview": "vite preview",
    "test-unit": "vitest",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "analyze": "source-map-explorer dist/assets/index-*.js"
  },
  "license": "ISC",
  "dependencies": {
    "@okta/okta-auth-js": "^7.7.0",
    "@okta/okta-vue": "^5.7.0",
    "@vuepic/vue-datepicker": "^6.0.3",
    "axios": "^1.6.2",
    "chart.js": "^4.4.0",
    "moment": "^2.29.4",
    "papaparse": "^5.4.1",
    "pinia": "^2.1.6",
    "save": "^2.9.0",
    "vue": "^3.4.29",
    "vue-chartjs": "^5.2.0",
    "vue-router": "4.4.0",
    "vuestic-ui": "1.8.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-basic-ssl": "^1.0.1",
    "@vitejs/plugin-vue": "4.6.2",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/test-utils": "^2.3.2",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.0.0",
    "material-design-icons-iconfont": "^6.7.0",
    "prettier": "^2.8.8",
    "rollup-plugin-visualizer": "^5.12.0",
    "sass": "^1.64.0",
    "source-map-explorer": "^2.5.3",
    "vite": "5.3.3",
    "vitest": "^1.3.1"
  }
}

vite.config.js

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import basicSsl from "@vitejs/plugin-basic-ssl";
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig(({ mode }) => {
  // Log command and mode for debugging if needed
  const env = loadEnv(mode, process.cwd());
  process.env = { ...process.env, ...env };

  const isLocal = mode === "localServe";
  return {
    plugins: [
      vue(),
      visualizer({
        open: true, // Automatically open the visualization in your default browser
      }),
      isLocal ? basicSsl() : null
    ].filter(Boolean), // Remove null values
    server: {
      port: 8081,
      https: true,
    },
    define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  };
});

main.js

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import OktaAuth from '@okta/okta-auth-js/core';
import OktaVue from "@okta/okta-vue";
import router from "./router";
import axios from "axios";
import { createVuestic } from "vuestic-ui";
import "vuestic-ui/css";
import "material-design-icons-iconfont/dist/material-design-icons.min.css";
import CONFIG from "./config";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";

axios.defaults.withCredentials = true;

const oktaAuth = new OktaAuth({
  clientId: CONFIG.OKTA.CLIENT_ID,
  issuer: CONFIG.OKTA.ISSUER,
  redirectUri: CONFIG.OKTA.REDIRECT_URI,
  postLogoutRedirectUri: CONFIG.OKTA.POST_LOGOUT_REDIRECT_URI,
  scopes: ["openid", "profile", "email"],
  pkce: true,
});

oktaAuth.authStateManager.subscribe(authState => {
  console.log('authState inside subscribe main.js file', authState?.accessToken)
  axios.defaults.headers.common["Authorization"] = `Bearer ${authState?.accessToken?.accessToken}`;
});

console.log('authState', oktaAuth.token.isLoginRedirect())

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.use(OktaVue, { oktaAuth });
app.use(router);
app.component("VueDatePicker", VueDatePicker);
app.use(
  createVuestic({
    config: {
      colors: {
        variables: {
          primary: "#bf0000",
        },
      },
    },
  })
);
app.mount("#app");

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script setup>
import { onMounted, onUnmounted } from "vue";
import { useAuth } from "@okta/okta-vue";
import { debounce } from "lodash";
import axios from "axios";

import { useWindowSizeStore } from "./stores/modules/windowSize";
import { useLoggedInUserStore } from "./stores/modules/loggedInUser";
import { useCouponStore } from "./stores/modules/coupons";

const $auth = useAuth();
const loggedInUser = useLoggedInUserStore();
const coupons = useCouponStore();
const { setWidth } = useWindowSizeStore();
console.log("Check 1");
onMounted(() => {
  console.log("Check 2");
  $auth.authStateManager.subscribe(async (authState) => {
    console.log("Check 3");
    if (authState.isAuthenticated) {
      await loggedInUser.getLoggedinUserFromAPI().then(() => {
        const rstarRoleType = loggedInUser.getRStarRoleType;
        if (rstarRoleType === "CLIENT" || rstarRoleType === "ADMIN") {
          coupons.getCoupons();
        }
      });
    }
  });
  setWidth(window.innerWidth);
  window.addEventListener("resize", setWindowWidth, false);
});

onUnmounted(() => {
  window.removeEventListener("resize", setWindowWidth, false);
});

const setWindowWidth = debounce(() => {
  setWidth(window.innerWidth);
}, 0.01);
</script>

router.js

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/sso/auth",
      component: LoginCallback,
    },
    {
      path: "/",
      name: "Dashboard",
      meta: { requiresAuth: true },
      component: () => import("../components/Pages/dashboard.vue"),
    },
    {
      path: "/kpi",
      name: "KPI",
      meta: { title: "KPI - R-Star Client", requiresAuth: true },
      component: () => import("../components/Pages/kpi.vue"),
    },
    {
      path: "/:catchAll(.*)",
      name: "404",
      meta: { title: "404 Not found - R-Star Client", requiresAuth: false },
      component: () => import("../components/Pages/error.vue"),
      props: { isNotFound: false },
    },
  ],
});

router.beforeEach(oktaNavigationGuard);
router.afterEach((to) => {
  document.title = to.meta.title || "R-Star Client";
});

export default router;

For understanding I have added the console.logs to identify the flow.
Below image is while running in local. (Working fine as expected)

Below Image is when deployed in S3 bucket using codebuild.

I understood that after the first redirect the app should land on app.com/sso/auth?code=**** but I didn't get why it is landing on app.com/?code=**** post build and deployment.

Here is the build

[email protected] build-development
98 | > vite build --mode development --debug
99 |  
100 | 2024-07-18T06:21:58.743Z vite:config bundled config file loaded in 95.88ms
101 | 2024-07-18T06:21:58.767Z vite:config using resolved config: {
102 | plugins: [
103 | 'vite:build-metadata',
104 | 'vite:watch-package-data',
105 | 'vite:pre-alias',
106 | 'alias',
107 | 'vite:modulepreload-polyfill',
108 | 'vite:resolve',
109 | 'vite:html-inline-proxy',
110 | 'vite:css',
111 | 'vite:esbuild',
112 | 'vite:json',
113 | 'vite:wasm-helper',
114 | 'vite:worker',
115 | 'vite:asset',
116 | 'vite:vue',
117 | 'visualizer',
118 | 'vite:wasm-fallback',
119 | 'vite:define',
120 | 'vite:css-post',
121 | 'vite:build-html',
122 | 'vite:worker-import-meta-url',
123 | 'vite:asset-import-meta-url',
124 | 'vite:force-systemjs-wrap-complete',
125 | 'commonjs',
126 | 'vite:data-uri',
127 | 'vite:dynamic-import-vars',
128 | 'vite:import-glob',
129 | 'vite:build-import-analysis',
130 | 'vite:esbuild-transpile',
131 | 'vite:terser',
132 | 'vite:reporter',
133 | 'vite:load-fallback'
134 | ],
135 | server: {
136 | preTransformRequests: true,
137 | port: 8081,
138 | https: true,
139 | sourcemapIgnoreList: [Function: isInNodeModules$1],
140 | middlewareMode: false,
141 | fs: {
142 | strict: true,
143 | allow: [Array],
144 | deny: [Array],
145 | cachedChecks: undefined
146 | }
147 | },
148 | define: {
149 | __VUE_OPTIONS_API__: true,
150 | __VUE_PROD_DEVTOOLS__: false,
151 | __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
152 | },
153 | mode: 'development',
154 | build: {
155 | target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
156 | cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
157 | outDir: 'dist',
158 | assetsDir: 'assets',
159 | assetsInlineLimit: 4096,
160 | cssCodeSplit: true,
161 | sourcemap: false,
162 | rollupOptions: {},
163 | minify: 'esbuild',
164 | terserOptions: {},
165 | write: true,
166 | emptyOutDir: null,
167 | copyPublicDir: true,
168 | manifest: false,
169 | lib: false,
170 | ssr: false,
171 | ssrManifest: false,
172 | ssrEmitAssets: false,
173 | reportCompressedSize: true,
174 | chunkSizeWarningLimit: 500,
175 | watch: null,
176 | commonjsOptions: { include: [Array], extensions: [Array] },
177 | dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
178 | modulePreload: { polyfill: true },
179 | cssMinify: true
180 | },
181 | resolve: {
182 | mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
183 | conditions: [],
184 | extensions: [
185 | '.mjs',  '.js',
186 | '.mts',  '.ts',
187 | '.jsx',  '.tsx',
188 | '.json'
189 | ],
190 | dedupe: [ 'vue' ],
191 | preserveSymlinks: false,
192 | alias: [ [Object], [Object] ]
193 | },
194 | ssr: {
195 | target: 'node',
196 | external: [],
197 | optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
198 | },
199 | configFile: '/codebuild/output/src2218171728/src/repo_20240718/vite.config.js',
200 | configFileDependencies: [
201 | '/codebuild/output/src2218171728/src/repo_20240718/vite.config.js'
202 | ],
203 | inlineConfig: {
204 | root: undefined,
205 | base: undefined,
206 | mode: 'development',
207 | configFile: undefined,
208 | logLevel: undefined,
209 | clearScreen: undefined,
210 | build: {}
211 | },
212 | root: '/codebuild/output/src2218171728/src/repo_20240718',
213 | base: '/',
214 | rawBase: '/',
215 | publicDir: '/codebuild/output/src2218171728/src/repo_20240718/public',
216 | cacheDir: '/codebuild/output/src2218171728/src/repo_20240718/node_modules/.vite',
217 | command: 'build',
218 | isWorker: false,
219 | mainConfig: null,
220 | bundleChain: [],
221 | isProduction: false,
222 | css: { lightningcss: undefined },
223 | esbuild: { jsxDev: true },
224 | preview: {
225 | port: undefined,
226 | strictPort: undefined,
227 | host: undefined,
228 | https: true,
229 | open: undefined,
230 | proxy: undefined,
231 | cors: undefined,
232 | headers: undefined
233 | },
234 | envDir: '/codebuild/output/src2218171728/src/repo_20240718',
235 | env: {
236 | VITE_API_ROOT_ENDPOINT: 'https://dev-rstar-api.****-it.com/',
237 | VITE_CLIENT_UI_ROOT_ENDPOINT: 'https://dev-rstar-client.*****-it.com/',
238 | VITE_REDIRECT_URI: 'https://dev-rstar-client.****-it.com/sso/auth',
239 | VITE_DEFAULT_IMAGE_URL: 'https://dev-rstar.****-it.com/assets/image/user-profile.png',
240 | VITE_S3_OBJECT_URL: 'https://rpsp-rstar-employee-images-development.s3-ap-northeast-1.amazonaws.com',
241 | VITE_CF_IMAGE_URL: 'https://dev-rstar.*****-it.com/employee-images/',
242 | VITE_USER_UI_ENDPOINT: 'https://dev-rstar.*****-it.com/',
243 | VITE_ADMIN_UI_ENDPOINT: 'https://dev-rstar-admin.*****-it.com/',
244 | VITE_OKTA_CLIENT_ID: '0oa***********7',
245 | VITE_RSTAR_PROFILE_PAGE: 'https://dev-rstar.****-it.com/profile/?id=',
246 | VITE_POST_LOGOUT_REDIRECT_URI: 'https://dev-rstar-client.****-it.com/login/',
247 | VITE_USER_NODE_ENV: 'development',
248 | BASE_URL: '/',
249 | MODE: 'development',
250 | DEV: true,
251 | PROD: false
252 | },
253 | assetsInclude: [Function: assetsInclude],
254 | logger: {
255 | hasWarned: false,
256 | info: [Function: info],
257 | warn: [Function: warn],
258 | warnOnce: [Function: warnOnce],
259 | error: [Function: error],
260 | clearScreen: [Function: clearScreen],
261 | hasErrorLogged: [Function: hasErrorLogged]
262 | },
263 | packageCache: Map(1) {
264 | 'fnpd_/codebuild/output/src2218171728/src/repo_20240718' => {
265 | dir: '/codebuild/output/src2218171728/src/repo_20240718',
266 | data: [Object],
267 | hasSideEffects: [Function: hasSideEffects],
268 | webResolvedImports: {},
269 | nodeResolvedImports: {},
270 | setResolvedCache: [Function: setResolvedCache],
271 | getResolvedCache: [Function: getResolvedCache]
272 | },
273 | set: [Function (anonymous)]
274 | },
275 | createResolver: [Function: createResolver],
276 | optimizeDeps: {
277 | holdUntilCrawlEnd: true,
278 | esbuildOptions: { preserveSymlinks: false }
279 | },
280 | worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
281 | appType: 'spa',
282 | experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
283 | getSortedPlugins: [Function: getSortedPlugins],
284 | getSortedPluginHooks: [Function: getSortedPluginHooks]
285 | }
286 | vite v5.3.3 building for development...
287 | transforming...
288 | 2024-07-18T06:22:00.406Z vite:resolve 0.63ms ./fonts/MaterialIcons-Regular.eot -> /codebuild/output/src2218171728/src/repo_20240718/node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.eot
289 | 2024-07-18T06:22:00.406Z vite:resolve 0.81ms ./fonts/MaterialIcons-Regular.woff2 -> /codebuild/output/src2218171728/src/repo_20240718/node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff2
290 | 2024-07-18T06:22:00.445Z vite:resolve 0.13ms ./fonts/MaterialIcons-Regular.woff -> /codebuild/output/src2218171728/src/repo_20240718/node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.woff
291 | 2024-07-18T06:22:00.466Z vite:resolve 0.12ms ./fonts/MaterialIcons-Regular.ttf -> /codebuild/output/src2218171728/src/repo_20240718/node_modules/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular.ttf
292 | 2024-07-18T06:22:03.029Z vite:resolve 0.66ms ../../assets/icons/rank-gold.svg -> /codebuild/output/src2218171728/src/repo_20240718/src/assets/icons/rank-gold.svg
293 | 2024-07-18T06:22:03.029Z vite:resolve 0.76ms ../../assets/icons/rank-silver.svg -> /codebuild/output/src2218171728/src/repo_20240718/src/assets/icons/rank-silver.svg
294 | 2024-07-18T06:22:03.029Z vite:resolve 0.78ms ../../assets/icons/rank-bronze.svg -> /codebuild/output/src2218171728/src/repo_20240718/src/assets/icons/rank-bronze.svg
295 | ✓ 1384 modules transformed.
296 | rendering chunks...
297 | computing gzip size...
298 | dist/index.html                                       0.86 kB │ gzip:   0.46 kB
299 | dist/assets/favicon-DC5VDNRr.ico                     34.49 kB
300 | dist/assets/MaterialIcons-Regular-DOtZ65Va.woff2    125.12 kB
301 | dist/assets/MaterialIcons-Regular-BjXOXp5c.eot      143.45 kB
302 | dist/assets/MaterialIcons-Regular-FsbMSDLx.woff     160.58 kB
303 | dist/assets/MaterialIcons-Regular-DEUTIz1o.ttf      347.59 kB
304 | dist/assets/login-DIVJZqPU.css                        0.08 kB │ gzip:   0.09 kB
305 | dist/assets/userManagement-FvPFZHfY.css               1.31 kB │ gzip:   0.51 kB
306 | dist/assets/admin-header-DO9--AU2.css                 1.72 kB │ gzip:   0.64 kB
307 | dist/assets/dashboard-DD6QsctW.css                    1.76 kB │ gzip:   0.71 kB
308 | dist/assets/kpi-CdB8gMGh.css                         12.12 kB │ gzip:   2.76 kB
309 | dist/assets/index-GsqSCVAM.css                      310.32 kB │ gzip:  52.06 kB
310 | dist/assets/Alert-CD7agyS3.js                         0.62 kB │ gzip:   0.42 kB
311 | dist/assets/login-Df2inMma.js                         0.86 kB │ gzip:   0.54 kB
312 | dist/assets/progress-bar-PoCwRBQ6.js                  0.92 kB │ gzip:   0.54 kB
313 | dist/assets/error-61ioaJuV.js                         1.13 kB │ gzip:   0.66 kB
314 | dist/assets/admin-header-BRqdCZ_W.js                 10.51 kB │ gzip:   4.66 kB
315 | dist/assets/dashboard-CUbmzRe0.js                    13.40 kB │ gzip:   4.23 kB
316 | dist/assets/userManagement-DFxH1xTL.js               14.92 kB │ gzip:   5.13 kB
317 | dist/assets/papaparse.min-CwLMdBMF.js                19.44 kB │ gzip:   7.13 kB
318 | dist/assets/kpi-BRtZBmZW.js                         227.69 kB │ gzip:  76.19 kB
319 | dist/assets/index-DKW0cpXn.js                     1,179.09 kB │ gzip: 359.77 kB
320 |  
321 | (!) Some chunks are larger than 500 kB after minification. Consider:
322 | - Using dynamic import() to code-split the application
323 | - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
324 | - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
325 | ✓ built in 10.77s

[jaredperreault-okta]

@PavankalyanPayyavula

I understood that after the first redirect the app should land on app.com/sso/auth?code=**** but I didn't get why it is landing on app.com/?code=**** post build and deployment.

I believe this is the problem you're running into. If your app never navigates to /sso/auth, you'll never complete the OAuth transaction and won't be issued tokens.

The Vue development server will route all the network traffic correctly, so in dev mode every works because the redirect from the Authorization Server lands on the /sso/auth route and the OAuth transaction completes

Your deployed environment doesn't seem to be routing the traffic correctly. Serving web apps from a server environment usually requires some sort of wildcard routing that maintains the correct path

If your app works under the following entrypoints:

• vite dev (development build and development server)
• vite build then vite serve (prod build and static asset server to confirm prod build)
  Then this indicates your deployed environments routing rules are most likely the cause

[PavankalyanPayyavula]

Okay, what is the solution I should try to fix this.

[jaredperreault-okta]

@PavankalyanPayyavula

Okay, what is the solution I should try to fix this.

I am going to assume by this comment you tried vite dev and vite build / vite serve and your app work in both cases. This points to the routing rules of your deployed environment being the issue. I'm not sure if you have a backend/infrastructure team, but I'd recommend you reach out to them. You could try reaching out to Okta Support as well, but it seems like this problem is on your end, so I am not sure if they could do much to assist.

I am closing because this issue doesn't seem related to @okta/okta-auth-js or @okta/okta-vue