Invalid Token issue on .NET 6.0 React.js project created by Visual Studio 2022

Question

I have created the .NET 6.0 React.js and ASP.NET Core Web API project with the authentication parameter of individual by using the template of Visual Studio 2022.

Even after successful login clicking the Fetch data on the menu bar results the following error:

Please let me know if you have experienced the above mentioned phenomenon. Is this caused only on my environment?

Windows 10 Pro 64-bit 21H2
Visual Studio 2022 Community 17.1.3
.NET 6.0
Node.js 16.14.0
Chrome 100.0.4896.88 64-bit

The reason of the above error is probably a use of the http proxy module which results in judge of invalid access token:

I could find the workaround for this error. But I need to know if this is only my own environment problem or not.

Thank you.

----------

FYI,

There is another workaround I found in addition to that mentioned in my reply to @Bruce (SqlWork.com) .

The following Microsoft document,

Azure App Service on Linux
https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-6.0#azure-app-service-on-linux

says "For Azure App Service deployments on Linux, specify the issuer explicitly in Startup.ConfigureServices." So I tried it by adding the following settings in the Program.cs:

builder.Services.Configure<JwtBearerOptions>(  
    IdentityServerJwtConstants.IdentityServerJwtBearerScheme,  
    options =>  
    {  
        options.Authority = "https://localhost:44416";  
    });  

This also solves the issue. But I do not know why. There is no difference in the JWT token regardless of with or without the workarounds.

I would appreciate any input regarding the above. Thank you.

----------

I close this thread and will post the same question to the MSDN Forum in Japan as I am wondering if the issue is related to the OS ans VS2022 (language?). Thank you again for your information.

Answer 1

The default template works fine for me. I added a self signed cert, and trusted it for ssl. Used the default web pack proxy (react-scripts 4.3) and setupProxy.js to the asp.net core webapi.

web pack proxy: port 44421
AspNet core port: 7090

browser: https://localhost:44421
jwt token (note issuer is proxy url because of the proxy forward headers):

{ 
  "alg": "RS256", 
  "kid": "Development", 
  "typ": "at+jwt" 
}.{ 
  "iss": "https://localhost:44421", 
  "nbf": 1649783616, 
  "iat": 1649783616, 
  "exp": 1649787216, 
  "aud": "reactauthAPI", 
  "scope": [ 
    "reactauthAPI", 
    "openid", 
    "profile" 
  ], 
  "amr": [ 
    "pwd" 
  ], 
  "client_id": "reactauth", 
  "sub": "e9ad3388-a226-40bc-b3b2-f69a1d64334a", 
  "auth_time": 1649783611, 
  "idp": "local", 
  "sid": "1559416FF23843827EE6EE021BAD7AC7", 
  "jti": "4CAE63B7538B72E03F67CE018A14D9B1" 
}.[Signature] 

note: I used MacOs Monterey with M1 chip and Safari

Answer 2

Please see the following document:

.NET 6.0 Known Issues
https://github.com/dotnet/core/blob/main/release-notes/6.0/known-issues.md

In the "ASP.NET Core" setion the cause of this issue is described as follows:

SPA template issues with Individual authentication when running in development

The first time SPA apps are run, the authority for the spa proxy might be incorrectly cached which results in the JWT bearer being rejected due to Invalid issuer. The workaround is to just restart the SPA app and the issue will be resolved. If restarting doesn't resolve the problem, another workaround is to specify the authority for your app in Program.cs: builder.Services.Configure<JwtBearerOptions>("IdentityServerJwtBearer", o => o.Authority = "https://localhost:44416"); where 44416 is the port for the spa proxy.

When using localdb (default when creating projects in VS), the normal database apply migrations error page will not be displayed correctly due to the spa proxy. This will result in errors when going to the fetch data page. Apply the migrations via 'dotnet ef database update' to create the database.

I am wondering why you did not see this issue. Any idea?