Authorizing and then using JWT Token with Auth0 React & ASP.net core

Question

I am building a react application, using Auth0 as my oauth authentication & backing it with a ASP.NET core api.

From React, I redirect the user to Auth0, which I have setup a single page application application.

When the login is succesful, it redirects the user back to my React app with a code.

I then want to translate that code into a JWT token to authorise access of the backend api, This is where it fails.

After login, I use the Auth0 supplied example library and call:

   const { getTokenSilently } = useAuth0();
   ...
   var token = await getTokenSilently();
   ...
   axios({
            url: `/api/Folder`,
            method: 'GET',
            headers: {
                Authorization: `Bearer ${token}`
            }
   })

it does provide a token but the token seems too small for a JWT Token, it looks something like this in the header:

Authorization: Bearer 7hExNvsOM14TpY0qUnPbVqpizwLLxynw

The response from my C# asp.net core api is:

www-authenticate: Bearer error="invalid_token"

My C# Code looks like this: startup.cs

    services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
    }).AddJwtBearer(options =>
    {
        options.Authority = Configuration["Auth0:Authority"];
        options.Audience = Configuration["Auth0:Audience"];
        options.RequireHttpsMetadata = false;
        options.TokenValidationParameters = new TokenValidationParameters
        {
            NameClaimType = ClaimTypes.NameIdentifier
        };
    });

    IdentityModelEventSource.ShowPII = true; //for debug purposes
    ....
    app.UseAuthentication();
    app.UseAuthorization();

folderController.cs

[Authorize]
[Route("api/[controller]")]
[ApiController]
public class FolderController : ControllerBase
{
 ....
}

Leniel Maccaferri Leniel Maccaferri · Accepted Answer · 2020-02-10T17:24:16

That token you mention in your question is an opaque access token.

JSON Web Token (JWT) : Tokens that conform to the JSON Web Token standard and contain information about an entity in the form of claims. They are self-contained in that it is not necessary for the recipient to call a server to validate the token. Access Tokens issued for the Auth0 Management API and Access Tokens issued for any custom API that you have registered with Auth0 will follow the JSON Web Token (JWT) standard, which means that their basic structure conforms to the typical JWT Structure, and they contain standard JWT Claims asserted about the token itself.

Opaque tokens: Tokens in a proprietary format that typically contain some identifier to information in a server’s persistent storage. To validate an opaque token, the recipient of the token needs to call the server that issued the token. Opaque Access Tokens are tokens whose format you cannot access. Opaque Access Tokens issued by Auth0 can be used with the /userinfo endpoint to return a user’s profile.

More info here.

To get over it... you need to setup your API project @ Auth0.

When calling Auth0 to authenticate your user, pass audience and scope accordingly.

audience is the friendly name you gave to your ASP.NET Web Core API at the time you setup it at Auth0 dashboard.

Here's a complete step by step tutorial for .NET Core 3.

Authorizing and then using JWT Token with Auth0 React & ASP.net core

2 Answers