Hi there, we are using auth0 in our nuxt project (server-side rendered vue.js) with the nuxt/auth module. One problem we have so consistently experienced: the expiration of our client-side bearer token seems too soon - we have set both the application-level (ID Token Expiration , Refresh Token Lifetime (Absolute)) and tenant-level (Inactivity timeout, Require log in after) to some very large values (i.e. a couple days), but the client-side stored Bearer token still seems to expire even after a few hours since it is issued (and incidentally our application recieves a 401 when trying to fecth user data through auth0’s /userinfo endpoint), and the user is forced to log in again (even just after a couple hours since last log in).
Just in case, here is the whole login flow (with the nuxt/auth module if this is helpful):
if(!this.$auth.loggedIn){
# a token stored means user has not manually logged out, so he needs to be authenticated automatically
if(this.$auth.getToken("auth0")){
try{
# this.$auth.fetchUser() will query the /userinfo endpoint with authorization header set to the locally stored Bearer token issued when logged in last time
await this.$auth.fetchUser();
if(this.$auth.loggedIn){
console.log("Authentication successful!");
}else{
console.log("Authentication failed...")
}
}catch(err){
console.log("Authentication error...")
}
}else{
console.log("No token found, not authenticating...");
}
}else{
console.log("Already authenticated!");
}else{
# no token available on client-side => do nothing
}
Having users log in every time our application is loaded significantly hinders user experience - Is there any setting / configuration we are missing here? Any help / suggestion is appreciated! Thanks!
Typically we want to keep client side access and id token lifetimes on the shorter side. This ensures that scopes and permissions are up to date since they cannot be revoked and protects against leaking long lived tokens. E.g. if a malicious actor gets a token you only want it to be active for a short period of time, before expiring and requiring a new token.
The solution to this security vs. user experience problem is to use cookie sessions or refresh tokens to allow users to renew their tokens without requiring inputting credentials (login).
We don’t maintain the nuxt auth module so I don’t have as much experience with it, but I seem to remember it supporting cookie sessions.
What happens if you refresh the page? Are you required to log in again?
Hi dan, thanks for getting back to me! I believe what happens in nuxt/auth’s implementation is that whenever the page is reloaded it will query auth0’s /userinfo endpoint with authorization header set to the locally stored token. So far page reloading does not seem to yield any problem. Can you kindly share some examples about using refresh tokens to enable (seemingly) long-lasting session w/o forcing user to re-log in?
Sorry for the delayed response. Looking into this further took me down a bit of a rabbit hole. I discovered that nuxt/auth uses localstorage for access tokens, something we strongly advise against. From what I can tell, the auth0 strategy of nuxt/auth doesn’t support refresh token rotation either, so that will also not be an option.
It might be worth adding that as a feature request to the maintainers of that repo. Its a third party to us, we don’t maintain or actively contribute to the sdk.
I’m still trying to figure this out.
I think I can say that the current problem is that my frontend application does not receive a refresh token.
I have activated Offline access and ask for the offline_access scope.
What reason could there be for not receiving the refresh tokens? I saw similar topics here in the community forums but they all ended with “please DM me” and no resolution posted
Have you configured it in the application settings?
Refresh token rotation is different from native app and backend refresh token flows, so some solutions may differ. If one of the topics seems on point you can post the link and I will investigate.
@codeofsumit
I’m currently working on a nuxt project and am going to use auth0, and while googling I came across this article which maybe explains why you’re having this issue?
The relevant quote
TL;DR At this point, you could easily ask me: why you’re not using the greatNuxt.js Auth Module?
At the moment, the Auth Module provides Implicit Grant Flow only. What’s the difference between PKCE Authentication Flow and Implicit Grant Flow?
With Implicit Grant Flow Access Token is exposed on the client side and does not return a Refresh Token because the browser cannot keep it private.
Edit:
It looks like this may be fixed in the current dev version, according to the replies on this github issue if you use @nuxtjs/auth-next you can get pkce and refresh tokens working. I’m about to give this a try myself.
.