Swagger-ui: OAuth2 Password Flow is broken in Swagger UI 3.x

Created on 23 Mar 2017 · 22Comments · Source: swagger-api/swagger-ui

I use http://petstore.swagger.io/ with this config http://flask-restplus-example-server.herokuapp.com/api/v1/swagger.json.

First of all, there is no scopes selection, which seems to be the source of the following bug. If I just enter the credentials, I get the following traceback:

swagger-ui-bundle.js:51 Uncaught TypeError: t.map is not a function
    at c (http://petstore.swagger.io/js/swagger-ui-bundle.js:71:30290)
    at http://petstore.swagger.io/js/swagger-ui-bundle.js:71:30534
    at Array.reduce (native)
    at l (http://petstore.swagger.io/js/swagger-ui-bundle.js:71:30362)
    at Object.p [as mergeInQueryOrForm] (http://petstore.swagger.io/js/swagger-ui-bundle.js:71:31273)
    at Object.fetch (http://petstore.swagger.io/js/swagger-ui-bundle.js:71:31444)
    at http://petstore.swagger.io/js/swagger-ui-bundle.js:81:5588
    at Object.dispatch (http://petstore.swagger.io/js/swagger-ui-bundle.js:41:3805)
    at dispatch (<anonymous>:2:1507)
    at Object.authorizePassword (http://petstore.swagger.io/js/swagger-ui-bundle.js:34:2323)

/cc @webron @bodnia @MugeSo @hkulekci @HugoMario @vpandey-rms @wimpers @bundabrg @danballance (I am sorry for the possible spam, but you were interested in the #2397, so I figured I would let you know about the issue).

P1 bug 3.x

Source

frol

👍1

All 22 comments

@bodnia - can you take a look at this? I believe we fixed it in an alternative build, but maybe the fix didn't get here as well.

@Minasokoni - if you try to load the provided spec, the global Authorize button does not appear (guessing it's related to https://github.com/swagger-api/swagger-ui/pull/2750) _and_ the Authorize button for individual operations does not open (at least in FF). I've checked in 3.0.1 and it wasn't an issue.

webron on 23 Mar 2017

👍1

application flow is broken as well, authorize button does not appear.

sgdesmet on 29 Mar 2017

@sgdesmet there is no support for application flow in swagger-ui.

bodnia on 29 Mar 2017

@bodnia Is this new for swagger-ui 3.x? It seems supported on 2.2.10

sgdesmet on 29 Mar 2017

@sgdesmet application flow wasn't supported in 2.x version, we can only display it but no authorization can be performed with it

bodnia on 29 Mar 2017

@frol the error is caused by tokenUrl in securityDefinitions:

"tokenUrl": "/auth/oauth2/token"

As far as it has relative path fetch cannot call it. Following works ok:

"securityDefinitions": {
    "oauth2_password": {
      "flow": "password",
      "scopes": {
        "auth:read": "Provide access to auth details",
        "auth:write": "Provide write access to auth details",
        "teams:read": "Provide access to team details",
        "teams:write": "Provide write access to team details",
        "users:read": "Provide access to user details",
        "users:write": "Provide write access to user details"
      },
      "tokenUrl": "http://flask-restplus-example-server.herokuapp.com/auth/oauth2/token",
      "type": "oauth2"
    }
  }

Display and send scopes as query parameter is merged to latest master.

bodnia on 30 Mar 2017

👍1

@bodnia Oh, my! I am so sorry for the trouble! (It would be great to have a nicer error message there...)

frol on 30 Mar 2017

🎉1

Any chance to get this patch-released please?

luispabon on 24 Apr 2017

@luispabon Do you experience any issues with this? In my case, that was just a stupid mistake in the tokenUrl (in my swagger.json), which included only an absolute path to the /auth/oauth2/token instead of a full URL with the domain name. Thus, there is nothing to patch in Swagger-UI.

frol on 24 Apr 2017

@luispabon can you share your spec to look into this

bodnia on 24 Apr 2017

@bodnia gonna check @frol's suggestion first :+1:

luispabon on 24 Apr 2017

@frol the token url parameter is an absolute path to the auth endpoint.

I had to anonymise and trim out the swagger.json spec as unfortunately I'm under NDA, but the following displays the same issue:

{
  "info": {
    "title": " API v1",
    "version": "1.0.0"
  },
  "host": "localhost:5000",
  "basePath": "/v1",
  "schemes": ["http"],
  "securityDefinitions": {
    "oauth2": {
      "type": "oauth2",
      "flow": "password",
      "tokenUrl": "http://localhost:5000/oauth2/token",
      "scopes": {
        "openid": "Access your identity"
      }
    }
  },
  "swagger": "2.0",
  "paths": {
    "/foobars": {
      "get": {
        "description": "Get foobars sorted by date",
        "parameters": [{
          "$ref": "#/parameters/Page"
        }, {
          "$ref": "#/parameters/PageSize"
        }],
        "tags": ["Foobars"],
        "responses": {
          "200": {
            "$ref": "#/responses/FoobarList"
          }
        }
      }
    },
    "/foobars/{id}": {
      "get": {
        "description": "Get foobar",
        "produces": ["application/json"],
        "parameters": [{
          "name": "id",
          "description": "Foobar ID",
          "in": "path",
          "required": true,
          "type": "string",
          "default": "6472726"
        }, {
          "name": "viewMode",
          "description": "View mode",
          "in": "query",
          "type": "string",
          "enum": ["full", "list"],
          "default": "full"
        }],
        "tags": ["Foobars"],
        "responses": {
          "200": {
            "description": "Foobar",
            "schema": {
              "type": "object",
              "properties": {
                "data": {
                  "$ref": "#/definitions/Foobar"
                }
              }
            }
          },
          "404": {
            "$ref": "#/responses/NotFound"
          }
        }
      }
    }
  },
  "parameters": {
    "Page": {
      "name": "page",
      "type": "integer",
      "description": "Page number",
      "in": "query",
      "minimum": 1,
      "default": 1
    },
    "PageSize": {
      "name": "pageSize",
      "type": "integer",
      "description": "Page size",
      "in": "query",
      "minimum": 1,
      "maximum": 100,
      "default": 10
    }
  },
  "tags": []
}

luispabon on 24 Apr 2017

The error is:

swagger-ui-bundle.js:59909 Uncaught TypeError: t.map is not a function
    at c (http://localhost:5000/v1/docs/swagger-ui-bundle.js:65:31147)
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:65:31402
    at Array.reduce (native)
    at l (http://localhost:5000/v1/docs/swagger-ui-bundle.js:65:31219)
    at Object.p [as mergeInQueryOrForm] (http://localhost:5000/v1/docs/swagger-ui-bundle.js:66:220)
    at Object.fetch (http://localhost:5000/v1/docs/swagger-ui-bundle.js:66:391)
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:73:26827
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:36:3829
    at Object.authorizePassword (http://localhost:5000/v1/docs/swagger-ui-bundle.js:29:15463)
    at i (http://localhost:5000/v1/docs/swagger-ui-bundle.js:81:7792)

luispabon on 24 Apr 2017

I've updated to 3.0.6 and the error is still the same:

swagger-ui-bundle.js:60462 Uncaught TypeError: t.map is not a function
    at c (http://localhost:5000/v1/docs/swagger-ui-bundle.js:65:31348)
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:65:31588
    at Array.reduce (native)
    at l (http://localhost:5000/v1/docs/swagger-ui-bundle.js:65:31420)
    at Object.p [as mergeInQueryOrForm] (http://localhost:5000/v1/docs/swagger-ui-bundle.js:66:404)
    at Object.fetch (http://localhost:5000/v1/docs/swagger-ui-bundle.js:66:575)
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:73:26827
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:36:3829
    at Object.authorizePassword (http://localhost:5000/v1/docs/swagger-ui-bundle.js:29:15463)
    at i (http://localhost:5000/v1/docs/swagger-ui-bundle.js:81:7834)

Just to clarify, this is when clicking on 'authorise'; pressing enter while on the form shows no error output on the console even though it also fails to work.

luispabon on 24 Apr 2017

I can see no error output however on FF developer edition 54a2.(doesn't work either though).

luispabon on 24 Apr 2017

This is on current master:

swagger-ui-bundle.js:68316 Uncaught TypeError: t.map is not a function
    at c (http://localhost:5000/v1/docs/swagger-ui-bundle.js:73:576)
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:73:816
    at Array.reduce (native)
    at l (http://localhost:5000/v1/docs/swagger-ui-bundle.js:73:648)
    at Object.p [as mergeInQueryOrForm] (http://localhost:5000/v1/docs/swagger-ui-bundle.js:73:1647)
    at Object.fetch (http://localhost:5000/v1/docs/swagger-ui-bundle.js:73:1818)
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:80:26216
    at http://localhost:5000/v1/docs/swagger-ui-bundle.js:42:3829
    at Object.authorizePassword (http://localhost:5000/v1/docs/swagger-ui-bundle.js:36:2349)
    at o (http://localhost:5000/v1/docs/swagger-ui-bundle.js:88:7740)

luispabon on 24 Apr 2017

@luispabon thanks for your comments, I am already looking into this error

bodnia on 24 Apr 2017

Thank you Anna, please let me know if I can help in any way.

luispabon on 24 Apr 2017

@luispabon the fix is in the latest master, please test

bodnia on 26 Apr 2017

@bodnia thank you, I'm doing it now

luispabon on 27 Apr 2017

@bodnia I can confirm this issue is now fixed, thanks for the hard work :+1:

luispabon on 27 Apr 2017

@luispabon thank you for the assistance in testing :)