Empty JWT payload in api request header

[qcgilbert]

Hello,

I’m trying to connect my Angular SPA to my Auth0 custom API. The API server (hosted locally) works with curl, however when making the request through Angular I get invalid_token (as logged at the server). Decrypting the token on JWT.io reveals there is no payload data. Below is the relevant parts of my code.

app.module.ts

AuthModule.forRoot({
      domain: config.domain,
      clientId: config.clientId,
      authorizationParams:{
        redirect_uri: window.location.origin,
        audience: 'https://localhost:4200'
      },
      httpInterceptor: {
        allowedList:[{
          uri: 'https://localhost:4200/api/*',
          tokenOptions: {
            authorizationParameters: {
              audience: 'https://localhost:4201/api/'
            }
          }
        }],
      }

api.service.ts

@Injectable({
    providedIn: 'root'
})

export class ApiService {   
    constructor (private http: HttpClient) { }

    ping() {
        this.http.get( "https://localhost:4200/api/user/private").subscribe({
          next: (v)=> console.log(v),
          error: (e) => console.log(`error: ${e.error}`),
          complete: () => console.log("API request complete.")
        });
    }

}

The reason the httpInterceptor allowedList uri is set to port 4200 is that I am using Angular’s proxyConfig in order to manage the CORS between the local front end and backend server. I have verified that my credentials for domain and clientId match my application in my Auth0 account. I also verified that the audiences (the AuthService for my SPA, and the httpIntercept for my API) are correct.

Any thoughts or insights would be greatly appreciated. Thank you!

[qcgilbert]

I solved this problem. The audience key should be a part of the AuthModule parameters, not in the authorizationParams.

[konrad.sopala]

Wooohoo! Thanks for sharing it with the rest of community!