can't access window.swaggerUi inside injected JS code

[wojciech-zur]

I have a backend in .NET 8, where I InjectJavascript like this:

var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        // Add custom JavaScript to the Swagger UI
        c.InjectJavascript("/customSwaggerLogin.js");
    });
}

my customSwaggerLogin.js content is:

document.ready = function () {
    // Add login button
    const authButton = document.createElement('button');
    authButton.innerText = 'Log In and Get Token';
    authButton.onclick = async function () {
        // Login data
        const loginData = {
            Username: 'login',
            Password: 'pass'
        };
        try {
            const response = await fetch('https://localhost:7031/Auth/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(loginData)
            });
            const data = await response.json();
            if (data.token) {
                // Set JWT token in Swagger UI
                window.swaggerUi.api.clientAuthorizations.add('jwtAuth', new SwaggerClient.ApiKeyAuthorization('Authorization', `Bearer ${data.token}`, 'header'));
                alert('Logged in successfully');
            } else {
                alert('Login failed');
            }
        } catch (error) {
            console.error('Login error', error);
            alert('Login error');
        }
    };

    // Add the button to Swagger UI
    var r1 = document.querySelector('.swagger-ui .topbar').appendChild(authButton);
};

The code properly fetches JWT token, but it crashes here:

window.swaggerUi.api.clientAuthorizations.add('jwtAuth', new SwaggerClient.ApiKeyAuthorization('Authorization', `Bearer ${data.token}`, 'header'));

telling me that window.swaggerUi is undefined. I will be glad for any hint with this issue.

[zoltanium]

I was having almost the exact same issue. I could not get window.swaggerUi to work, but after FAR too long of trial and error, I was able to succeed. Hopefully it will help someone else.

Step 1: In your Program.cs or equivalent, prior to app definition, make sure you are adding a SecurityDefinition of type "Bearer"

// This is just info for the default Authorize button popup, but it enables the js functions
OpenApiSecurityScheme mySecurityScheme = new()
{
    In = ParameterLocation.Header,
    Description = "help text",
    Name = "Authorization",
    Type = SecuritySchemeType.ApiKey,
    BearerFormat = "Bearer {token}"
};

// **This is important, no other value seems to work**
const string schemeName = "Bearer";

builder.Services
    .AddSwaggerGen(c =>
    {
        c.SwaggerDoc("v1", new() { Title = "{}", Version = "v1" });
        c.AddSecurityDefinition(schemeName, mySecurityScheme );  // Make sure this line is included in your startup
    });

Step 2: Now, in your injected.js:

// in custom button click's success fn:
const token = "accessTokenFromApiCall";

window.ui.authActions.authorize(
    {
        Bearer: {  
            name: "Bearer",
            schema: { type: "apiKey", in: "header", name: "Authorization", description: "" }, value: "Bearer " + token
        }
    });

Now when I click my custom button then try an API call, everything works as expected:

curl -X 'GET' \
  'http://localhost:1234/api/things' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer accessTokenFromApiCall'

I hope nobody else ever has to go through this :)