The audience is invalid. C# backend, Angular frontend. Beginner question

Help
,
1

Hello,
I have followed official Auht0 tutorials related to angular and net core auth0 implementation.
I totally cannot understand the concept behind audience to be honest.
So far i have working interceptor - it adds the bearer token to request, and of course login on frontend - i can see proper data in sample user component, like email, sub, taken from Auth0.
But as You can see i have got an error when calling my backend:

image
image654×523 11.2 KB

Here is my angular config:

AuthModule.forRoot({
  // The domain and clientId were configured in the previous chapter
  domain: 'dev-XXXXXXXXXXXXX.us.auth0.com',
  clientId: 'XXXXXXXXXXXXXXXXXXXXXXXXX',

  authorizationParams: {
    redirect_uri: 'http://localhost:4200/profile',

    audience: 'https://dev-XXXXXXXXXXXXX.us.auth0.com/api/v2/',

    scope: 'read:current_user',
  },
         
  httpInterceptor: {
    allowedList: [
      {
        uri: 'https://dev-XXXXXXXXXXXXX.us.auth0.com/api/v2/*',
        tokenOptions: {
          authorizationParams: {
            audience: 'https://dev-XXXXXXXXXXXXX.us.auth0.com/api/v2/',
            scope: 'read:current_user'
          }
        }
      },
      {
        uri: 'https://localhost:7129/*',
        tokenOptions: {
          authorizationParams: {
            audience: 'https://dev-XXXXXXXXXXXXX.us.auth0.com/api/v2/',
            //if here i set audience to 'https://localhost:7129/*', my frontend isnt even calling my API
          }
        }
      },
    ]
  }
}),

And here is my .net 7 api configuration:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddApplication()
                .AddInfrastructure(builder.Configuration);

builder.Services.AddControllers();
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options =>
{
    options.Authority = "https://dev-XXXXXXXXXXXXX.us.auth0.com/";
    options.Audience = "http://localhost:6060/";
    options.TokenValidationParameters = new TokenValidationParameters
    {
        NameClaimType = ClaimTypes.NameIdentifier
    };
});

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowOrigin",
        builder => builder.WithOrigins("http://localhost:4200")
        .AllowAnyHeader()
        .AllowAnyMethod());
});

builder.Services.AddHttpContextAccessor();
var app = builder.Build();
app.UseCors("AllowOrigin");
app.UseAuthentication();
app.UseAuthorization();

Here are my API’s Auth0:

image
image863×165 9.91 KB

My angular frontend is on http://localhost:4200/
And my application backend is on https://localhost:7129

IMPORTANT: Endpoint which im trying to reach has got [Authorize] attr, but even without this attribute, i can see that there are no any request headers inside this endpoint by accessing HttpContext, which is weird because as You can see there is bearer added to header

PS - I know that my API in Auth0 is localhost:6060 while in real my backend is hosted on https://localhost:7129, but even if i created new api (in Auth0 API settings) with audience set to https://localhost:7129 and of course modified my code to 7129 instead of 6060, result is totally the same.

2

Hey, can you try setting the audience here to http://localhost:6060/? I believe this is how Auth0 knows you are requesting the access token for accessing the registered API with name “Custom API” in your case.

3

If i set it like You said, my frontend even stops to calling backend endpoints:
image
so unfortunately no, it wont help

4

I have a similar set up and able to call backend without issues. A few things to highlight:

  • Audience has to match the string you have set as API Audience in Auth0. It doesn’t have to be a URL. In your case it has to be http://localhost:6060/ (not https://localhost:7129/) since this is the API Audience of your API in Auth0 and also in your AddJwtBearer config. Even if it doesn’t work, this is the right direction, probably the issue is with something else.

  • The authority in AddJwtBearer has a ‘/’ at the end, I have had issues with that so it is worth trying without the slash at the end of authority.

  • If you still have issues after following above, it is a good idea to use uriMatcher to see what values are sent for uri. I have noticed that the uri is just the endpoint part without the base url. For example: if the url is https://localhost:7129/api/v2/users, the uri is just /api/v2/users. If this is the case, the interceptor doesn’t attach token.
    Here is a sample uriMatcher:
    image

5

Hi,
if the url is https://localhost:7129/api/v2/users, the uri is just /api/v2/users.
Dear sivanarisetty, my api endpoint is not this - i totally don’t know where it came from, since i dont have got users endpoint, and, i dont even have api versioning - it might be some endpoint from Auth0?
Endpoint which im trying to reach is just a https://localhost:7129/track/getAllTracks

6

That was an example as I mentioned “For example: if the url is https://localhost:7129/api/v2/users” . If your endpoint is https://localhost:7129/track/getAllTracks, try uri: ‘track/getAllTracks’.