Swagger-ui: Client id and client secret not added to request body on authorization

[ThomHurks]

When I click on "Authorize" in swagger-ui, fill in my username & password, client id & client secret, select "request body" for the method of including the client id & secret and then press "Authorize", the result is that the client id & secret are not added to the request body. As a result, my oauth endpoint gives an error that the client id is invalid.

I looked in the code a bit, and as far as I can see it checks if the method dropdown is set to "query" in which case it adds the client id & secret as query parameters and otherwise it always adds it as a header. Since "request body" is an option, it should check for that too and add it to the request body.

| Q | A
| ------------------------------- | -------
| Bug or feature request? | Bug
| Which Swagger/OpenAPI version? | 2
| Which Swagger-UI version? | 3.9.3
| How did you install Swagger-UI? | composer
| Which browser & version? | Chrome 64
| Which operating system? | MacOS High Sierra

Demonstration

Expected Behavior

If I select "Request body" in the Authorize modal, then it should add the client id & secret to the request body.

Current Behavior

I select "request body" in the authorize modal, and instead it adds it to the header of the request, not the body.

Possible Solution

When the user selects "request body", add the client info to the request body, not the header of the request.

Context

Due to the current behaviour swagger-ui does not work with my project, since all my API calls require authentication which is now not possible with swagger-ui.

[scottohara]

Yes, it does seem like there's a branch of code missing for passwordType == 'request-body' here:

https://github.com/swagger-api/swagger-ui/blob/7fd229fe72452e19d527d6f3e92382fd105b3f21/src/core/plugins/auth/actions.js#L81-L95

The else branch at line 94 defaults to using the clientId + secret as an Authorization: Basic ... header.

Presumably it needs something like:

  if (clientId && clientSecret) {
    switch (passwordType) {
      case "query":
        Object.assign(query, {client_id: clientId}, {client_secret: clientSecret})
        break

      case "request-body":
        Object.assign(form, {client_id: clientId}, {client_secret: clientSecret})
        break

      default:
        headers.Authorization = "Basic " + btoa(clientId + ":" + clientSecret)
    }
  }

[shockey]

@scottohara I believe you're on the right track here.

As always... PRs welcome, everyone 😉

[schellingerht]

I have the same issue. I'm using the same version as OP, but use the oAuth2 with grant type client_credentials (flow application).

I can fill the fields client_id, client_secret and scope in the popup. But only grant_type and scope are added in the FormData. The filled client_id and client_secret are not added. That's why I get the Auth Error Error

How can I fix this?

[monicatao]

I have the same issue. I'm using the same version as OP, but use the oAuth2 with grant type client_credentials (flow application).

I can fill the fields client_id, client_secret and scope in the popup. But only grant_type and scope are added in the FormData. The filled client_id and client_secret are not added. That's why I get the Auth Error Error

How can I fix this?

Hi did you figure out how to fix it? I get the same error

[monicatao]

I have one question. Is it possible to only use client_id and client_secret without username and password to authorize?

[Charlie-iProov]

getting the exact same issue as @schellingerht with a FastAPI implementation (python). client_id and client_secret not being added to request body but other params are - https://github.com/tiangolo/fastapi/issues/779