Swagger with Multiple API Keys

Question

I'm developing an API ASP.Net Core (net6.0) in which authentication will be achieved by requesting that a key (X-API-KEY) and an app id (X-APP-ID) be passed in the request header.

This is described in the "Multiple API Keys" section of https://swagger.io/docs/specification/authentication/api-keys/

My code for configuring this within Program.cs can be found below.

builder.Services.AddSwaggerGen(c =>
{    
    c.AddSecurityDefinition("apiKey", new OpenApiSecurityScheme()
    {
        Description = "API KEY",
        Name = "X-API-KEY",
        In = ParameterLocation.Header,
        Type = SecuritySchemeType.ApiKey
    });

    c.AddSecurityDefinition("appId", new OpenApiSecurityScheme()
    {
        Description = "APP ID",
        Name = "X-APP-ID",
        In = ParameterLocation.Header,
        Type = SecuritySchemeType.ApiKey
    });

    c.AddSecurityRequirement(new OpenApiSecurityRequirement()
    {
        {
            new OpenApiSecurityScheme
            {
                Reference = new OpenApiReference
                {
                    Type = ReferenceType.SecurityScheme,
                    Id = "apiKey"
                }                
            },
            Array.Empty<string>()
        },
        {
            new OpenApiSecurityScheme
            {
                Reference = new OpenApiReference
                {
                    Type = ReferenceType.SecurityScheme,
                    Id = "appId"
                }
            },
            Array.Empty<string>()
        }
    });
});

The current configuration results in the below which actually works however it would be nicer to have only one "Authorize" and "Close" button with the two text boxes in the one section.

I'm hoping I'm just missing a tweak in the configuration. Any help much appreciated.

Answer 1

Your configs are correct. This is just how Swagger UI currently renders API key pairs. Here's an existing enhancement request:
https://github.com/swagger-api/swagger-ui/issues/3521