Swagger UI OAuth2 authorization code grant not working.

[kopax]

Before all thanks for making swagger free, the tool look very nice.

I have installed swagger-ui-dist and I have created the following page in my React application:

import React from 'react';
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
import 'swagger-ui-dist/swagger-ui.css';
// import 'swagger-ui-dist/oauth2-redirect.html';
import { oAuthClient } from "../../../config/index";
import messages from './messages';

export default class SwaggerUIPage extends React.PureComponent {

  state = {
    ui: null,
  }

  componentDidMount() {
    this.initializeUi();
  }

  initializeUi() {
    const { redirectUri } = oAuthClient;
    const ui = SwaggerUIBundle({
      url: `${redirectUri}/v2/api-docs`,
      dom_id: '#swagger-ui',
      oauth2RedirectUrl: redirectUri,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl,
        SwaggerUIBundle.plugins.AuthActions,
        SwaggerUIBundle.plugins.AuthIndex,
        SwaggerUIBundle.plugins.AuthReducers,
        SwaggerUIBundle.plugins.AuthSelectors,
        SwaggerUIBundle.plugins.AuthSpecWrapActions,
      ],
    });
    this.setState({ ui }, this.initializeOAuth);
  }

  initializeOAuth() {
    const { clientId, clientSecret, accessTokenUri, redirectUri } = oAuthClient;
    console.log(oAuthClient);
    console.log(SwaggerUIBundle.plugins)
    console.log(SwaggerUIBundle.presets)

    // Method can be called in any place after calling constructor SwaggerUIBundle
    const oauth = this.state.ui.initOAuth({
      clientId,
      clientSecret,
      realm: 'api',
      tokenUrl: accessTokenUri,
      oauth2RedirectUrl: redirectUri,
      redirectUri: 'http://localhost:8080/oauth/token',
      appName: 'backend-test',
      scopeSeparator: ' ',
      additionalQueryStringParams: { test: 'hello' },
      useBasicAuthenticationWithAccessCodeGrant: true,
      ...oAuthClient,
      scopeList: [],
    });
    console.log(oauth);
    // console.log(window.opener.swaggerUIRedirectOauth2);
    // oauth2.callback({auth: oauth2.auth, token: json, isValid: true});

  }



  render() {
    return (
      <div id="swagger-ui"/>
    );
  }

}

I've also tried to add the content of oauth2-redirect.html in my react scope.

Because I don't know what to do. I don't see any authentication request going anywhere, I don't find much in the documentation and I see a lot of written code for plugins.

I am using the authorization code grant flow, and I already have the jwt in my app, is there a way to quickly provide it to swagger client ?

[shockey]

Hey @kopax, you raised what looks like the same question in #3953, so I'm going to close this and get back to you in #3953.

Let me know if I read the two issues incorrectly. Thanks! 😄

[kopax]

@shockey this issue concerned my impossibility to complete the installation with OAuth2.
#3953 is an issue about Unit test failing for latest react and enzyme version. We can track both in #3953 for sure.

[shockey]

Closing in favor of #3953