Using Vue.js with an Express server, integrating Okta for authentication and deploying to Heroku. Handling 404 errors on implicit/callback

My Vue app is built using vue-cli and is authorized through Okta. I have deployed it to Heroku as a production setup, but I am starting to question if Okta supports production on the freemium level?

I have been going through the documentation, but I feel like I might be missing something...

Here's how the app is set up:

In the src directory, there are common files like router/index.js where the Okta library is connected:

Vue.use(Auth, {
  issuer: 'dev_url',
  client_id: 'some_string',
  redirect_uri: window.location.origin + '/implicit/callback',
  scope: 'openid profile email'
})

Also, in the routes array:

{
  path: '/implicit/callback',
  component: Auth.handleCallback()
},

There is a server.js file in src/ which handles jwt verification and serves the build folder:

app.use(express.static(path.join(__dirname, "../dist")))
...
const oktaJwtVerifier = new OktaJwtVerifier({
    clientId: '<some_id>',
    issuer: '<some_url>'
})
...
app.get('/', authRequired(), (req, res, next) => {
    return res.sendFile(path.join(__dirname, '../dist/index.html'))
 })

Everything works perfectly on localhost with webpack-dev-server. However, after deploying to Heroku, I encounter a 404 error on the implicit/callback route...

Below are the scripts used:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js",
    "server": "node ./src/server",
    "start": "node ./src/server",
    "heroku-prebuild": "npm install && npm run build"
},

During the login process post-build, an odd call is made from the browser:

https://<base_url>.herokuapp.com/implicit/callback#id_token=<huge_hashed_string>&token_type=Bearer&expires_in=3600&scope=openid+email+profile&state=<huge_hashed_string>

Despite this, we encounter a 404 error and authentication does not proceed.

If you clone the app and run npm install, you can use npm run dev followed by npm start.

Attempts so far:

I have tried adjusting routes extensively, but I am running out of ideas. Since it works locally, I suspect there may be an issue with setting up the Okta app or a limitation mentioned in the documentation that prevents me from running things smoothly.

I've added the production URL to the Login redirect URIs in the dashboard configuration, and included base URLs. Any insights on this issue would be greatly appreciated.

Answer №1

It's actually not as difficult as it seems. The solution I discovered involves revisiting token storage and utilizing the OktaClient rather than their implicit callback configuration. I managed to resolve the issue by following the steps outlined in this informative tutorial.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on applying array values as styles to a div element

I have a list of numbers stored in an array and an equal number of div elements. I need to assign each value from the array to a corresponding div. var xList = [265, 152, 364] var yList = [125, 452, 215] All div elements have the same class name. function ...

Tips for sending icons as properties in React using TypeScript

Recently diving into typescript, I embarked on a straightforward project. Within this project lies a sidebar component that comprises multiple sidebarNavigationItem components. Each of these Sidebar items consists of an Icon and Title, showcased below. Si ...

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

While using the Material UI Button component, I encountered an issue with conditionally determining the variant of the button based on screen size. Specifically, I want the variant to be 'outlined' on medium and larger screens, and no variant at ...

Adding animation to a div that is being appended can be done by using JavaScript functions and

I am looking to incorporate animation into my title div. Below is the HTML code I have so far: <div class="particles" id="tittle"> <!-- Displaying title from Firestore using JavaScript --> </div> Here is the CSS cod ...

Browser Compatibility with AngularJS

Encountering an issue with AngularJS compatibility - are there any features not supported by Google Chrome? We have developed the AngularUI Calendar and utilized the JSFiddle link below: http://jsfiddle.net/joshkurz/xqjtw/52/ The UI calendar works on Fi ...

Is there a seamless way to effortlessly upload massive files to s3 through an adminjs dashboard without encountering any glitches?

Attempting to upload large files (40mbs+) to s3 using the @adminjs\upload feature on the adminJS dashboard. While testing locally, most files are successfully uploaded but it takes a considerable amount of time. However, when attempting this on the AW ...

The Jquery .change() function refreshes the results just once

I am working on a form with 3 input fields named #first, #second, and #third, along with a fourth field labeled as #theResult. <div id="addFields"> <span id="addFieldsHeader">Add The Fields</span> <table style="margin:0 auto;"> ...

How to style a date and time object using angularjs

What is the best way to convert a PHP datetime object to the format "May-27-1990"? ...

Converting jQuery selectors into JSON objects

I would like to create a JSON object from a jQuery selector string, which is the text inside $(), without actually selecting elements from the DOM. Is there a built-in function in jQuery that can achieve this task or are there any open-source libraries ava ...

Converting a 'div' element into a dropdown menu with CSS and Jquery

I am facing a challenge where I have a collection of buttons enclosed in a div that I want to resemble a dropdown: <div id = "group"> <label> Group: </ label> <div value =" 1hour "> 1h < / div> <div value =" 2hou ...

Can Jest Vue handle loading dynamic imports for snapshot testing?

Having an issue with unit testing a Vue component that dynamically loads its child component. Jest and Vue utils don't seem to render it. Any suggestions on how to tackle this? Here's the component code: <template> <component :is=&quo ...

document.addEventListener versus $().on

Recently, I came across an odd behavior while trying to add event listeners to the document. Strangely, when adding listeners to HTMLElements, everything worked smoothly, but for some reason, adding a listener to the document did not have any effect. Howev ...

How to incorporate Node module into Storybook Vue

Is there a way to ensure that all stories are styled using elementPlus? I have attempted to accomplish this by wrapping the elements, but it seems that elementPlus is not being loaded correctly. How can I successfully load elementPlus within all stories? ...

JavaScript Object Retrieval: [object Object]

I am currently facing an issue with my node/express app where I keep running into a problem with [object Object]. When rendering a page, I use the following code: app.get('/members', checkAuthentication, function(req, res){ res.render('m ...

Leverage tinyMCE in VUEJS 2 seamlessly without the need for an API key

I am looking to use TinyMCE locally without needing an API Key. Currently, I have implemented the following code: To integrate TinyMCE with vueJS 2.x, you can run the following command: npm install --save "@tinymce/tinymce-vue@^3" After installing, you c ...

Create a JavaScript function that replicates the behavior of submitting a form when logging

I successfully implemented a logout button that ends sessions established using express server ExpressOIDC/express-session. When the user clicks on the logout button, they are redirected to the logged out view. Here is the HTML for the logout button: &l ...

Every operation pertains to the initial element

<textarea id="bbcode_enabled"></textarea> <textarea id="bbcode_enabled"></textarea> <textarea id="bbcode_enabled"></textarea> $(document).ready(function() { $("#bbcode_enabled").each(function () { $(this).b ...

Retrieving saved MongoDB data using Socket.io in React: A comprehensive guide

I've been exploring tutorials on how to display pre-existing chat messages before joining a chatroom, but I'm struggling with implementing it in React. Below are some questions regarding the server-side setup. On the client side, within the cons ...

The jQuery equivalent for selecting the progress bar value in Webkit would be `$('progress

I'm looking to adjust the transition time for an HTML5 <progress> bar using JavaScript (jQuery), but I've been struggling to find the correct selector in jQuery to achieve this. Here are my current attempts: CSS: progress::-webkit-progre ...

Can you explain the distinction between the terms "vite" and "vite preview"?

I recently created a project template with the help of vite. While looking through my package.json file, I noticed the following section; "scripts": { "dev": "vite", "build": "vue-tsc --noEmit &&a ...