Tutorial: Build Universal Applications with Nuxt.js
Learn how to build a secure server-side rendered web application using Nuxt.js and Okta
Sean D
Hey Andy,
Thank you for this article!
The company I’m working for is switching to Okta from another provider. To get up and running, I was initially pointed to https://www.npmjs.com/packa… , but we had decided to go with Nuxt instead of Vue, so your article is well timed for my purposes. 
However, the okta-vue instructions for a standard Vue app only require the clientId and OktaDomain, so that’s all I’ve been provided (i.e. I have no clientSecret or secretKey). Yet when I follow your instructions, I’m getting (unsurprisingly) an error stating, cannot set up sessions without a secret or encryptionKey/signatureKey pair.
Do you have any advice to get up and running with Okta (okta-vue) in a Nuxt app, using only the clientId and OktaDomain? (fwiw: Running exclusively in SPA mode is an option for us.)
Andy March
Hi Sean,
The difference you are seeing is due to where the user session is being resolved and which OAuth flow is being used as a result. The clientSecret allows you to verify that you are the application you claim to be, this must be kept secure at all times else your application could be impersonated. The universal app in this article has a Node server in the backend so it is able to keep secrets from the user, this means it can perform the authorization code flow using the secret. When you are creating a SPA all your code is being transferred to the user so there is nowhere to store that secret where it cannot be extracted, this means you need to perform the implicit flow. See more on the flow types here.
If you want to use both Nuxt and okta-vue you will be limited to the SPA mode and will need to do some extensions to the router to catch the callback. I actually wired up a simple SPA solution with Nuxt and okta-vue in preparation for this article, you can find this here. It’s far less polished but hopefully it will get you started and I’m happy to answer any questions.
Sean D
I was pretty sure the difference between needing secrets or not was because of the server in a universal app. Your explanation makes perfect sense!
At the moment, we just need a spa and your simple SPA solution with Nuxt and okta-vue example app was exactly what I needed!
Thank you so much for also sharing both the universal mode and SPA mode examples!
Jeff H
Hi Andy, the SPA implementation is nice and lightweight and exactly what I was looking for to get started. One thing I did notice is that when I’m on the /protected page and hit refresh I receive a 404 “This page could not be found”. Any ideas how how to possibly remedy this? I’ve been staring at it for a few hours, I’ve noticed the non-protected don’t pages exhibit this behavior.
Andy March
Hi Jeff,
The router for the example in this article is generated automatically based on the content of your /pages directory, with the SPA I’m overriding this with the router.js so that is worth checking to make sure it has the correct routes registered.
Is the URL you are refreshing just “/protected”? When returning tokens to a SPA these are often passed as URL fragments to a redirect URI which then redirects the user to the content they requested. While the content shown on the page may change if you are refreshing the browser then last request seen by the browser is repeated if this was to the “redirect URI” and the client isn’t in a state to process these elements you might get a 404.
It’s worth mentioning that the Nuxt Auth module has now addressed the issue I mentioned in the article above about including nonces in token requests. I’ll try to revisit this with a example using the standard community module but that may be worth investigating.
TM
Thanks for the tutorial! I know this has been here for a bit, but when I deploy my implementation of this to prod on AWS or Netlify I’m getting “Cannot read property ‘accessToken’ of undefined” when accessing the progress page. In Firefox that error is expressed as “t.store.state.oauth is undefined”
Andy March
When you are deploying to AWS is this just to an S3 bucket? Nuxt is not entirely statically generated it requires a server side component to do the generation. See the similar issue on the GitHub project here.
TM
Thanks for the reply. I solved this deploying to AWS Elastic Beanstalk instead. This handles that issue of ‘requires a server side component’ that you mentioned. Thanks again!
Corey Snyder
thanks for this… and seems to be working ok, except after the page loads, a heartbeat later localhost redirected you too many times. any ideas?
Andy March
Hi Corey, are you seeing the protected “progress” page at all before the redirect? A common way you can end up in a redirect loop is if you accidentally include the callback route as requiring authentication. This would mean that visiting a protected page would get the user to authenticate then calls back which triggers authentication which calls back which requires authentication… The only page that should be protected in this sample is progress which exports authenticated:true
Corey Snyder
Great, thanks, got that part good now… But how do you grab the user info? Thanks so much in advance for answering questions.
Matthieu
Hey Corey, How did you solve the “redirected too many times”? Thank
PS: I added the authenticated:true in the page I want to protect but content is displayer prior to be redirected to Okta and then get the redirecto too many times error. thanks a lot.
Corey Snyder
Hi, TBH the above code example is a little bit off from the github repo, scroll up a little and clone the github repo instead of copy and pasting code from above, that solved a ton of my headaches and got it working for me.
Matthieu
Thanks Corey,
Gonna give a try today
Nuxt will release a new version of Nuxt auth module (can be found here https://dev.auth.nuxtjs.org/ ) .This version will integrate the authorization code grant flow with PKCE, which is something that I want to use for security reasons. More info the integration with Okta can be found here : https://github.com/nuxt-com…
sreekumar menon
Andy, How to get the current user (email and name) info after login? State.auth.user is empy {} .
sreekumar menon
were you able to get the user info? @disqus_lr8IHV0IhP
Corey Snyder
I didn’t. Honestly I switched to Auth0. Couldn’t quite get this thing working the way we wanted. No offense to Okta great product but user management didn’t pan out for us.
sreekumar menon
Agree, I spent many hours trying to crack this and then decided to move on…
The only thing i was able to find in documentation was to call getUser api , getUser seems to work with another API token. not the token that is stored in state that you get back on auth call . Also documentation says that api work based on cookies, so I was not sure how admin api’s will work from server side since I assume it does not send the cookies on server (asyncdata/fetch). I wish there was some documentation about that somewhere!
Andy March
It looks like the native Nuxt auth library has changed significantly since this post was made so I would recommend you take a look at that (https://auth.nuxtjs.org). That has a convenience method on this.$auth.user. I’m going to write an update to this post using the updated standard library, so I’d love to hear how you get on.
This library has a hook for user info when completing the OAuth call back, see fetchUser here.