Error: Login Required at requests to API

[maxhov]

Hi!

We are piloting with Auth0 to see if it would be a good fit for our application. However, when walking through the quickstart of Angular, we face some issues. We did the usual SO/Google research but none give a definitive answer to fix the issue. There is a range of topics touching upon the issue(s) described, but none give a definitive answer on how to actually fix it.

Our setup

We have the following setup to test with:

• A vanilla Auth0 tenant in EU with a Free license;
• One SPA registration for the Angular application. This is configured with all defaults as stated in the quickstart;
• One API application for a backend application to test some backend requests. Also same as in the quickstart is explained;
• Testing with browsers: Chrome Version 91.0.4472.106 (Official Build) (x86_64) and Firefox 89.0 (64-bit) on Mac;
• A demo application that can be found here: GitHub - maxhov/auth0

The issue

Logging in and retrieving user data works as expected. However, when trying to make a backend call that requires a new token to be retrieved (e.g. with a different audience), the application freezes. Upon debugging we found out that the this.authService.getAccessTokenSilently(options) call in the AuthHttpInterceptor is giving back an “Error: Login required”. This causes the entire authentication context (so to say) to be dropped and the user is required to relogin. The token is never attached to the request.

Steps that we tried (in any combination) without success:

• Enable refresh tokens
• Enable SSL
• Set cacheLocation to localstorage
• Relax browser settings as far as possible (Chrome recently dropped some SameSite flags unfortunately…)

Expected behaviour

As advertised, when calling an api that is configured in the HttpInterceptor.AllowedList an access token should be retrieved and added to the request.

Potential cause

Chrome making mention of SameSite cookie configuration for the following cookies: did_compact, auth0_compact when making requests to the /authorize endpoint. The actual issue texts are:

• Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute
• Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

It seems that the cookies coming from Auth0 are not configured with SameSite=none?

[stephanie.chamblee]

Hi @maxhov,

Welcome to the Community!

When you call getAccessTokenSilently, the SDK will retrieve a cached token or perform silent authentication to retrieve a new Access Token. When you include the audience parameter, silent authentication will always take place.

The login_required error often occurs when the browser blocks third-party cookies during silent authentication.

There are a few ways around this:

1. If you only need to interact with one API, then you can include an audience in your app’s AuthModule.forRoot settings and remove the audience from the getAccessTokenSilently call. You can also configure your app to use Refresh Token Rotation:

    AuthModule.forRoot({
      domain: env.auth.domain,
      clientId: env.auth.clientId,
      redirectUri: window.location.origin,
      audience: env.auth.audience,
      useRefreshTokens: true,
      cacheLocation: 'localstorage',
      scope: 'offline_access',
      httpInterceptor: {
        ...env.httpInterceptor,
      },
    }),

2. If you need to interact with two APIs, and you control both APIs (the API that your app initiates within its AuthModule.forRoot settings and the one which you call getAccessTokenSilently for), then you may consider representing multiple APIs in a single logical API so that you only need to include the audience in the AuthModule.forRoot settings and not in the getAccessTokenSilently call:

Configure Logical API for Multiple APIs

3. Use a Custom Domain so that the silent authentication will not be blocked: Custom Domains

FAQ: Why is authentication lost after refreshing my single page application?
Related topic: SPA client authentication against multiple APIs - #2 by jmangelo

[Whitfield258]

A POST is preferable for login request, because the authentication information will be sent in the HTTP messages body rather than the URL. Although it will still be sent plain text, unless you’re encrypting via HTTPS.

GET method data is sent to the server followed by the URL which will be seen to everyone.

Both GET and POST method are used to transfer data from client to server in HTTP protocol but main difference between POST and GET method is that GET carries request parameter appended in URL string, while POST carries request parameter in message body which makes it more secure way of transferring data from client to server in HTTP protocol.