'Login Required' in Safari

[cl1k]

Hello,

MacOS 10.15.7
Safari 14.0.2

I’m having a problem requesting tokens post login with getAccessTokenSilently() when third-party cookies are blocked (ie Safari). I’m getting a Login required error.

After finding some related posts on here, I took the following steps:

• Enabled Rotating Refresh Tokens in the Application configuration in Auth0
• Enabled Offline Access in the API configuration in Auth0.
• Added useRefreshTokens={true} & cacheLocation="localstorage" to the <Auth0Provider/> props.

I was still getting the problem so I also tried creating a new Application and test API in Auth0, but still no bueno.

After asking a co-worker to try the app on his Linux machine, he was able to successfully request a token with third-party cookies blocked on Chrome. However, myself (on MacOS) and another co-worker who also uses MacOS, were still getting the error in Chrome and Safari.

I’ve created this test repo which I’m able to consistently reproduce the error with:

drunkenplatypus/auth-test

If anyone has any ideas I’d really appreciate it, thanks.

[stephanie.chamblee]

Hi @cl1k,

Welcome to the Community!

Another possible cause could be the absence of an audience in the Auth0Provider. This can happen if your app is calling an external API. Please let me know if you’ve tried adding audience!

Thanks,

Stephanie

[cl1k]

Hi @stephanie.chamblee,

Thank you for your quick response.

I added an audience to the Auth0Provider which didn’t have any effect, but I then also added scope and then I was able to retrieve a token using getAccessTokenSilently() with the same audience and scope as I specified as ‘defaults’ in the Provider.

However, when I tried to call getAccessTokenSilently() using the audience and scope from a different API, I was greeted with the Login required error once again.

Without third-party cookies, am I only able to get a token for 1 API/audience?

[stephanie.chamblee]

Unfortunately, because only one API Access Token can be cached in local storage by the Auth0Provider, the Login required error will be thrown when you attempt to acquire an Access Token for a second API when third-party cookies are blocked.

To get around this, you can follow this guide to represent multiple APIs with a single logical API: Represent Multiple APIs Using a Single Logical API

Alternatively, another strategy you could use is a pattern where you progressively log into each API. For example, if trying to get a token using getAccessTokenSilently fails with login_required error, then handle that error and call loginWithRedirect to log the user in then fetch and cache the token.

[cl1k]

Thank you again for your quick response.

I will have a look at the article you’ve linked and implement that into our application.

only one API Access Token can be cached in local storage by the Auth0Provider

I think it would be beneficial to other Auth0 users if this was mentioned/highlighted in the docs. I don’t remember seeing anything like this whilst I was looking around.

[stephanie.chamblee]

Thank you for the feedback! I will pass that on to the the appropriate team.

[cl1k]

No problem, here’s some more!

Since we have all of the scopes that were previously in their own APIs in 1 place it’s quite a mess. Some sorting/filtering on the scopes table would be amazing! Ctrl-f will keep us going for now.

[stephanie.chamblee]

I think that would be a great product request for our brand new Feedback category: Feedback - Auth0 Community

The requests are reviewed by our product team, and members of the Community can vote on ideas they support.