I just figured this out today. You have to add a DocumentTransformer -> SecuritySchema using the AddOpenApi options:
builder.Services.AddOpenApi(o =>
{
o.AddDocumentTransformer((document, _, _) =>
{
document.Components ??= new OpenApiComponents();
document.Components.SecuritySchemes.Add("oauth", new OpenApiSecurityScheme
{
Type = SecuritySchemeType.OAuth2,
Flows = new OpenApiOAuthFlows
{
AuthorizationCode = new OpenApiOAuthFlow
{
AuthorizationUrl = new Uri("<your-app-auth-endpoint>"),
TokenUrl = new Uri("<your-app-token-endpoing>"),
Scopes = new Dictionary<string, string>
{
{"api://<client-id>/data.read", "Read Data"}
}
}
}
});
return Task.CompletedTask;
});
});
You can find the authorize/token endpoints by going to your Entra Admin Center -> Applications -> App Registrations -> (Selecting Your App) -> Endpoints (top banner at the time of writing) and then I used the OAuth 2.0 auth/token endpoints that should look something like:
https://login.microsoftonline.com/<directory-id>/oauth2/v2.0/authorize
https://login.microsoftonline.com/<directory-id>/oauth2/v2.0/token
app.MapScalarApiReference(c =>
{
c.WithOAuth2Authentication(o =>
{
o.ClientId = "<client-id>";
o.Scopes = ["api://<client-id>/data.read"];
});
});
We had to add a scope for our API app registration as using just User.Read did not work. You can do this by going to your app registration -> Expose an API and then adding a scope that will usually look something like: api://<client-id>/<scope-name>
Once this is all configured, you can spin up the Scalar UI. There should be an Authentication box at the top with an Auth Type dropdown. You can select oauth and then ensure PKCE/Scopes are selected and click Authorize.
We currently have two App Registrations in Entra. One is for our Frontend Angular SPA and the other is for our .NET Web API. The client-id we used was from the API App Registration