Configuration of Scalar .NET with Microsoft.AspNetCore.OpenApi and IdentityServer #8958

[xaberue]

Hi there,

I'm struggling configuring Scalar .NET with IdentityServer to authenticate against it.

I'm using .NET 10, Microsoft.AspNetCore.OpenApi to generate the open api document, and a custom IdentityServer local instance as an IdP.

The problem is that once configured, there's no way to properly authenticate, it prompts an iframe and I can log in, but then nothing happens. The prompt isn't closed so even though the login is successful, the Scalar UI doesn't authenticate actually.

Should the iframe be closed automatically and redirect? should we configure somehow to open the login window in the same tab that is requesting it? another configuration missing?

I've created a sample repo based on my current project; it has the same configuration and the same issue. here

Sorry if I'm missing something basic or stupid but I can't find what's the problem

There's a discussion opened in Scalar project as well here

Not sure if this changes anything, but in the logs I'm seeing an annoying error:

Showing login: User is not active

The user is anyway logged in...

[wcabus]

Hi @xaberue,

The issue is most likely related to the redirect URI: when performing an OAuth2 or OIDC flow, the identity provider (Duende IdentityServer in this case) needs to know where to return back to.

After trying your sample repo locally and trying a few things, I believe the redirect URI should be "https://localhost:7125/scalar/", including the slash at the end. When I tried to configure the redirect URI without the trailing slash, Scalar's UI just reloaded without parsing the incoming request.

When you configure the OAuth2 flow, I would also suggest including at least the "openid" scope to retrieve the user's subject ID claim:

public static void ConfigureOpenApiWithScalarUI(this WebApplication app)
{
    if (app.Environment.IsDevelopment())
    {
        app.MapOpenApi();
        app.MapScalarApiReference(opt =>
        {
            opt
                .WithTitle("Weather API")
                .WithTheme(ScalarTheme.Kepler)
                .AddPreferredSecuritySchemes("OAuth2")
                .AddAuthorizationCodeFlow("OAuth2", flow =>
                {
                    flow.ClientId = "weather.api.scalar.client"; 
                    flow.Pkce = Pkce.Sha256;
                    flow.SelectedScopes = ["openid", "profile", "api.read"]; // I included profile as well
                    flow.RedirectUri = "https://localhost:7125/scalar/";
                });
        });
    }
}

Don't forget to also update your IdentityServer client configuration to allow this redirect URI:

public static IEnumerable<Client> Clients =>
    [
        new Client
        {
            ClientId = "weather.api.scalar.client",
            ClientName = "Scalar API Client",
            AllowedGrantTypes = GrantTypes.Code,
            RequirePkce = true,
            RequireClientSecret = false,
            RedirectUris = { "https://localhost:7125/scalar/" },
            AllowedCorsOrigins = { "https://localhost:7125", "https://localhost:5001" },
            AllowedScopes =
            {
                "openid", "profile", "api.read"
            },
            AllowOfflineAccess = false
        }
    ];

[xaberue]

Hi @wcabus!

Thank you very much for taking my question into consideration and giving me a hand!!

I tried it, and it worked exactly as you suggested, both in the sample project and in the real one it was based on.

In the real project I was also struggling because of another silly detail: I still had TestUsers in the configuration even though the whole project is using a proper SQL Server data source.

builder.Services
    .AddIdentityServer(options =>
        ...
    )
    .AddTestUsers(IdentityServerConfig.Users);

Once I removed that and configured the redirect URLs as you recommended, everything worked perfectly. 👌

Again, I really appreciate that you took the time to help me.

Kind regards!