How to add "bearer" auth header in Swagger UI 3.0 version using javascript instead of clicking "authorize" button

Question

I am using Swagger UI 3.0 to call the Endpoint API's listed there. And to call the api's, I have to add authentication in header. We had javascript to add the authentication to the swagger UI which adds the authentication globally to all API in the swagger UI for Swagger UI version of 2.0. So this way, I don't have to click the "authorize" button in the swagger UI to add auth token in header.

But recently we moved to new swagger version of 3.0. As a result, this javascript doesn't work anymore.

Is there any way to add header of Bearer auth using any javascript in Swagger UI 3.0 instead of clicking the "authorize" Button.

I am asking this because It is really annoying to manually add the auth everytime I open the swagger UI to call API's.

I don't want to click this below authorize button to add Auth header. Instead I want to add this using some javascirpt.

this post below was not helpful for me. https://stackoverflow.com/questions/45199989/how-do-i-automatically-authorize-all-endpoints-with-swagger-ui — MD ISLAM, Jun 06 '20 at 02:13
Means you want to hard code authentication token in your code right? — turivishal, Jun 06 '20 at 06:01
You have to check this conversations [Conversation-1](https://github.com/scottie1984/swagger-ui-express/issues/44), [Conversation-2](https://github.com/swagger-api/swagger-ui/issues/2915) — turivishal, Jun 06 '20 at 07:30
I don't want to hard code token, the old java script that we had for swagger 2.0 was able to get token dynamically by calling our internal oauth url and put it in the header... — MD ISLAM, Jun 06 '20 at 18:10
And Is there any way to make this happen without making any source code change or update in the API service project itself? because the javascript we had was able to add the header without making any code change in the api project itself — MD ISLAM, Jun 06 '20 at 18:12
We used like below code to add the header to the swagger UI for version 2.0. new SwaggerClient.ApiKeyAuthorization( "Authorization", "", "header")); But Swagger 3.0 version doesn't have this class anymore to use it. — MD ISLAM, Jun 06 '20 at 18:13
See the second part of [this answer](https://stackoverflow.com/a/45471010/113116). — Helen, Jun 08 '20 at 07:51
looks like this solution requires code change in the project in index.html file. Is there any solution possible without making any code change in project?? — MD ISLAM, Jun 08 '20 at 15:03

Padvinder · Answer 1 · 2022-06-10T07:48:07.650

Pure javascript way to manipulate swaggerUI reactjs authorize form and set bearer token: (from browser console, tested in chrome)

let jwtToken = "YOUR_JWT_TOKEN"; //just token without 'Bearer ' prefix

let openAuthFormButton = document.querySelector(".auth-wrapper .authorize.unlocked");
openAuthFormButton.click();

setTimeout(function() {
    let tokenInput = document.querySelector(".auth-container input");
    let authButton = document.querySelector(".auth-btn-wrapper .modal-btn.auth");
    let closeButton = document.querySelector("button.btn-done");
    
    let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
    nativeInputValueSetter.call(tokenInput, jwtToken);
    
    let inputEvent = new Event('input', { bubbles: true});
    tokenInput.dispatchEvent(inputEvent);
    authButton.click();
    closeButton.click();
}, 500);

This clicks 'Authorize' button which opens up authorize form, some wait is added (500ms) so form has time to open up and initialize form fields. JWT token is then inserted into input field, and tricky part for me was to tell react that value was updated, for this you have to call set function directly (because react overrides it) and dispatch "input" event as described here https://stackoverflow.com/a/46012210/4695799

After that it's walk in the park to perform click on 'Authorize' button and close the form.

Sourav Sharma · Answer 2 · 2021-04-21T12:33:51.387

In Swagger 3.0.0, globalOperationParameters is deprecated.Use globalRequestParameters in place of that. Below is the snippet.

@Bean
public Docket api() {
    return new Docket(DocumentationType.SWAGGER_2)
        .apiInfo(apiInfo())
        .select()
        .apis(RequestHandlerSelectors.withClassAnnotation(Api.class))
        .paths(PathSelectors.any())
        .build()
        .globalRequestParameters(newArrayList(authorizationHeader()))
        .protocols(Sets.newHashSet("http", "https"));
}

private RequestParameter authorizationHeader() {

    return new RequestParameterBuilder()
        .name("Authorization")
        .description("Authorization header")
        .in(ParameterType.HEADER)
        .required(false)
        .build();
}

How to add "bearer" auth header in Swagger UI 3.0 version using javascript instead of clicking "authorize" button

2 Answers2

Linked