oktadev-blog
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?
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?
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.
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!
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
Jone Quest
Hey Matt, thanks for you help! I actually installed them separated and it worked! As for the Otka/JWT login authentication, I think that in a real business they don’t want/allow that type of authentication. Do you know any other auth method? Thanks again.
Matt Raible
I’m not sure what your requirements are. We have lots of real businesses using Okta for authentication. It’s probably best to continue this discussion on our Developer Forums. Can you please post your questions there?
Jone Quest
Hi Matt, I mean, user’s need to have an Okta account to be able to login in the app? Normally, companies will not agree with that! Instead, they will prefer a SSO (single sign on).
Matt Raible
Hi Jone: the good news is Okta is a popular SSO provider used by thousands of organizations around the world! You can read more at https://www.okta.com/produc…. If you’re using our API Products, you can add social login too.
If that’s not enough, I wrote a post recently that shows you how to enable self-registration.
Allyn Becar
Good info in this tutorial.
However I get the following error form any REST request. (I walked through the tutorial, then downloaded the code and in both cases get the same error.)
Failed to load http://localhost:8081/posts: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access. The response had HTTP status code 404.
Matt Raible
Hello Allyn,
The following line should allow anyone to call the server, from any origin:
app.use(cors())
Are you sure your server is running on 8081 and it’s not a different process?
Allyn Becar
Thanks for your help. Sorry it was my newbie error. 8081 was in use by a different process. Works like a champ now.
Derek
Excellent tutorial, thank you very much for this! I do have one question that I can’t seem to figure out… How does the Vue app handle an error received by the API. For example, if the API fails and returns the ‘Authorization header is required’ message, how does the error get to the ‘PostsManager.vue’ application so that it can present the error to the user? Another example would be the API returning a ‘Field X is required.’ message so that the Vue app can highlight the field as being required. Thanks again!
Matt Raible
Andreas is correct! To handle errors, you should add try/catch around all the API calls and handle the error events accordingly. Or use .catch() if you are using promises.
Manny
Great stuff! Thanks, up and running with Vue and Okta in no time. Thanks for sharing!
Charles Pratt
Great tutorial, but my app isn’t saving the posts or any subsequent tasks. It just shows “Loading…” alert…
Matt Raible
Do you see any errors in your developer console? If you clone this example’s GitHub repo and change it to use your Okta account, does it work?
Charles Pratt
I got it sorted out. I had put my clentID in, but put the OktaDomain in wrong. Again, great tutorial and thanks for following up!
Kyle Hatch
Any plans on a tutorial on publishing something like this? I’ve been trying to publish an app on heroku but can’t seem to get it to work.
Matt Raible
We did publish a tutorial on how to Deploy Your Secure Vue.js App to AWS. I’ve also shown how to deploy to Heroku in several of my Angular/React + Spring Boot posts on this site. What issues are you having with Heroku?
Kyle Hatch
I attempted to go through the AWS s3 route instead of Heroku, it’s working on the localhost and my network. But on the endpoint i’m getting: Code: NoSuchKey, Message: The specified key does not exist. And then in the aws-cli, i get The user-provided path ./dist does not exist when trying to sync the files.
Randall Degges
This sounds like you haven’t setup the S3 bucket right. The nouschkey means the file being requested isn’t being found.
What AWS CLI commands are you using to sync the filles into your bucket?
Kyle Hatch
So i downloaded aws-cli, and am just using regular command line, is that right? and i’m using
aws s3 sync ./dist s3://your-bucket-name with my bucket name.
Yijie Xie
Is it possible to get Organisation and Group info from user, then use epilogue middleware to implement access control on Post? It will be nice to see an example.
Randall Degges
You’ll want to do:
aws s3 sync dist/ s3://your-bucket-name --acl public-read --delete
You’ll also need to configure your S3 bucket to be a website. This guide will show you how to configure the bucket: https://docs.aws.amazon.com…
Kyle Hatch
Alright I got it to work, the okta login gives a 404, saying it’s trying to redirect to localhost, so that’s what im working on now.
Randall Degges
Cool! Go through the Okta tutorial and make sure all the necessary URIs are updated in your app, trusted origins, etc. Then you should be good to go.
Kyle Hatch
I guess i’m just confused on what the Login redirect URIs and the Initiate login URI should be, i think i have everything else set.
I’ll just link my github so you can look at it if you want.
https://github.com/Relofr/t…
Doug Richar
I’m new to building APIs and setting one up in Laravel (my first attempt) seemed like way overkill for a simple web app. I had this up and running in less than an hour. Thank you thank you thank you.
Rich
Great tutorial! What would be the best way to go about handling user roles? What if I wanted to restrict what pages a user could access or whether they could create or update data based on their role?
For instance: what if I wanted to allow only certain users to create and update posts in PostsManager? Do I have to set this up myself or is there an okta api that I could use? Are there any other guides that cover this?
Thanks in advance!
Pines
This is a great tutorial !!! espcially for people as new as me in FE development. I have a quesiton though. When I close the browser/tab and when I open again the page it redirects me to the ‘/’ instead of the enpoint I created that is accessible for all signed-up users.
What I didi with your code was get rid of Home and post-manager endpoints and only have a home page which is the one anyone can see and when clicking the login you go to the particular endpoint:
<b-navbar-nav>
<b-nav-item to="/access/request" @click.prevent=“login” v-if="!activeUser">
Login
</b-nav-item>
<b-nav-item href="#" @click.prevent=“logout” v-else="">Logout</b-nav-item>
</b-navbar-nav>
I have been looking for some time now a way to make it work but I haven’t been able to do so. Do you have any idea on suggestion for this to work?
Seorang Kapiten
you should set the roles first in database, if you want more flexibility then make a table that had reference per menu
T Mst
What if I want to develop an app with multiple related content types (posts, subjects, etc) and want to manage each in a separate tab in a SPA? Seems like a lot of code to duplicate. Since the front and back ends are both running Javascript, shouldn’t it be relatively straightforward to create both from a set of model definitions?
T Mst
Posts has only text fields. What if radio and select fields are added? Will it require an in-depth understanding of Vuejs to add them? How would the list of select tag <option>s be dynamically added to the front end based on fields on the back end model?
Matt Raible
If you add those type of fields, they’ll still be text values when you send them back to your server. For showing them on your UI, you can use arrays of text values. Showing this type of functionality is beyond the scope of this tutorial.
I’d recommend looking at Vue’s documentation for more information. https://vuejs.org/v2/guide/…
Matt Raible
Sounds like a reasonable assumption. Let us know if you figure out a way to do it. Better yet, write a blog post about it! I’d be happy to help you promote it.
You could also use JHipster and its Vue support (still in alpha) and generate everything (front and backend) from a single JDL file. https://github.com/jhipster…
Mika Kaakinen
The tutorial seems very good but I might have a different view on Angular and React.
CarbonTeq
Hi T Mst,
You should check this related to your query might be helpful for you!
https://blog.carbonteq.com/…
Manuel
Hey Jone, how did you install them separated, like which parts did you separate? I keep on getting tons of errors as well when trying to do this just like your errors.
Matt Raible
In the raw Markdown for this post, we use the following syntax:
issuer: ‘https://{yourOktaDomain}/oauth2/default’,
However, there is logic on this page that replaces “{yourOktaDomain}” with the URL of the Okta org that you last logged in to. For example, the above text renders as the following for me.
issuer: 'https://okta.okta.com/oauth2/default’
Hope this helps!
David
Please at this point - Take Your Vue.js Frontend and Auth Flows for a Test Drive, on my browser i get this error > Cannot GET /
Also at the first npm run dev, my browser adds ‘#/’ to the url which becomes http://locahost:8080/#/
Matt Raible
Can you please compare your code to the example on GitHub. SmartSynchronize is a good tool for comparing directories.
Tip: ignore your node_modules directory when comparing.
Chris
Similar to previous comments, I got errors when trying to install sqlite3.
> sqlite3@4.0.0 install ~/my-vue-app/node_modules/sqlite3
> node-pre-gyp install --fallback-to-build
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@12.2.0 (node-v72 ABI, glibc) (falling back to source compile with node-gyp)
The only solution that worked for me was reverting from node 12.2.0 back to an old version of Node from early 2018 (v8.16.0).
Dipanwita Guhathakurta
I’m getting this error even on cloning the github repo : Unhandled rejection Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client.
장윤희
hello! though passed a month ago, i think another person still seek the answer anyway so, i reply , that i found the way that this error go away just typing and execute following command on cmd “npm install sqlite3” !^-^
Roberto Amorim
Hi, thanks for your tutorial.
After I followed all steps I got the following error when I try to insert a row:
Error: expected audience is required
at verifyAudience (C:\sources\vue\vue-teste\node_modules@okta\jwt-verifier\lib.js:80:11)
at OktaJwtVerifier.verifyAccessToken (C:\sources\vue\vue-teste\node_modules@okta\jwt-verifier\lib.js:148:5)
at process._tickCallback (internal/process/next_tick.js:68:7)
Matt Raible
Hello Roberto,
Did you use the same version of jwt-verifier that’s used in this post? If not, run the following command to fix it.
npm install @okta/jwt-verifier@0.0.11
See our jwt-verifier upgrading guide for more information.
probie
Excellent article, Do you have one for Facebook or Twitter Social network authentication using Okta or Passport strategies. Thank you.
Chris Roberts
@dipanwitaguhathakurta looks like epilogue is no longer maintained and does not support sequelize v4+ … the solution I found was to switch to finale, see: https://github.com/tommyban…
Matt Raible
@disqus_kdkaX7gis7 This blog post and example have been updated. See the code changes in oktadeveloper/okta-vue-node-example-example#3. Changes to this post can be viewed in oktadeveloper/okta.github.io#3040.
Bukthi
Hi @@mattraible
I’m getting ‘Error: Please install sqlite3 package manually’ after executing ‘node ./src/server’ command. Please help me to solve this
Matt Raible
Hello,
I didn’t need to do this step when I did the tutorial, but other folks have left comments that they did. You might try running npm install sqlite3.
Scot
I fixed this error Using @okta/jwt-verifier": “^1.0.0” by adding the audience (aud) parameter.
In server.js change the line from
oktaJwtVerifier.verifyAccessToken(accessToken)
to
oktaJwtVerifier.verifyAccessToken(accessToken, ‘api://default’)
----- More at ----
“The expected audience passed to verifyAccessToken() is required, and can be either a string (direct match) or an array strings (the actual aud claim in the token must match one of the strings).”
default Lastname
Hai Allyn Becar can I ask how did you fix it? I was on port 8080 and I put 8081 already
default Lastname
@Charles Pratt how did you put your OktaDomain wrong and how did you fix it?
Allyn Becar
Its been awhile. But I think the issue was due to another process using the port (8081) Once I killed that process, evrything worked as expected.
Carsten Andersen
Hello Brandon - I’ve followed this guide to build my own app (I’ve build upon it, and changed most of the stuff to fit my case, except the server/database setup).
Thank you for this, it’s awesome. However I have a question. How complex would it be, to rewrite the backend so the database is unique for every user? Right now every user share the same database tables.
Matt Raible
Hello Carsten,
Having a different tables for each user is often called multi-tenancy. Here’s an article I found that might help with setting this up with Node.js: Getting Started with a Multi-tenant Application on Node.js.
Matt Raible
You can add Social Login to your Okta login. See Social Login Overview for more information.
senopaul
As a new Dev,i think Vue is better and super that the annoyingly indetation based PUG,looking forward to learning more
Jeremy Langer
Hi Brandon, I’m getting stuck right at the beginning. I’m just getting started with Vue.js, and I’m on Vue CLI v4.5.9. When I run “vue create my-vue-app”, I’m not sure which settings to pick. Could you update this tutorial with the latest commands and options available? Thank you!
Matt Raible
Here’s a newer version that might help: Build a CRUD App with Vue.js, Spring Boot, and Kotlin. It’s backend uses Spring Boot, but the Vue frontend should be up-to-date. You might also like Use Vue and GraphQL to Build a Secure App. See all our Vue.js content by going to the vue tag.
Jake Durell
This all works pretty well but I am having trouble getting await Vue.prototype.$auth.getUser() to provide user information before rendering. The claims are coming in and logging with group info I need for rendering–but the rendering is already done at that point.
Matt Raible
Hello Jake,
Are you using @okta/okta-vue@1.0.0 like this tutorial has? If you’re using a newer version, the API might’ve changed. Also, when creating a new app, the developer console no longer defaults to implicit flow. You’ll have to select implicit flow for this tutorial to work. Please let me know if this helps.