Empty JWT payload in api request header

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!

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

1 Like

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

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.