# The Lazy Developer's Guide to Authentication with Vue.js **URL:** \ **Category:** Developer Blog Comments\ **Created:** [March 12, 2018, 5:10pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832 "2018-03-12T17:10:08Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [March 12, 2018, 5:10pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/1 "2018-03-12T17:10:08Z")
[The Lazy Developer’s Guide to Authentication with Vue.js](https://developer.okta.com/blog/2017/09/14/lazy-developers-guide-to-auth-with-vue) This article shows you how to add authentication to a Vue.js application using the Okta Auth SDK and Okta API. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [May 30, 2018, 12:06pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/2 "2018-05-30T12:06:08Z")
**Yngvar Kristiansen** Storing access tokens in local storage is a security issue. [https://dev.to/rdegges/plea…](https://dev.to/rdegges/please-stop-using-local-storage-1i04 "https://dev.to/rdegges/please-stop-using-local-storage-1i04") ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [June 8, 2018, 7:07am UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/3 "2018-06-08T07:07:49Z")
**Alfred Balle** Following the tutoral gives me 5 errors, all of them: [https://google.com/#q=stand…](https://google.com/#q=standard%2Fno-callback-literal "https://google.com/#q=standard%2Fno-callback-literal") Unexpected literal in error position of callback. Ex. at src/auth.js:14:17. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [June 8, 2018, 2:52pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/4 "2018-06-08T14:52:45Z")
**Matt Raible** Hello Alfred: does this happen if you run the [example app from GitHub](https://github.com/oktadeveloper/okta-vue-auth-example "https://github.com/oktadeveloper/okta-vue-auth-example")? It’s possible you’re using newer versions of libraries that cause this issue. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [June 8, 2018, 3:54pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/5 "2018-06-08T15:54:33Z")
**Randall Degges** Hey Yngvar, I’m the author of that [dev.to](http://dev.to "dev.to") post, and also work here at Okta. While storing stuff in localstorage is definitely bad, in some cases you cannot avoid it. For instance, let’s say you’re building a single page app with no server-side backend (like in this case). If you don’t have any sort of server-side backend at all, there’s no way you can generate a secure session cookie that can’t be accessed by JavaScript. So while it is certainly true that this is less secure than a server-side counterpart, this is essentially the best type of security you can get for frontend-only apps! ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [June 11, 2018, 7:23am UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/6 "2018-06-11T07:23:40Z")
**Yngvar Kristiansen** Yeah, I agree. I hadn’t quite realized that when I posted my comment. Anyway I think it’s important to highlight the risks related to XSS before one considers making a frontend-only app. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 28, 2018, 8:09pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/7 "2018-10-28T20:09:58Z")
**nikivancic** The problem is with the way callback is being used - (see [https://github.com/oktadeve…](https://github.com/oktadeveloper/okta-vue-auth-example/blob/master/src/auth.js#L9 "https://github.com/oktadeveloper/okta-vue-auth-example/blob/master/src/auth.js#L9") as an example). At this point, the best solution for this problem is to add the rule ‘standard/no-callback-literal’: 0 to the file .eslintrc.js. Posting this for future Vue / Okta users who will run into this - unless @mattraible decides to add this rule to [https://github.com/oktadeve…](https://github.com/oktadeveloper/okta-vue-auth-example/blob/master/.eslintrc.js "https://github.com/oktadeveloper/okta-vue-auth-example/blob/master/.eslintrc.js"). ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 29, 2018, 7:23pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/8 "2018-10-29T19:23:36Z")
**Philip Johnson** Thanks for this! ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 29, 2018, 8:58pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/9 "2018-10-29T20:58:41Z")
**nikivancic** I am assuming that most people interested in this terrific sample (thank you Okta team who authored it) are creating a clone from [https://github.com/okta/sam…](https://github.com/okta/samples-js-vue "https://github.com/okta/samples-js-vue"). You would likely observe that ‘npm install’ results with several error messages - all of which could be addressed by running ‘npm audit’ followed by the npm suggested commands (like ‘npm install --save-dev url-loader@1.1.2’) that upgrade components found as security risks. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [October 30, 2018, 9:53pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/10 "2018-10-30T21:53:15Z")
**Matt Raible** Thanks for digging in and figuring this out! I’ll update this post this week and lock down the version numbers so it all works next time. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 2, 2018, 12:12am UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/11 "2018-11-02T00:12:56Z")
**Matt Raible** Thanks for this advice! I updated the post today and included it. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 3, 2018, 3:50pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/12 "2018-11-03T15:50:08Z")
**nikivancic** @mattraible After 3 years of contribution to Aurelia project ([https://aurelia.io/)](https://aurelia.io/) "https://aurelia.io/)") I would like to do some work in Vue. Your sample might be a good start for me, so let me know if you would care for the Vue CLI 3 version. I think that this should be a separate project (rather than an update (PR)); you just created the VUE CLI 2.9.6, meaning that you care about maintaining the non-vue-cli-3 code). If this is not world’s best proposal, would you care to work on a modern healthcare (patient centric) app instead? ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 4, 2018, 2:31am UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/13 "2018-11-04T02:31:08Z")
**nikivancic** @m@mattraible please check the issue “Removing vulnerabilities” at [https://github.com/adriatic…](https://github.com/adriatic/okta-mr/issues/1 "https://github.com/adriatic/okta-mr/issues/1") which shows the steps I took to remove the vulnerabilities from your app as well as the resulting package.json. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 4, 2018, 4:10am UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/14 "2018-11-04T04:10:14Z")
**Matt Raible** I forgot to merge the PR with the updated code. Sorry about that. It should be vulnerability free now. [https://github.com/oktadeve…](https://github.com/oktadeveloper/okta-vue-auth-example/pull/4#merged-event "https://github.com/oktadeveloper/okta-vue-auth-example/pull/4#merged-event") ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 4, 2018, 4:10am UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/15 "2018-11-04T04:10:47Z")
**Matt Raible** I’ll create a better example with Vue CLI 3. Stay tuned! ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 4, 2018, 2:20pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/16 "2018-11-04T14:20:00Z")
**nikivancic** Being tuned 🙂 ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [November 4, 2018, 2:51pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/17 "2018-11-04T14:51:31Z")
**nikivancic** Yes, the sample is free of vulnerabilities. Note that the skeleton application created by “vue init pwa okta-vue-auth-example” command has 18 vulnerabilities: added 1497 packages from 1772 contributors and audited 11767 packages in 38.134s found 18 vulnerabilities (10 low, 7 high, 1 critical) I will report this to Vue team. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [June 27, 2019, 4:45pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/18 "2019-06-27T16:45:04Z")
**Paul Simon** Hi I tried this but I am getting a CORS error when I try to login. > Access to XMLHttpRequest at '[https://dev-XXXXXX.okta.com…](https://dev-XXXXXX.okta.com/oauth2/api/v1/authn' "https://dev-XXXXXX.okta.com/oauth2/api/v1/authn'") from origin ‘[http://localhost:8080](http://localhost:8080)’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Admitedly I have not tried this exact example as I was trying to incorporate this into existing code. I have checked that my settings in the OKTA API screen are as specified above. Is there any reason for this? My Vue App talks to a Node App and in the route there I effectively add the following to any request. However, as I cannot see a way to do the equivalent for the calls that are going out to OKTA. res.header(“Access-Control-Allow-Origin”, “\*”); res.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”); I did have the login working from the basic Vue-OKTA guide on the OKTA site. All that I really wanted to do was to get an event that I could intercept after the user logged in to get some credentials from them. Is there a way to do that? ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [July 9, 2019, 2:17pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/19 "2019-07-09T14:17:14Z")
**Matt Raible** Hello Paul, In your Okta app, you need to add “[http://localhost:8080](http://localhost:8080)” as a trusted origin. You can do this by logging into your developer dashboard and going to **API** \> **Trusted Origins**. FWIW, when you create an app, trusted origins are created for you automatically based on your redirect URIs. If you modify them after creating your app, they are NOT added as trusted origins. ---
**Author:** ![oktadev-blog](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/oktadev-blog/32/3422_2.png) [@oktadev-blog](https://devforum.okta.com/u/oktadev-blog)\ **Post date:** [July 9, 2019, 9:35pm UTC](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832/20 "2019-07-09T21:35:40Z")
**Paul Simon** Hi Matt, Thanks for your reply but I already had that in place, so I am not sure what the problem was…However, with some help from OKTA Support I went about it a different way. I left the standard approach from the intro to Vue on OKTA in place, and just took a copy of the implicitcallback.vue file from the node\_modules, Copied it to my src folder renamed it and then amended it to carry out the extra operation that I needed after a successful login, `export default { name: ‘OKTAPostLogin’, async beforeMount () { await this.$auth.handleAuthentication() // Start of our code this.OurRoutine() // End of our code this.$router.replace( { path: this.$auth.getFromUri() } ) }, render() { },` So effective we put out code to get information on the user from the database, after the handleAuthentication has confirmed that the user has logged in successfully and has stored the tokens, and before OKTA redirects back to the original route that the user was trying to access before OKTA popped up the login challenge. Regards Paul Simon [Next page](https://devforum.okta.com/t/the-lazy-developers-guide-to-authentication-with-vue-js/16832.md?page=2)