401 Errors with AspNetCore API and Vue.js client

[jsmith]

I’m using the Auth JS in my Vue client and attempting to secure my .NET Core API as well. Calls to my API are failing. I’ve ensured that both applications have the same issuer property set. Also, I’ve set the API up in the Authorization Server configuration area.

When using fiddler, I see the authorization fails for the following reason: WWW-Authenticate: Bearer error=“invalid_token”, error_description=“The signature key was not found”.

I have posted my access token into https://www.jsonwebtoken.io/ and it says that the signing key was verified.

Any thoughts?

[andrea]

Which authorization server is your application using?

Is it a custom authorization server (e.g, token is requested via https://oktaDomain/oauth2/default/v1/token OR https://oktaDomain/oauth2/aus1234567890/v1/token) or the Org authorization server (token is requested via https://oktaDomain/oauth2/v1/token)?

[jsmith]

I’m using Okta’s Auth JS solution in my Vue.js client to request a token from Okta, and then I’m adding the accessToken to the header of requests to my API. The API is rejecting those requests.

[andrea]

What is the issuer you are using when you configured the .NET API? Is it the same issuer as the one used by your Vue app?

[jsmith]

Hey Andrea,

A har file is attached.

To see that the same issuer is being used, here are the settings from the auth.js file in the Vue.js client:

const OktaAuth = require(’@okta/okta-auth-js’).OktaAuth

const authClient = new OktaAuth({ issuer: ‘https://lend.okta.com’ })

…

Here is the setting change in the AspNetCore example of yours that I’m trying to access:

[appsettings.json]

“Okta”: {

“OktaDomain”: https://lend.okta.com

}

[Startup.cs]

public void ConfigureServices(IServiceCollection services)

{

services.AddCors(options =>

{

// The CORS policy is open for testing purposes. In a production application, you should restrict it to known origins.

options.AddPolicy(

“AllowAll”,

builder => builder.AllowAnyOrigin()

.AllowAnyMethod()

.AllowAnyHeader());

});

services.AddAuthentication(options =>

{

options.DefaultAuthenticateScheme = OktaDefaults.ApiAuthenticationScheme;

options.DefaultChallengeScheme = OktaDefaults.ApiAuthenticationScheme;

options.DefaultSignInScheme = OktaDefaults.ApiAuthenticationScheme;

})

.AddOktaWebApi(new OktaWebApiOptions()

{

OktaDomain = Configuration[“Okta:OktaDomain”],

});

services.AddAuthorization();

services.AddControllers();

}

Thank you!!

(Attachment localhost_okta.har is missing)

[jsmith]

Hey Andrea,

To see that the same issuer is being used, here are the settings from the auth.js file in the Vue.js client:

const OktaAuth = require(’@okta/okta-auth-js’).OktaAuth

const authClient = new OktaAuth({ issuer: ‘https://lend.okta.com’ })

…

Here is the setting change in the AspNetCore example of yours that I’m trying to access:

[appsettings.json]

“Okta”: {

“OktaDomain”: https://lend.okta.com

}

[Startup.cs]

public void ConfigureServices(IServiceCollection services)

{

services.AddCors(options =>

{

// The CORS policy is open for testing purposes. In a production application, you should restrict it to known origins.

options.AddPolicy(

“AllowAll”,

builder => builder.AllowAnyOrigin()

.AllowAnyMethod()

.AllowAnyHeader());

});

services.AddAuthentication(options =>

{

options.DefaultAuthenticateScheme = OktaDefaults.ApiAuthenticationScheme;

options.DefaultChallengeScheme = OktaDefaults.ApiAuthenticationScheme;

options.DefaultSignInScheme = OktaDefaults.ApiAuthenticationScheme;

})

.AddOktaWebApi(new OktaWebApiOptions()

{

OktaDomain = Configuration[“Okta:OktaDomain”],

});

services.AddAuthorization();

services.AddControllers();

}

Thank you!!

[andrea]

If you are trying to locally validate access tokens on your .NET resource server, you MUST use a custom authorization server (by default, the .NET SDK will assume you have the ‘default’ custom authorization server available). More details about this limitation here.

It looks like you are not using the custom server in your vue app, while your .NET server seems to be expecting it.

Can you try setting the issuer for your Vue app to be the same ‘Default’ authorization server to see if you can get tokens that will work with your resource server? To use the default server, the issuer you set in Auth JS should be https://org.okta.com/oauth2/default

Note that not all Okta tenants have the ‘default’ auth server or the ability to create custom authorization servers. An additional paid feature may be required, depending on your contract. More details about the different types of authorization servers available here.

[jsmith]

That was it! Thank you, Andrea