Your Examples “Angular 2+ Login” (example 1) and “Angular 2+ Calling an API” (example 2) are GREAT thank you! They are extremely helpful and your documentation is really good! I have some question regarding the audience property when using the method auth0.WebAuth.
In example 1, the audience value is https://${AUTH_CONFIG.domain}/userinfo. Whereas example 2 uses AUTH_CONFIG.apiUrl (https://services.mycompanyname.com). Both authenticate as expected. When using example 1’s endpoint I am getting the following message: “Error: JWT must have 3 parts” which is perplexing. My assumption is that the two endpoints are returning similar but different JWT. My underlying question is which audience property value (aka endpoint) should I use - example 1 or example 2? Or, is there another one that is better? (Right now I am thinking example 2 since it is returning well formed JWT.)
By the way, I am using another great documented example “ASP.NET Core Web API Authorization.” I needed to make some tweaks when using this example with “Angular 2+ Calling an API.” My first change was the API port number within the UI to match what was found in the ASP.NET API project. Second I had to add UseCors to the API so that the two examples could communicate.
When specifying the audience in your authentication request, you’re following the OIDC-conformant authentication pipeline . As stated in the [documentation] (OpenID Connect Protocol), this pipeline will be used if any of the following are true:
- An authentication request was
initiated with an audience parameter.
- The client being used is flagged as
OIDC Conformant (available at
Dashboard > Clients > Settings > Show
advanced settings > OAuth > OIDC
Conformant flag).
In your examples, the first is using https://{YOUR_AUTH0_DOMAIN}/userinfoas the audience and the second is using a custom API, https://services.mycompanyname.com in this case.
In the [access token documentation] (https://auth0.com/docs/tokens/access-token#access-token-format) you can see that:
- If the audience is set to
{YOUR_AUTH0_DOMAIN}/userinfo, then
the Access Token will be an opaque
string.
- If the audience is set to the unique
identifier of a custom API, then the
Access Token will be a JSON Web Token
(JWT).
So in the first example, the access token will be an opaque string (something like ´KsIAlfgfaaa3NbFae5vwdAy1pEd7GNNF´), which is not a JWT, and will fail with the “Error: JWT must have 3 parts” message if you try to use it where a JWT is necessary. Keep in mind that since you specified /userinfo as the audience, you’ll still be able to call the [/userinfo endpoint] (Authentication API Explorer) with that access token. If you use a custom API as the audience, you’ll get a JSON Web Token, which consists of three parts separated by dots (.), which are:
Therefore, a JWT typically looks like: xxxxx.yyyyy.zzzzz
Wonderful! Thank you for that explanation.
Wonderful! Thank you for clarifying.