Dotnet core OKTA not accepting Authorization header token from React

Hi Guys & Girls,

I recently created a React Frontend with OKTA auth that works fine. I’ve added my token to the Authorization header to be sent to my Dotnet core backend( as per the Okta tutorial: https://developer.okta.com/docs/guides/sign-into-spa/react/use-the-access-token/).

The problem is, when the request with header is sent, it causes this error:

System.InvalidOperationException: IDX20803: Unable to obtain configuration from: ‘System.String’.
at Microsoft.IdentityModel.Protocols.ConfigurationManager1.GetConfigurationAsync(CancellationToken cancel) at Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler.HandleAuthenticateAsync() at Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler.HandleAuthenticateAsync() at Microsoft.AspNetCore.Authentication.AuthenticationHandler1.AuthenticateAsync()
at Microsoft.AspNetCore.Authentication.AuthenticationService.AuthenticateAsync(HttpContext context, String scheme)
at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

HEADERS

Accept: application/json, text/plain, /
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Authorization: Bearer (AUTH TOKEN HERE)
Cache-Control: no-cache
Connection: close
Host: localhost:44300
Pragma: no-cache
Referer: http://localhost:44350/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
origin: http://localhost:44350
sec-fetch-site: cross-site
sec-fetch-mode: cors
sec-fetch-dest: empty

I am setting my dotnet core backend up as specified in Okta tutorial: https://developer.okta.com/docs/guides/protect-your-api/aspnetcore3/configure-packages/

Issuer is the same on both back and frontend… issuer: ‘https://xxx.oktapreview.com’,

Would anyone know what is causing this? It doesn’t seem to like any token, especially any with ‘bearer’ prefixing it, but that’s what the tutorial says…

How exactly did you configure your backend middleware and initialize your backend during startup? It seems to me that your backend app fails to pull OIDC meta configuration from Okta.

same as outlined here:

    public virtual void ConfigureServices(IServiceCollection services)
    {
        //OKTA authentication
        services.AddAuthentication(options =>
        {
            options.DefaultAuthenticateScheme = OktaDefaults.ApiAuthenticationScheme;
            options.DefaultChallengeScheme = OktaDefaults.ApiAuthenticationScheme;
            options.DefaultSignInScheme = OktaDefaults.ApiAuthenticationScheme;
        })
    
                .AddOktaWebApi(new OktaWebApiOptions()
                {
                    OktaDomain = this.configuration.GetValue<string>("OktaAuth:Authority")
                }
           

             );

        // All other services
        services
            .AddCustomCaching()
            .AddCustomCors()
            .AddCustomOptions(this.configuration)
            .AddCustomRouting()
            .AddResponseCaching()
            .AddCustomStrictTransportSecurity()
            .AddCustomHealthChecks()
            .AddCustomSwagger()
            .AddServerTiming()
            .AddAuthorization()
            .AddControllers()
            .Services
            .AddProjectMappers()
            .AddProjectRepositories()
            .AddProjectServices();


    public virtual void Configure(IApplicationBuilder application) => application
            .UseStaticFiles()
            .UseCookiePolicy()
            .UseIf(
                this.webHostEnvironment.IsDevelopment(),
                x => x.UseServerTiming())
                .UseResponseCaching()
                .UseIf(
                !this.webHostEnvironment.IsDevelopment(),
                x => x.UseHsts())
                .UseIf(
                this.webHostEnvironment.IsDevelopment(),
                x => x.UseDeveloperExceptionPage())
            .UseRouting()
            .UseCors(options => options.AllowAnyOrigin())
            .UseAuthentication()
            .UseAuthorization()
            .UseCustomSerilogRequestLogging()
            .UseEndpoints(
                builder =>
                {
                    builder.MapControllers().RequireCors(CorsPolicyName.AllowAny);
                    builder.MapDefaultControllerRoute();
                    builder
                    .MapHealthChecks("/status")
                    .RequireCors(CorsPolicyName.AllowAny);
                    builder
                        .MapHealthChecks("/status/self", new HealthCheckOptions() { Predicate = _ => false })
                        .RequireCors(CorsPolicyName.AllowAny);
                })
            .UseSwagger()
            .UseCustomSwaggerUI();
}

}

what’s the value for this config param? as I believe it participates in forming the URL to get the metadata from

OK i figured it out based on you telling me to look more closely at the Authority provider :). I simply had:
“Authority”: “https://xxx.oktapreview.com/oauth/default” instead of:
“Authority”: “https://xxx.oktapreview.com”. I think I just followed some bad advice on stack overflow for this one.
Thank you so much for help :slight_smile:

1 Like