Build a Basic CRUD App with Vue.js and Node
This post shows you how to use build a basic CRUD application with Vue.js and Node. You’ll also learn how to use Okta’s Vue SDK to add authentication using OIDC.
Pavel Pletmintsev
Thanks for tutorial!
Got “Unable to parse a token from the url” when reload page and “The JWT was issued in the future” when click ‘login’ or ‘Posts manager’. What’s the problem?
Matt Raible
Do you get this error if you clone the example from GitHub and configure it to use your Okta application settings?
Pavel Pletmintsev
Yes, i tried both following the tutorial and using repo code.
Matt Raible
This is likely a clock skew issue. I’d suggest making sure your computer is synced to a network clock. For example, here’s a guide for Windows. Also, make sure your NTP ports aren’t blocked.
Matt Raible
We do token validation in the browser, and one of those checks is the expiration and issued at times. For the exact code that does this validation, see okta/okta-auth-js/…/clientBuilder.js#L59-L70.
bubs
very very nice tutorial. explains all the parts very well and how to protect your api via a JWT. thanks.
Andrey V Maltsev
Thanks a lot for this tutorial!
João José
Can I use okta / okta-vue with identityserver4?
Vue.use(Auth, {
issuer: ‘https://localhost:44392/’,//My IdentityPovider
client_id: ‘client’,//
redirect_uri: ‘http://localhost:8080/implicit/callback’,
scope: ‘openid profile address offline_access’
})
Matt Raible
Hello João,
We’re a certified OIDC provider and stick as close to the specifications as possible - in addition to addressing things like the OAuth 2.0 Threat Model. If IdentityServer4 follows the standards and is configured properly, our libraries might work with it.
Minjung Shin
Hi!
Thanks for a great tutorial. I cloned your code and set the issuer information in src/server.js and src/router/index.js.
It works great when I run it using “npm run dev”.
However, when I do a production build, it doesn’t work. For example,
$ npm run build
$ cd dist
$ http-server(simple http server)
I get “page not found error” on redirect_uri.
How can I make it work from production build?
Thanks!!
Matt Raible
Are you using the same port and URL? I’d compare the port used by npm run dev versus the port used by http-server. If they’re different, you can add a Login redirect URI to your app on Okta, or change the ports to be the same.
Alicja Franckowska
Hi,
we need to keep multiple list of users that are using our app. The problem is our software is used by multiple companies that has their own users list (not customers but employees).
Is it possible to handle not one large list of users but multiple lists? So we could describe which list are for which customer?
Matt Raible
Can you put your different users into different groups and then assign groups to your apps on Okta? If that doesn’t help, can you can please explain more about your issue in question on our Developer Forums?
ADawg
Hi,
Great tutorial. I’ve followed this and it’s working all the way up until the API tries to verify an accessToken. The console log for the node API tells me “JwtParseError: Error while resolving signing key for kid …”. Then investigating deeper, I found that my node API cannot reach my okta subdomain (or the subdomain’s response is rejected) because I am behind a corporate proxy. How can I set up the requests sent by the oktaJwtVerifier to use my proxy?
ADawg
+Matt, When I look at the @okta/jwt-verifier library on npm, it has 7 dev dependencies. One of those is ‘request’, which is a library that makes http requests. That library has ways to configure a request to use a proxy. Since the jwt-verifier package is (presumably) using ‘request’ to send and receive, what I really need is a way to configure the oktaJwtVerifier (in the server.js file) so that it passes the correct proxy setup to it’s instance of request.
See this
https://www.npmjs.com/packa…
and this
https://www.npmjs.com/packa…
Robert Damphousse
Hi @disqus_kT1zGtQcBX:disqus , you’re seeing request on that list because it’s a dev dependency (it’s part of our tests, but not the actual library). The actual library delegates downward to node-openid-connect, which has these notes on configuring their request library:
I haven’t tried configuring the proxy, but here is an example of configuring other aspects:
Hope this helps!
ADawg
Thank you Robert!
David Maksimov
Great tutorial! Thanks for this
Jone Quest
Hello, nice tutorial, but I’m getting the errors when trying to run the following:
npm i express@4.16.3 cors@2.8.4 @okta/jwt-verifier@0.0.11 sequelize@4.37.6 sqlite3@4.0.0 epilogue@0.7.1 axios@0.18.0
node-pre-gyp ERR! Tried to download(403): https://mapbox-node-binary…
node-pre-gyp ERR! Pre-built binaries not found for sqlite3@4.0.0 and node@10.4.1 (node-v64 ABI, glibc) (falling back to source compile with node-gyp)
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/build’
gyp ERR! System Linux 4.15.0-23-generic
gyp ERR! command “/usr/local/bin/node” “/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js” “configure” “–fallback-to-build” “–module=/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/lib/binding/node-v64-linux-x64/node_sqlite3.node” “–module_name=node_sqlite3” “–module_path=/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/lib/binding/node-v64-linux-x64” “–napi_version=3” "–node_abi_napi=napi"
gyp ERR! cwd /var/www/html/vuejs/my-vue-app/node_modules/sqlite3
gyp ERR! node -v v10.4.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute ‘/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/lib/binding/node-v64-linux-x64/node_sqlite3.node --module_name=node_sqlite3 --module_path=/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/lib/binding/node-v64-linux-x64 --napi_version=3 --node_abi_napi=napi’ (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:182:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:961:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:5)
node-pre-gyp ERR! System Linux 4.15.0-23-generic
node-pre-gyp ERR! command “/usr/local/bin/node” “/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/node_modules/.bin/node-pre-gyp” “install” "–fallback-to-build"
node-pre-gyp ERR! cwd /var/www/html/vuejs/my-vue-app/node_modules/sqlite3
node-pre-gyp ERR! node -v v10.4.1
node-pre-gyp ERR! node-pre-gyp -v v0.9.0
node-pre-gyp ERR! not ok
Failed to execute ‘/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/lib/binding/node-v64-linux-x64/node_sqlite3.node --module_name=node_sqlite3 --module_path=/var/www/html/vuejs/my-vue-app/node_modules/sqlite3/lib/binding/node-v64-linux-x64 --napi_version=3 --node_abi_napi=napi’ (1)
npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sqlite3@4.0.0 install: node-pre-gyp install --fallback-to-build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sqlite3@4.0.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jone/.npm/_logs/2018-07-07T19_39_13_232Z-debug.log