Login required error when using local storage and refresh tokens

[cbeiro]

Describe the problem

I've configured auth0 client to use local storage and useRefreshTokens. When I try it out in Chrome with incognito mode, where third party cookies are disabled, login_required error is shown although the user is already logged.

What was the expected behavior?

Cookie should not be checked and token should be obtained directly according to https://auth0.com/docs/tokens/concepts/refresh-token-rotation

Reproduction

• Configure authClient as:

  createAuth0Client({
    ...
    useRefreshTokens: true,
    cacheLocation: 'localstorage'
  });

• Login in Chrome with third party cookies disabled
• Get token silently

[stevehobbsdev]

Hi @cbeiro,

Can you see the refresh token present in local storage? And what sort of expiry time do you have enabled for your access tokens and your refresh tokens?

[cbeiro]

Hi @stevehobbsdev, It's not present in local storage and /token endpoint is not called, login_required error is thrown before that. I have to configure Show all cookies in Chrome, and in that case the endpoint is called and the token is persisted in local storage. 86400 for the access tokens and 2592000 for refresh tokens, I haven't changed those yet.

[stevehobbsdev]

Ok, interesting that the data isn't in local storage at all, and that you're getting an error before /token is called.

You mention in your post that you're doing a login, so you're logging in where the user is redirected in the browser to Auth0, logging in, and then it fails when you drop back to your app before /token is called? Are you getting any errors in your Auth0 logs that may point to the issue?

Also, are you able to reproduce this in The Playground, using both our domain + clientID and yours?

[robotrot]

I'm getting the same problem. I'm also using the Vue tutorial for setup. In my logs I see two failed authorization attempts when I perform a full page reload in the app.

For me the problem persists whether I'm using refresh tokens or not.

[stevehobbsdev]

@robotrot Any more detail in the logs you can share? This sounds like silent authentication is failing to work, if it's happening when you're refreshing the page.

This could be caused by a couple of things:

• You're not using refresh tokens and you're using a browser that blocks third-party cookies by default (Safari, Brave, etc)
• You're using the classic login experience, and trying to log in using a social provider that uses Auth0's developer keys (see Limitations of Developer Keys when using Classic Universal Login)

Please try these to see if you can get unblocked:

• Try it in a browser like Chrome which does not block third-party cookies by default (yet)
• Use the New Login Experience, if possible
• Supply the social connection with your own client ID and secret in the Auth0 dashboard

If you're still having issues, please file a new issue with more detail as it does not sound like the same issue that @cbeiro reported here.

[robotrot]

I'm using the new login experience, and I've tried with refresh tokens and no refresh tokens, and it happens either way.

I'm just copying the Vue SPA example verbatim. I'd like to point out that the Vue SPA example doesn't even mention refresh tokens, which seems like a bit of an oversight.

No matter what I do, I get an error about Auth0 cookies not having samesite flags set. I've checked other issues about this and they either get closed or they never get a good answer. Why is there still auth0 cookies without samesite explicitly set? Is this whats causing this problem?

If not what is? This happens for me just by copying the basic Vue SPA example, so I can't believe no maintainer of this library should have any trouble replicating it.

[stevehobbsdev]

Why is there still auth0 cookies without samesite explicitly set? Is this whats causing this problem?

Auth0 server sets a compatibility cookie without an explicit samesite attribute for older browsers that do not support the samesite attribute - this is likely what is causing the warning, but should not affect you.

This happens for me just by copying the basic Vue SPA example, so I can't believe no maintainer of this library should have any trouble replicating it.

It's because the problem is most likely environmental.

Are you getting any more detail in Auth0 logs dashboard that might point to the issue, or when you inspect the HTML content for the call to /authorize in your browser network log? We also see this with an Auth0 app that has been incorrectly configured (e.g. you have not added your app to the Allowed Web Origins settings).

[luisfmsouza]

Recently I noticed the same thing happening with us. Diving deep into the auth0-spa-js code I noticed there is a checkSession() being called on the method used to create the client.

Inside of the checkSession there is a call to the getTokenSilently() method, which will return the error Type: Failed Silent Auth and Description: Login required.

Does anyone knows how we can avoid this call?

[stevehobbsdev]

@luisfmsouza It sounds like you might be using the createAuth0Client method to instantiate the SDK, which calls checkSession internally as part of its setup. You can avoid this if you wish by instead accessing the constructor directly, which allows you do your setup manually and handle errors yourself:

const client = new Auth0Client({ /* options */ });

Does this help?

[stevehobbsdev]

@cbeiro Just checking in to see if you've managed to resolve this. The last thing I asked for was whether you were able to reproduce this inside the SPA playground.

[stevehobbsdev]

Closing this for now, but feel free to continue discussion if there's anything else we can look into.