redirect-uri wrong when using OAuth2 Authorization Code

Q&A

• OS: Ubuntu Linux 22.04.1
• Browser: Chrome
• Version: Version 122.0.6261.111 (Official Build) (64-bit)
• Method of installation: dist assets
• Swagger-UI version: 5.11.10
• Swagger/OpenAPI version: Swagger 2.0, OpenAPI 3.0.1

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.0.1
info:
  title: broken-redirect-uri
  version: "1.0"
paths:
  /api/users:
    get:
      operationId: getAllUsers
      responses:
        "200":
          description: getAllUsers 200 response
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'
      security:
      - openid:
        - openid
    post:
      operationId: createUser
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/User'
        required: true
      responses:
        "200":
          description: createUser 200 response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
      security:
      - openid:
        - openid
  /api/users/{id}:
    get:
      operationId: getUserById
      parameters:
      - name: id
        in: path
        required: true
        schema:
          type: integer
          format: int64
      responses:
        "200":
          description: getUserById 200 response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
      security:
      - openid:
        - openid
    put:
      operationId: updateUser
      parameters:
      - name: id
        in: path
        required: true
        schema:
          type: integer
          format: int64
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/User'
        required: true
      responses:
        "200":
          description: updateUser 200 response
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
      security:
      - openid:
        - openid
    delete:
      operationId: deleteUser
      parameters:
      - name: id
        in: path
        required: true
        schema:
          type: integer
          format: int64
      responses:
        "200":
          description: deleteUser 200 response
      security:
      - openid:
        - openid
components:
  schemas:
    User:
      required:
      - email
      - name
      type: object
      properties:
        id:
          type: integer
          format: int64
          nullable: true
        name:
          minLength: 1
          type: string
        email:
          minLength: 1
          type: string
  securitySchemes:
    openid:
      type: oauth2
      flows:
        authorizationCode:
          authorizationUrl: http://localhost:9000/oauth2/authorize
          tokenUrl: http://localhost:9000/oauth2/token
          refreshUrl: ""
          scopes:
            openid: OpenID role

Swagger-UI configuration options:

SwaggerUI({
  url: "/api/swagger/v3/swagger.json",

  oauth2: {
    clientId: "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa",
    clientSecret: "bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb",
    scopes: ["openid"],

    useBasicAuthenticationWithAccessCodeGrant: true,
  }
});

Describe the bug you're encountering

When I clicked the Authorize button, the browser tried to redirect to http://localhost:8080/api/oauth2-redirect.html
instead of http://localhost:8080/api/swagger-ui/oauth2-redirect.html.

The Swagger pages index.html and oauth2-redirect.html are placed in the META-INF/swagger/views/swagger-ui directory.

The solution I found was to add "/" to the end of the URL because Swagger UI needs it, but it depends on the user to do so.

See that the SwaggerUI function in the swagger-ui-bundle.js source code, the substring function looks for the last "/", and this removes swagger-ui.

Theoretically, a URL doesn't necessarily need to end with "/", but SwaggerUI requires it.

To reproduce...

Steps to reproduce the behavior:

1. Go to 'http://localhost:8080/api/swagger-ui' (without ending '/')
2. Click on 'Authorize'
3. 'Available authorizations' popup opens with clientId, clientSecret and scopes filled.
4. Click on 'Authorize'
5. See error 'HTTP Status 400 – Bad Request'

Expected behavior

Redirected to http://localhost:8080/api/swagger-ui/oauth2-redirect.html

Show another 'Available authorizations' with 'Authorized' message

Screenshots

Go to URL without ending '/'

Click on 'Authorize'

Response

Additional context or thoughts

Currently, I have to remember to go to http://localhost:8080/api/swagger-ui/ (with ending '/')

Start by reproducing the issue at /api/swagger-ui without a trailing slash, then inspect the SwaggerUI function in swagger-ui-bundle.js, especially the substring logic shown in the report. Confirm that OAuth2 authorization redirects to /api/swagger-ui/oauth2-redirect.html rather than /api/oauth2-redirect.html, and verify the existing trailing-slash behavior remains correct.