April 2019
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.)
April 2019
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.
April 2019
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!
July 2019
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.
July 2019
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.
April 2020
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”
April 2020
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.
April 2020
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!
May 2020
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?
May 2020
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
May 2020
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.
June 2020
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.
June 2020
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.
June 2020
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…
December 2020
sreekumar menon
Andy, How to get the current user (email and name) info after login? State.auth.user is empy {} .
December 2020
sreekumar menon
were you able to get the user info? @disqus_lr8IHV0IhP
January 2021
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.
January 2021
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!
January 2021
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.
January 2021
Andy March
Sorry to hear that Corey, i’d be happy to pass any feedback you have on to our team, you’re welcome to drop me an email at andy.march@okta.com
January 2021
Andy March
From the server side our admin APIs can be called with either an API key or with an OAuth token. This allows you to make the call as either the application (API key or OAuth token) or the user themselves (OAuth token) depending on their permissions in Okta.
The easist way to get user information is either to request an ID token, or use the access token to talk to the standard OIDC userinfo endpoint.
March 2021
Hamza Naveed
Hi Andy, Is it worth to wait for an updated post on this?
March 2021
Andy March
Hi Hamza, thanks for the nudge on this. I haven’t updated the blog post yet but I have ported a branch on the supporting repository to use the nuxt/auth OAuth provider. Be aware this needs a couple of tweaks to how you configure the app in Okta (use the SPA app type with PKCE). I hope this is helpful, I’ll find out if it is better to update this post or create a new one.
April 2021
Hamza Naveed
Thanks Andy, I took reference from the branch that you’ve updated with some tweaks, but I’m getting a prompt from Okta which is asking for an authorisation code. Screenshot attached below; In my understanding shouldn’t the authorization servers be sending the authorization code as well to the browser?
Also here’s how my auth config in the nuxt config looks like;
https://uploads.disquscdn.c…
auth: {
strategies: {
okta: {
scheme: ‘oauth2’,
endpoints: {
authorization: process.env.OAUTH_ISSUER+’/oauth2/auth’,
token: process.env.OAUTH_ISSUER+"/v1/token",
userInfo: process.env.OAUTH_ISSUER+“v1/userinfo”,
},
token: {
property: ‘access_token’,
type: ‘Bearer’,
maxAge: 1800
},
refreshToken: {
property: ‘refresh_token’,
maxAge: 60 * 60 * 24 * 30
},
responseType: ‘code’,
grantType: ‘authorization_code’,
redirectUri: process.env.OKTA_REDIRECT_URI,
clientId: process.env.CLIENT_ID,
scope: [‘openid’, ‘profile’, ‘email’],
codeChallengeMethod: ‘S256’,
autoLogout: false
}
}
},
