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!