Swagger-ui: Preauthorization methods are confusing

[shockey]

| Q | A
| ------------------------------- | -------
| Bug or feature request? | Usability Improvement
| Which Swagger/OpenAPI version? | Any
| Which Swagger-UI version? | 3.13.1
| How did you install Swagger-UI? | n/a
| Which browser & version? | n/a
| Which operating system? | n/a

Description

In cases where authorization data is fetched from a remote source (e.g. loading a definition by URL), preauthorization methods do not work until the definition is in memory.

This is due to the auth state being designed so that a security definition must be stored in state alongside authorization information for that definition. That definition is not available at synchronous call time, so we're unable to open up the preauthorization methods to a simpler usage pattern.

Expected Behavior

I should be able to call a preauthorization method immediately after creating my Swagger-UI instance that points to a URL:

const ui = SwaggerUI({
  dom_id: '#myDomId',
  url: "http://petstore.swagger.io/v2/swagger.json"
})

ui.preauthorizeApiKey("MyAuth", "MyApiKey1234")

Current Behavior

I must place my preauthorization inside of onComplete when I'm fetching a definition by URL:

const ui = SwaggerUI({
  dom_id: '#myDomId',
  url: "http://petstore.swagger.io/v2/swagger.json"
  onComplete: () => {
    ui.preauthorizeApiKey("MyAuth", "MyApiKey1234")
  }
})

Not doing this results in the data being lost, thanks to this code:

https://github.com/swagger-api/swagger-ui/blob/master/src/core/plugins/auth/index.js#L62

Possible Solution

Refactor the auth state system to hold an auth data lookup table that is keyed by name+type, and does not depend on the definition itself being stored in state.

May also want to find a way to flush auth data after another definition is loaded later.

[shockey]

cc: @hkosova

[jonathann92]

+1

I would this feature as well because I want to build another component that will fetch the token. Tokens can change if the user decides to grab another token.

I can't grab my token using the standard methods because the payload to retrieve the token has a custom field.

[anbusurendhar]

Experienced the same.
Token can be used dynamically attached to any request.

My API server is running on _http://localhost:1337_

Setup all the Oauth2 grants definitions to fetch access token. Eg. Implicit, Authorization code, Password. In my case,

_swagger.json_

"securityDefinitions": {
        "ImplicitOauth2": {
            "type": "oauth2",
            "authorizationUrl": "http://localhost:1337/oauth/authorize",
            "flow": "implicit"
        },
        "accessCodeOauth2": {
            "type": "oauth2",
            "authorizationUrl": "http://localhost:1337/oauth/authorize",
            "tokenUrl": "http://localhost:1337/oauth/token",
            "flow": "accessCode"
        },
        "PasswordOauth2": {
            "type": "oauth2",
            "tokenUrl": "http://localhost:1337/oauth/token",
            "flow": "password"
        },
        "AccessToken": {
            "type": "apiKey",
            "in": "query",
            "name": "access_token"
        }
}

_index.html_

const ui = SwaggerUIBundle({
        url: "/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        filter:false,
        presets: [
          SwaggerUIBundle.presets.apis
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        oauth2RedirectUrl:"http://localhost:3002/oauth2-redirect.html",
        responseInterceptor:function(response){
            if(response.obj.access_token){
                const token = response.obj.access_token;
                ui.preauthorizeApiKey("AccessToken", token);
            }
            return response;
        }
});

Here responseInterceptor is called every time when the application receives a http response. It takes up response object as parameter and the response object contain the server response.

A typical Oauth2 server should produce a json string containing _access_token_, _refresh_token_, _expires_in_, _token_type_.

This responseInterceptor function checks if the response possess the _access_token_ key, and if available then the token value is assigned to the _apiKey_ security definitions using

ui.preauthorizeApiKey("AccessToken", token); 

Hope this help.