Angular + .net Core API

Hi there,
This question might have been asked a zillion time, but I cannot find a solution for my problem.
I am new the Auth and Web Security so please bear with me.

I build an Angular 9.x application that have a .Net Core 5 Backend Application
I am a have big difficulties to implement auth0 security over my application.
I have been able to implement a login mechanism to my app. But a fail to call the call an API EndPoint that is secure with Auth0.

Chrome keeps responding me:
message: “Http failure response for htps://localhost:44335/device/getall: 401 OK” when I call my API.
Just like the Token isn’t send at all
I’ve reviewed the tutorial maybe 4 or 5 time but still I can’t figure out what wrong.
I have set up.

  • a Application, called “EquipmentApp”
  • a API, called “EquipmentAPI”

The Application setting are:

  • Application type: Single Page Apllication
  • Token Endpoint authentication Method: None
  • Name: EquipmentApp
  • Domain: dev-*******.us.auth0.com
  • ClientID : Pl*********************************sxel
  • ClientSecret: [ …]
  • Allowed Callback, Allowed Logout URLs, Allowed Web Origins, Allowed Origins (CORS) are set to “htp://localhost:4200”
  • GrantType: Implicit, Autorization Code, RefreshToken
  • Metadata: [none]

The API Setting are:

  • Id: 605f*****************
  • Name: EquipmentAPI
  • identifier: htps://localhost:44335/
  • Signin Algorithm: RS256
  • Permissions: read:device
  • Other settings have default value.

I’ve replace http word with htp (Because new user can’t post more the 3 link …)
Angular:
app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { RouterModule } from ‘@angular/router’;
import { AppComponent } from ‘./app.component’;
import { NavMenuComponent } from ‘./nav-menu/nav-menu.component’;
import { HomeComponent } from ‘./home/home.component’;
import { DevicesComponent } from ‘./Device/devices.component’;
import { DeviceComponent } from ‘./Device/device.component’;
import { SelectListComponent } from ‘./components/selectlist.component/select.list.component’;
import { GeneralNoteComponent } from ‘./components/generalNote.compoment/generalNote.compoment’;
import { DeviceMaintenanceComponent } from “./components/devicemaintenance.component/devicemaintenance.component”;
import { DeviceLoanComponent } from ‘./components/deviceloan.component/deviceloan.component’;
import { AuthModule } from ‘@auth0/auth0-angular’;
import { LoggedUserComponent } from ‘./components/loggedUser.Component/loggedUser.Component’;
import { LoginComponent } from ‘./components/login.component/login.component’;
import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’;
import { AuthHttpInterceptor, AuthGuard } from ‘@auth0/auth0-angular’;

@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
DevicesComponent,
DeviceComponent,
SelectListComponent,
DeviceMaintenanceComponent,
DeviceLoanComponent,
GeneralNoteComponent,
LoggedUserComponent,
LoginComponent
],
imports: [
BrowserModule.withServerTransition({ appId: ‘ng-cli-universal’ }),
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: ‘’, component: DevicesComponent, canActivate: [AuthGuard], pathMatch: ‘full’ },
{ path: ‘login’, component: LoginComponent },
{ path: ‘device’, component: DeviceComponent, canActivate: [AuthGuard] },
{ path: ‘generalNote’, component: GeneralNoteComponent, canActivate: [AuthGuard] }
]),
AuthModule.forRoot({
domain: ‘dev-.us.auth0.com’,
clientId: 'Pl
********xel’, // EquipmentApp
audience: ‘htps://dev-*******.us.auth0.com/api/v2/’, // EquipmentApp
scope: ‘read:current_user’,

  httpInterceptor: {
    allowedList: [
      {
        uri: 'htps://dev-**** ***.us.auth0.com/api/v2/*',
        tokenOptions: {
          audience:'htps://dev-******.us.auth0.com/api/v2/',
          scope: 'read:current_user'
        }
      }
    ]
  }
})

],
providers: [
AuthGuard,
{ provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }

.Net API
startup.cs

… more code …
services.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
options.Authority = “htps://dev-******.us.auth0.com/”;
options.Audience = “htps://localhost:44335/”;
options.Events = new JwtBearerEvents
{
OnAuthenticationFailed = context =>
{
throw new Exception($“Authentication failed for MetadataAddress {context.Options.MetadataAddress} with exception: {context.Exception}”);
}
};
});
… more code …

DeviceController.cs
… more code …
[Authorize]
[ApiController]
[Route("[controller]")]
public class DeviceController : ControllerBase
{
private readonly IDeviceService _deviceService;

    public DeviceController(IDeviceService deviceService)
    {
        _deviceService = deviceService;
    }

    [HttpGet("GetAll")]
    public async Task<IEnumerable<Device>> GetAll()
    {
        return await _deviceService.GetAllAsync();
    }

… more code …

Audience seems to be incorrect on the .NET core side. You need to use the same Audience you use on the client side when the token was requested (audience:‘htps://dev-******.us.auth0.com/api/v2/’,). You can also verify what the correct audience is by looking into the “aud” attribute of the generated JWT.

Thanks for your reply I really appreciate.
I think I’ve come a little further . I know get a error:
When requesting the token using PostMan
{
“error”: “access_denied”,
“error_description”: “Client is not authorized to access “https://dev-976r1e2b.us.auth0.com/api/v2/”. You might probably want to create a “client-grant” associated to this API. See: https://auth0.com/docs/api/v2#!/Client_Grants/post_client_grants
}

My PostMan request body look like this:
https://dev-************.us.auth0.com/oauth/token
{
“client_id”: “Pl**********************”,
“client_secret”: "3**********************,
“audience”: "https://dev-
******.us.auth0.com/api/v2/",
“grant_type”: “client_credentials”

}