Swagger with SPA (Angular + .Net)

Questions OAuth/OIDC
,
1

Hi to all,
I have an angular application + .Net 8 WebApi and I’m trying to make Swagger works.
I registered the app on Okta as a SPA and authentication works well using Authorization Code grant with PKCE.
But I’m not able to authenticate directly from Swagger: I get a 400 Bad Request error page form Okta.
What I’m wrong?
This is my configuration on WebApi:

builder.Services
    .AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = OktaDefaults.ApiAuthenticationScheme;
        options.DefaultChallengeScheme = OktaDefaults.ApiAuthenticationScheme;
        options.DefaultSignInScheme = OktaDefaults.ApiAuthenticationScheme;
    })
    .AddOktaWebApi(new OktaWebApiOptions()
    {
        OktaDomain = builder.Configuration["Okta:OktaDomain"],
        AuthorizationServerId = builder.Configuration["Okta:AuthorizationServerId"],
        Audience = builder.Configuration["Okta:Audience"],
    });

builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API", Version = "2.0" });

    c.OperationFilter<AddHeaderParameter>();
    
    c.AddSecurityDefinition("oauth2", new OpenApiSecurityScheme
    {
        Description = "Oauth2.0 with AuthorizationCode flow",
        Name = HeaderNames.Authorization,
        Type = SecuritySchemeType.OAuth2,
        Flows = new OpenApiOAuthFlows()
        { 
            AuthorizationCode = new OpenApiOAuthFlow
            {
                AuthorizationUrl = new Uri($"{builder.Configuration["Okta:OktaDomain"]}/oauth2/default/v1/authorize"),
                TokenUrl = new Uri($"{builder.Configuration["Okta:OktaDomain"]}/oauth2/default/v1/token"),
                Scopes = new Dictionary<string, string> {
                    { "openid", "OpenID Connect scope" },
                    { "profile", "Profile scope" },
                    { "email", "Email scope" }
                }
            }
        }
    });

    c.ResolveConflictingActions(apiDescriptions => apiDescriptions.First());
    c.AddSecurityRequirement(new OpenApiSecurityRequirement
    {
        {
            new OpenApiSecurityScheme {
                Reference = new OpenApiReference {
                        Type = ReferenceType.SecurityScheme,
                            Id = "oauth2"
                    },
                    Scheme = "oauth2",
                    Name = "oauth2",
                    In = ParameterLocation.Header
            },
            new[] { "openid", "profile", "email"}
        }
    });
});

app.UseSwagger();
app.UseSwaggerUI(c =>
{
    c.EnableTryItOutByDefault();
    c.OAuthAppName("My API");
    c.OAuthClientId(builder.Configuration["Okta:ClientId"]);
    c.OAuthScopes("openid", "profile", "email");
    c.OAuthUsePkce();
});
app.MapSwagger().RequireAuthorization();

Thanks in advance

2

Please double-check all your configurations, as there may be something missing that is being used in Swagger to reconstruct the call. You could try logging the entire request to Okta from Swagger to verify if the configuration is correct. In most cases, a 400 error indicates a configuration issue or a client-side problem.

But I’m not able to authenticate directly from Swagger: I get a 400 Bad Request error page form Okta.

Could you please elaborate on how you are attempting this? Are you following an article, a blog, or using another method?

3

I have read several disscussion on this forum and some articles on the web and the result is above configuration.
I don’t know what else to check onestly.

4

Hi there @davide.nani!

Welcome to the community!

Would you mind comparing your code to this project example? This project has Swagger connecting with Okta and is the closest example I can think of that matches your setup.

Let us know how it goes!