I followed the quickstart guide via Youtube to set up an Angular app to use Auth0. Overall, it was extremely helpful.
My login/logout is working. My route guards are working.
My problem: My API call keeps returning a 401 Unauthorized and I can’t figure out why.
Stack:
Angular Front-End
Node.js (using Express) backend
Mongo DB
My thought: My api call uses a query parameter that comes from a value in a drop down list in my Angular app. I am wondering if query params create an issue with the HTTP_Interceptor for authentication.
I haven’t found anything about this in the community forums or online, but to be honest, I may not be googling the right terms, as I am still pretty new to all of this.
Note: I hardcoded my “allowedList:” property so I could test it, but the “Halo” value is the query param. If I leave it blank, I get the same result. This is where I think the issue is
Backend (Node)
My route is called via my Front end
Jwt file
When everything is served up and I select an item from the drop down and submit, this is what I see in the console
Have you tried to decode the token and see if it has all the necessary claims? You can post it here (with sensitive data redacted) and I’d be happy to take a look.
Thanks for responding! I did decode it but to be honest, I am not totally sure what I am looking for once I do decode it.
Here is what I see in the network:
When I decode the Access_Token, here is what I get (not exactly sure what is sensitive v. what is not - but I know I can change some of this stuff if it is sensitive ):
I didn’t see anything about audience or invalid issuer. At least not yet.
I’ve been trying to debug this morning, but still no luck. It just seems odd that my route guards are working, log in is working, but my API can’t find my token. I
For the “error” property", I think this is the stack trace, and I am trying to follow it, but it seems like all the errors are stemming from a node-module.
Hmm, it’s not. I don’t really understand why tho. Is it the http interceptor? I’ll google a bit and if I figure it out before you reply, I’ll let you know
To be honest, I am not very familiar with Angular httpInterceptors.
I notice in our Angular + API quickstart we have pass an object with additional parameters to the allowed list, as well as a wildcard at the end of the API uri, which I would think makes any request (including query params) valid. Can you try to format it like our example and see if that works?
httpInterceptor: {
allowedList: [
{
// Match any request that starts 'https://dan-woda-testing.auth0.com/api/v2/' (note the asterisk)
uri: 'https://dan-woda-testing.auth0.com/api/v2/*',
tokenOptions: {
// The attached token should target this audience
audience: 'https://dan-woda-testing.auth0.com/api/v2/',
// The attached token should have these scopes
scope: 'read:current_user'
}
}
]
}
