can you update the documentation to describe how to set up basic auth with the options object

[rubenabergel]

They are no documentation to help set up basic auth with the options object. Is it even possible?
here is what I have:

const express = require('express');
const router = express.Router();
const swaggerUi = require('swagger-ui-express');
const dashboardDocument = require('../dashboardAPI.json');
`const express = require('express');
const router = express.Router();
const swaggerUi = require('swagger-ui-express');
const dashboardDocument = require('../dashboardAPI.json');

var options = {
swaggerOptions: {
authAction: {
Basic: {
name: "user1",
schema: {
type:"application/json",
in: "header",
name: "Authorization",
},
value: "Basic bG9naW46cGFzc3dvcmQ="
}
}
}
}

router.use("/", swaggerUi.serve);
router.get("/", swaggerUi.setup(dashboardDocument, options));

module.exports = router;
`

[scottie1984]

Here is an example I found of how to set-up Basic Auth. If you pass onComplete function into the swaggerOptions it should work.

swagger-api/swagger-ui#2915 (comment)

[rubenabergel]

Thank you @scottie1984. However, I am not looking to pre-authorize it. I want just want to set up the login/password and then hide some parts of the documentation to users who do not have them. Any insight would be greatly appreciated :) thank you!

[scottie1984]

Oh, I don't think that is possible with Swagger UI. My understanding is that the authentication is for authenticating to the endpoint, not showing or hiding the document.

[rubenabergel]

@scottie1984 check this out, this person is definitely doing it: http://recordit.co/WY6tsdIJnN

[scottie1984]

This is using a custom swagger plugin as detailed here swagger-api/swagger-ui#4326 (comment).

With swagger-ui-express this would look like:

const HideOperationsUntilAuthorized = function() {
    return {
      wrapComponents: {
        operation: (Ori, system) => (props) => {
          const isOperationSecured = !!props.operation.get("security").size
          const isOperationAuthorized = props.operation.get("isAuthorized")
          
          if(!isOperationSecured || isOperationAuthorized) {
            return system.React.createElement(Ori, props)
          }
          return null
        }
      }
    }
  }

var options = {
  swaggerOptions: {
      plugins: [
           HideOperationsUntilAuthorized
      ]
   }
};

Problem will be due to the way the swaggerOptions are overwritten you will lose the default SwaggerUIBundle.plugins.DownloadUrl plugin. I would need to update the module to allow plugins to be appended rather than overwritten.

[rubenabergel]

Hey @scottie1984, thank you very much, I am almost there. The only thing I am missing now is how do I set up the correct login/password?

[scottie1984]

What do you mean? Do you mean the user name and password for the basic auth to your API? If that is the case then you will need to do that in your Express app using something like https://www.npmjs.com/package/express-basic-auth

If you mean checking that the user enters the correct username and password into Swagger, then you will need to extend the plugin to authorise with your API before setting the state (however this would be superficial as the browser will already have the full API document and will be able to see the endpoints)

[proton1k]

Hi, so anyone has a basic auth flow implemented and can share this in a single post or there is already a documentation somewhere I am missing?