Swagger-ui: Request with bearer authorization gives exception and is not sent

[michielvaneerd]

| Q | A
| ------------------------------- | -------
| Bug or feature request? | Bug
| Which Swagger/OpenAPI version? | 3.0.0
| Which Swagger-UI version? | 3.4.4
| How did you install Swagger-UI? | Downloaded ZIP and used dist
| Which browser & version? | Chrome 61.0.3163.100
| Which operating system? | Mac OS Sierra

Demonstration API definition

{
  "openapi": "3.0.0",
  "info": {
    "title": "My API"
  },
  "components": {
    "securitySchemes": {
      "bearerAuth": {
        "type": "http",
        "scheme": "bearer"
      }
    }
  },
  "paths": {
    "/wp/v2/users": {
      "summary": "Users",
      "get": {
        "summary": "Get users",
        "security": {
          "bearerAuth": []
        },
        "responses": {
          "200": {
            "content": {
              "application/json": {}
            }
          }
        }
      }
    }
  }
}

Configuration (browser query string, constructor, config.yaml)

I just used the default index.html file and entered the swagger.json file location inside the input box.

Expected Behavior

I should see the Authorization header getting sent.

Current Behavior

Nothing is sent. Instead I see a console error:

index.js:1853 Uncaught TypeError: h.forEach is not a function
    at i (index.js:1853)
    at t.default (index.js:1759)
    at Object.o [as buildRequest] (index.js:1581)
    at actions.js:246
    at utils.js:121
    at bindActionCreators.js:3
    at wrap-actions.js:14
    at Object.r [as executeRequest] (system.js:166)
    at actions.js:285
    at utils.js:121

Possible Solution

I have no solution.

Context

Without the bearer security, it's working (the request is getting sent). So I can set a custom header for development and check for this custom header on the server.

[hkosova]

First, you need to fix the syntax errors in the spec:
1) Add info.version.
2) Change

"security": {
  "bearerAuth": []
},

to

"security": [
  {
    "bearerAuth": []
  }
],

3) Add a description for the 200 response.

Then when you use Swagger UI, click the "Authorize" button and enter your bearer token. Now the request will be sent with the Authorization header.

[michielvaneerd]

Thanks that's working!

However I do not understand the syntax for "security", as it doesn't look like valid JSON...

Anyway thank you for your help!

[hkosova]

Glad to help!

security is an [] array of security requirements, not an {} object. The syntax is a bit clearer when you use YAML - an object looks like

security:
  bearerAuth: []    # incorrect!

whereas an array looks like

security:
  - bearerAuth: []  # Correct; note the leading "-"

See if this helps:
https://swagger.io/docs/specification/authentication/

[michielvaneerd]

Then I think I have to start using YAML as it is better documented the the JSON.

Forgive if I am wrong, but wouldn't the following JSON then not be the correct format for an array of security requirements:

"security": [
  {
    "bearerAuth": []
  }
]

Because this will not validate as JSON:

"security": [
  "bearerAuth": []
]

[hkosova]

You are right, the correct JSON would be "security": [ { ... }, { ... }, ... ]. I updated the example.