OAuth2 implicit flow not working

[kks010]

Hi,
I can't find sufficient information anywhere on the internet regarding a start-to-finish fully working example of OAuth2 using Swagger-UI. I have an OAuth2 server working and when I press the 'authenticate' button in Swagger-UI I'm redirected to the login page, I can log in, and then I am redirected back to Swagger-UI but with the URL now having an access_token value as a query param. My understanding of OAuth is that at this point the access_token should be sent with every subsequent request, but this is not happening. Is Swagger-UI even capable of this automatically? Can it parse the redirected URL and get the access_token and send it in future 'try it out' calls? Is this a manual step that a Swagger-UI user has to complete in order to bridge the gap? I'm sure if I copy and paste this access_token into an api_key security definition I could get it working, but then that amounts to two manual auth steps instead of just one...

Q&A (please complete the following information)
OS: Windows 10
Browser: Chrome
Swagger-UI version: Latest
OpenAPI version: 3.0.0

The codebase for reference:

app.use(
    koaSwagger({
      routePrefix: '/docs',
      swaggerOptions: {
        oauth2RedirectUrl:
          host === 'localhost:8080'
            ? `http://${host}/docs`
            : `https://${host}/docs`,
        deepLinking: true,
        spec: swagger,
      },
    }),
  );


Swagger Code:

const {
  swagger: { host },
} = require('config');
const {
  dip: { url },
} = require('config');

module.exports = {
  openapi: '3.0.0',
  info: {
    title: '',
    description: 'API endpoints with request and responses',
    version: '1.0.0',
  },
  servers: [
    {
      url: host === 'localhost:8080' ? `http://${host}` : `https://${host}`,
      variables: {},
    },
  ],
  security: [
    {
      oAuth2Implicit: [
        'openid',
        'profile',
        'email',
      ],
    },
  ],
  paths: {
    '/products': {
      get: {
        tags: ['Products'],
        summary: 'get all products',
        description: 'Get all products',
        operationId: 'GetAllProducts',
        security: [],
        parameters: [],
        responses: {
          200: {
            description: 'Successful',
          },
          404: {
            description: 'Products not found',
          },
          500: {
            description: 'Internal server error',
          },
        },
        deprecated: false,
      },
    },
    '/productsForAdmin': {
      get: {
        tags: ['Products'],
        summary: 'get all products for admin',
        description: 'Get all products for admin',
        operationId: 'GetAllProductsForAdmin',
        security: [
          {
            oAuth2Implicit: [
              'openid',
              'profile',
              'email',
            ],
          },
        ],
        parameters: [],
        responses: {
          200: {
            description: 'Successful',
          },
          404: {
            description: 'Products not found',
          },
          500: {
            description: 'Internal server error',
          },
        },
        deprecated: false,
      },
    },
  },

  components: {
    securitySchemes: {
      oAuth2Implicit: {
        type: 'oauth2',
        flows: {
          implicit: {
            authorizationUrl: `https://${url}/authorize?audience=https://api.xxxxx.xxx.com`,
            tokenUrl: `https://${url}/oauth/token`,
            response_type: 'token',
            scopes: {
              openid: '',
              profile: '',
              email: '',
            },
          },
        },
      },
    },
    schemas: {
      AuthLoginRequest: {
        title: 'AuthLoginRequest',
        type: 'object',
        properties: {
          email: {
            type: 'string',
          },
          password: {
            type: 'string',
          },
        },
      },
      AuthLoginResponse: {
        title: 'AuthLoginResponse',
        type: 'object',
        properties: {
          authToken: {
            type: 'string',
          },
          id: {
            type: 'string',
          },
        },
      },
    },
  },
};

[lephuongbg]

You would need to serve the oauth2-redirect.html page from the dist package at /docs/oauth2-redirect.html, given that your docs is served at /docs and remove the oauth2RedirectUrl override. Check if your koaSwagger has already done that for you.

The code in oauth2-redirect.html is in charge of parsing the accessToken in the url. To be honest, this code should be put in the same page that renders the docs to make embedding swagger easier.