Your Examples "Angular 2+ Login" and "Angular 2+ Calling an API" Clarification

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 ( 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, in this case.

In the [access token documentation] ( you can see that:

  • If the audience is set to
    {YOUR_AUTH0_DOMAIN}/userinfo, then
    the Access Token will be an opaque
  • If the audience is set to the unique
    identifier of a custom API, then the
    Access Token will be a JSON Web Token

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:

  • Header
  • Payload
  • Signature

Therefore, a JWT typically looks like: xxxxx.yyyyy.zzzzz

Wonderful! Thank you for that explanation.

Wonderful! Thank you for clarifying.