Auth Type not loading

[juvegitau]

What happens?

On access /scalar/v1 the app doesnt load auth types dropdown on further inspecting on the browser the app has an error below:

TypeError: Cannot read properties of undefined (reading 'uid')
at Cye (scalar.js:27559:6)
at scalar.js:27602:50
at c (scalar.js:501:10)
at Array.map ()
at tn (scalar.js:502:40)
at Proxy.map (scalar.js:488:8)
at rr.fn (scalar.js:27602:42)
at $t (scalar.js:432:49)
at get value (scalar.js:608:9)
at Proxy. (scalar.js:27609:34)
overrideMethod @ hook.js:608

What did you expect to happen?

show the section below

OpenAPI Document

No response

[juvegitau]

on .NET 9.0 web api project

[hanspagel]

Thanks for the report! Are you using the latest version from nuget?

[juvegitau]

Yes. version 1.2.45

[juvegitau]

when using the desktop version it works okay

[e-Naeim]

same problem

[israelquiroz93]

Same Problem for me with a .NET 9 api project no matter how many different ways i try to add auth nothing shows up in the dropdown

[nikolliervin]

@israelquiroz93 I was having the same problem a few days ago and I solved it using a Transformer.

builder.Services.AddOpenApi("v1", options => { options.AddDocumentTransformer<BearerSecuritySchemeTransformer>(); });

internal sealed class BearerSecuritySchemeTransformer(Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider authenticationSchemeProvider) : IOpenApiDocumentTransformer
{
    public async Task TransformAsync(OpenApiDocument document, OpenApiDocumentTransformerContext context, CancellationToken cancellationToken)
    {
        var authenticationSchemes = await authenticationSchemeProvider.GetAllSchemesAsync();
        if (authenticationSchemes.Any(authScheme => authScheme.Name == "Bearer"))
        {
            var requirements = new Dictionary<string, OpenApiSecurityScheme>
            {
                ["Bearer"] = new OpenApiSecurityScheme
                {
                    Type = SecuritySchemeType.Http,
                    Scheme = "bearer", 
                    In = ParameterLocation.Header,
                    BearerFormat = "Json Web Token"
                }
            };
            document.Components ??= new OpenApiComponents();
            document.Components.SecuritySchemes = requirements;

            foreach (var operation in document.Paths.Values.SelectMany(path => path.Operations))
            {
                operation.Value.Security.Add(new OpenApiSecurityRequirement
                {
                    [new OpenApiSecurityScheme { Reference = new OpenApiReference { Id = "Bearer", Type = ReferenceType.SecurityScheme } }] = Array.Empty<string>()
                });
            }
        }
    }
}

[BianorAraujo]

I’m experiencing the same issue where the auth type dropdown doesn’t seem to work.

@israelquiroz93 I’ve also tried using different authentication configs, but none of them worked.

@nikolliervin While I don’t need to use Transformer, I thought it was a good suggestion.

Here’s the solution that worked for me (by header):

builder.Services.AddOpenApi();
builder.Services.AddAuthentication().AddBearerToken(IdentityConstants.BearerScheme);

builder.Services.AddAuthorizationBuilder();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.MapOpenApi();
    app.MapScalarApiReference(option => {
        option
            .WithTitle("Auth API")
            .WithTheme(ScalarTheme.DeepSpace)
            .WithDownloadButton(true)
            .WithDefaultHttpClient(ScalarTarget.CSharp, ScalarClient.HttpClient);
    });
}

app.UseAuthentication();
app.UseAuthorization();

app.MapGet("/test", () => "Hello World!").RequireAuthorization();

app.Run();

[amritk]

hello, could you please share your generated openapi document? then we can fix this real quick

[BenJenkinson]

The Scalar page only seems to show the "Authentication" box if the Open API schema has some defined security schemes.

I think the confusion is that the Scalar options provides methods like WithApiKeyAuthentication() and WithOAuth2Authentication() but these seem to be Scalar options only and have no effect on the Open API schema.

This would explain why the two working methods above are:

• @BianorAraujo's example which adds an authentication scheme using .NET's AddBearerToken method (which presumably causes a security scheme to appear in the Open API doc automatically)
• @nikolliervin's example to use an IOpenApiDocumentTransformer and explicitly add schemes to the Open API document

For completeness-sake, here's my adjusted version of @nikolliervin's example.

I altered it to document the security scheme requirement for the API as a whole, rather than applying the requirement to each API endpoint individually.

internal sealed class BearerSecuritySchemeTransformer(Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider authenticationSchemeProvider) : IOpenApiDocumentTransformer
{
    public async Task TransformAsync(OpenApiDocument document, OpenApiDocumentTransformerContext context, CancellationToken cancellationToken)
    {
        var authenticationSchemes = await authenticationSchemeProvider.GetAllSchemesAsync();

        if (authenticationSchemes.Any(authScheme => authScheme.Name == "Bearer"))
        {
            document.Components ??= new OpenApiComponents();

            var securitySchemeId = "Bearer";

            document.Components.SecuritySchemes.Add(securitySchemeId, new OpenApiSecurityScheme
            {
                Type = SecuritySchemeType.Http,
                Scheme = "bearer",
                In = ParameterLocation.Header,
                BearerFormat = "Json Web Token"
            });

            // Add "Bearer" scheme as a requirement for the API as a whole
            document.SecurityRequirements.Add(new OpenApiSecurityRequirement
            {
                [new OpenApiSecurityScheme { Reference = new OpenApiReference { Id = securitySchemeId, Type = ReferenceType.SecurityScheme } }] = Array.Empty<string>()
            });
        }
    }
}

[amritk]

Ah okay so this one is working as intended then. Feel free to re-open if there's an issue!