How to use refresh tokens on a SPA (Vue)?

[mark222]

I’m having difficulty when using Auth0 on a Single Page Application using Vue.js.

I’m using Vue 3.3.4 and auth0-spa-js 2.0.8 without an auth0 custom domain.

The flow works like this:

• The user visits the app (example.com) and if they are not authenticated they are forwarded to the login page which is hosted on example.eu.auth0.com, using loginWithRedirect.
• The user is redirected back to the app after login and the access cookie is stored in local storage
• When making API requests to my backend, I call client.getTokenSilently() which should handle the refresh process and it throws “Error: Login required”

The issue goes away when I allow third party cookies in my browser.

The params I pass to the client are:

  client = await createAuth0Client({
    domain: 'tenant.eu.auth0.com',
    clientId: '<app client id>',
    authorizationParams: {
      audience: 'example.com',
      redirect_uri: `${window.location.origin}/?auth/callback`,
    },
    cacheLocation: 'localstorage',
  });

Is it possible to use Auth0 with refresh tokens, when not using a custom domain, on a Vue.js app? If so, what docs/process would I follow to allow this?

[mark222]

Adding to this… I just went through the official guide for adding Auth0 to Vue.js (Vue.js Authentication By Example: Composition API).

If you follow this guide exactly, it creates the same issue on browsers that block third party cookies.

To re-produce:

1. Follow the tutorial Vue.js Authentication By Example: Composition API
2. In Auth0, reduce the Token Expiration to 60, and Token Expiration for Browser Flows to 30.

You will notice that you can login, but once the token expires, the call to get the access token throws “Error: Login required”:

[marcelina.barycka]

Hey there @mark222 !
Thanks for specific problem description!

Short question before digging more into it -
Were you able to set the Refresh Token Rotation in your Auth0 tenant for the app in question?

Did that solve your issue?

[mark222]

Hi @marcelina.barycka, thanks a lot for the response.

Yes I was able to set that and no unfortunately it didn’t solve the issue.

I also followed the entire official Auth0 Vue.js tutorial and the same issue occurred.

I’ve come to the conclusion that the only way to support handling of background refresh tokens on an SPA without relying on third party cookies is to use a custom domain.

It makes sense, because from a security perspective I understand it’s better to set the refresh token as a server side cookie only accessible on the domain.

That being said, I’ve not seen any official confirmation if this is the case. It would be great if you would be able to confirm that?

[marcelina.barycka]

Let me please double check it, I will update you soon, thanks!

[marcelina.barycka]

Hi, I’m still checking it, but in the meantime, can you please go to your Auth0 tenant → APIs → the API for which you request access tokens and enable “Allow Offline Access”:

Why? Refresh Token Rotation is intended to be a workaround for restrictions that results in preventing access to third-party cookies. But to use the method, we need to allow the “Allow Offline Access” in Auth0 tenant for the API in question.

Can you please do this adjustment and let me know how? Thanks!

[mark222]

Thanks @marcelina.barycka, I have already tried this and it didn’t solve the problem unfortunately. How is the refresh token meant to be set?

[marcelina.barycka]

Hi @mark222 !

Apologies for late replay!

I realized two things -

1. If we are testing the Auth0 Vue SDK with the Vue Composition API and the JSON server (no real API server), then no need to make adjustments in APIs section of Auth0 tenant;
2. I found the main branch of this repo and this tutorial more friendly in terms of time and details you need to manage to test the feature in question (you only have to create the .env file).

I followed it step by step, set up the request token rotation and expiration & inactivities times like you did.

This way, if I refresh the app while being on a protected route after a few minutes, I’m not being asked to reauthenticate (I do not have a similar error as you have).

If you still encounter issues with the guidance your refer to, there’s a button to report issue / provide feedback under each of the mian sections:

Feel free to also reach out with any questions or suggestions, thanks!