Vue.js，Express Server，Okta，通过隐式/回调部署到Heroku，404

Question

I have an Vue app built with vue-cli and authorized through Okta. Pushed up to Heroku as a production setup, but I'm kinda wondering if Okta doesn't do production on the freemium level?

Am I missing something in the docs about this...

The setup:

Got a src dir with the usual things router/index.js has Okta library attached:

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

and this is in the routes array:

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

Got a server.js in src/ and got some jwt verification and 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'))
 })

These all seem good, and everything works like a charm on localhost. Working with webpack-dev-server, but with a push up to heroku I get a 404 on the implicit/callback route...

Here are the scripts:

"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"
},

When build goes through and all the happy times should commence I click on login and this call gets sent out through the browser, which seems a bit weird:

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>

And we crash out on the 404 and no auth occurs.

If you clone it and npm install you can run npm run dev and npm start .

Things I've tried:

It's been a lot of route manipulation, not sure what else to mess around with, mostly because it works locally honestly I think I'm either missing something in setting up the Okta app or something in the docs that won't let me run things this way.

I've added the production url to Login redirect URIs in dashboard setup. and accepted base urls. Anyone have any input on this one?

Answer 1

Well it's not too bad. The answer I found is that you have to go back to token storage and use the OktaClient instead of their implicit callback setup. Solved the problem by following This tutorial.