Swagger-ui: Show required OAuth scopes on each endpoint

[pacey]

The API I am documenting has a lot of scopes available. However, a single endpoint usually only requires one scope. Currently a padlock is displayed on each endpoint and clicking it opens the Available authorizations modal where _all_ scopes the API has are displayed.

It would be great to know which individual scopes are required per endpoint.

I have checked my source swagger json and this information is there on a per endpoint basis. Here is a subset of my swagger json to show the relevant sections:

{
  "swagger": "2.0",
  "info": {
    "description": "Api Documentation",
    "version": "1.0",
    "title": "Api Documentation",
    "termsOfService": "urn:tos",
    "contact": {},
    "license": {
      "name": "Apache 2.0",
      "url": "http://www.apache.org/licenses/LICENSE-2.0"
    }
  },
  "paths": {
    "/v1/organisations/{id}": {
      "get": {
        "summary": "Get a single Organisation",
        "operationId": "getByIdUsingGET",
        "security": [
          {
            "Auth0": [
              "get:organisation"
            ]
          }
        ],
        "deprecated": false
      }
    }
  },
  "securityDefinitions": {
    "Auth0": {
      "type": "oauth2",
      "tokenUrl": "https://xxxxxxxxx/oauth/token",
      "flow": "application",
      "scopes": {
        "create:organisation": "Create an Organisation",
        "get:organisation": "Get a single Organisation",
        "list:organisation": "List Organisations",
        "update:organisation": "Update an Organisations",
        "delete:organisation": "Delete an Organisations",
      }
    }
  }
}

[hkosova]

Related: Auth button doesn't indicate missing OAuth2 scopes anymore.

[danielbecroft]

Is there any update on this? It is planned to be added in a soon-to-be-released release?

[ruks]

Looks this is a valid requirement. Can we support this in the next release?

[Akridian]

Is there any chances to get this functionality in future?

[killergege]

I'd vote too for this.
I don't know if it was a custom dev from my company or the old version but before upgrading, we had an icon that displayed the scopes for each endpoint, and its status (whether current user has the scope or not)
It was great. So I suggest that you do the same, for instance on the padlock icon.

Screenshot examples:
Not authenticated / Authenticated with a few of the required scopes / Fully authenticated

The colors is a bonus, but at least having the list would be great.

[jdvalentine]

Another vote for this.

Thanks for a great product!

[rgreil]

This feature would be really helpful.

[lephuongbg]

We came up with a plugin that do the job well enough for us:

// Remember to include React either through script tag in browser environment:
//     <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
// or through import with webpack/babel:
//     import React from 'react'
const h = React.createElement
SwaggerUIBundle({
    // ...
    presets: [
        system => {
            // Variable to capture the security prop of OperationSummary
            // then pass it to authorizeOperationBtn
            let currentSecurity
            return {
                wrapComponents: {
                    // Wrap OperationSummary component to get its prop
                    OperationSummary: Original => props => {
                        const security = props.operationProps.get('security')
                        currentSecurity = security.toJS()
                        return h(Original, props)
                    },
                    // Wrap the padlock button to show the
                    // scopes required for current operation
                    authorizeOperationBtn: Original =>
                        function (props) {
                            return h('div', {}, [
                                ...(currentSecurity || []).map(scheme => {
                                    const schemeName = Object.keys(scheme)[0]
                                    if (!scheme[schemeName].length) return null

                                    const scopes = scheme[schemeName].flatMap(scope => [
                                        h('code', null, scope),
                                        ', ',
                                    ])
                                    scopes.pop()
                                    return h('span', null, [schemeName, '(', ...scopes, ')'])
                                }),
                                h(Original, props),
                            ])
                        },
                },
            }
        },
    ]
})