How to authenticate with OAuth2

[kopax]

Q	A
Bug or feature request?	Help
Which Swagger/OpenAPI version?	2.0
Which Swagger-UI version?	latest
How did you install Swagger-UI?	npm install swagger-ui-dist --save
Which browser & version?	chrome Version 61.0.3163.79 (Official Build) (64-bit)
Which operating system?	Debian 8

I have a springboot backend secured with spring-security and spring-security-oauth2 I have springfox installed. I am using the code grant flow specified in RFC6749.

My OAuth2 client is autoapproving so there is no redirection form to validate for the user.

I have a reactjs app as a client and I want to install swagger-ui on it.

I successfully managed to display the swagger-ui. The documentation says :

You can configure OAuth2 authorization by calling initOAuth method with passed configs under the instance of SwaggerUIBundle default client_id and client_secret, realm, an application name appName, scopeSeparator, additionalQueryStringParams, useBasicAuthenticationWithAccessCodeGrant.

The OAuth2 configuration explained in the documentation does not trigger any request to authenticate.

This is how my react page look like :

import React from 'react';
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
import 'swagger-ui-dist/swagger-ui.css';
import { oAuthClient } from "../../../config/index";
export default class SwaggerUIPage extends React.PureComponent {
  state = {
    ui: null,
  }
  componentDidMount() {
    this.initializeUi();
  }
  initializeUi() {
    const { redirectUri } = oAuthClient;
    const ui = SwaggerUIBundle({
      url: `http://localhost:8080/v2/api-docs`,
      dom_id: '#swagger-ui',
      oauth2RedirectUrl: 'http://localhost:8080/redirect/cb',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl,
        SwaggerUIBundle.plugins.AuthActions, // <-- Iam trying to add plugins in order to enable OAuth2 authentication
        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);
    // Method can be called in any place after calling constructor SwaggerUIBundle
    const oauth = this.state.ui.initOAuth({
      clientId,
      clientSecret,
      realm: 'api',
      tokenUrl: 'http://localhost:8080/oauth/token',
      oauth2RedirectUrl: 'http://localhost:8080/redirect/cb',
      appName: 'reactapp',
      scopeSeparator: ' ',
      additionalQueryStringParams: { test: 'please help me login' },
      useBasicAuthenticationWithAccessCodeGrant: true,
      ...oAuthClient,
    });
    // console.log(window.opener.swaggerUIRedirectOauth2);
    // oauth2.callback({auth: oauth2.auth, token: json, isValid: true}) // <-- I have found that in the distributed oauth2 page html in the dist package, I have tried to called `oauth2.callback` myself but I can't get `window.opener.swaggerUIRedirectOauth2`
  }
  render = () => <div id="swagger-ui"/>
}

Expected Behavior

I expect the OAuth configuration to be fulfilled

Current Behavior

I have 401 Unauthorized when I test a secured endpoint and I don't see the swagger-ui trying to request my OAuth security endpoints.

Possible Solution

No idea.

Context

1. How do you authenticate swagger-ui ?
2. I can see sources that concern redux (login action/reducer) even If I don't see anywhere in the documentation where it says how to use it. Is there anything I a missing? Could you maybe share a more detailled example?

[kopax]

I am still trying to solve this issue, our springfox manual is non operational :(

[shockey]

Hi @kopax!

The window.opener and oauth2.callback helpers are only available on the page that Swagger-UI opens to capture the OAuth2 redirect, not the page it's running on 😄

We're planning to build out an interface for setting authorization values in the next week or so, see #2915 for details. There's also some workarounds listed there, if you can't wait 😄 the ui.getStore.dispatch and requestInterceptor examples look good to me.

[shockey]

Closing due to inactivity.

This is simply to keep our issue tracker clean - feel free to comment if there are any further thoughts or concerns, and we'll be happy to reopen this issue.

[kopax]

Hi, @shockey I haven't solved the installation. How do I setup the authorization code grant ?

[shockey]

Hi @kopax, sorry for letting this slip away.

Calling initOAuth only provides data to Swagger-UI. In order to actually use the OAuth2 authorization for your API operations, you need to define a security scheme and add a security requirement to your API definition. More on that here: https://swagger.io/docs/specification/authentication/oauth2/

Once you've done that, you can enable the authorization by clicking the green Authorize button in Swagger-UI once you've loaded it.

Hopefully this helps - if you're already doing all of this, let me know and we'll get to the bottom of what's going on.

[kopax]

@shockey thanks for the link, effecitvely I haven't done that. I have installed the jar from a maven repository in a spring boot application. I dont' have any of thoose files, where should I find them in order to complete the setup ?

[shockey]

I dont' have any of thoose files, where should I find them in order to complete the setup ?

Not sure what you're referring to, can you clarify? The security scheme and requirement is something you'd add to your swagger.json/openapi.json.

[shockey]

Closing due to inactivity.

This is simply to keep our issue tracker clean - feel free to comment if there are any further thoughts or concerns, and we'll be happy to reopen this issue.

[kopax]

@shockey sorry I was unsuccessful configuring swagger-ui with my spring-security-oauth2.
We had to put the topic on side, we will try to provide further investigation and maybe we will ask for more detailed information: Thanks a lot for trying to help!

[shockey]

@kopax, sounds good, sorry you weren't able to get it working!

when/if you pick the task back up, feel free to bump this issue or open a new one.