Integrating an own component for ApiKeyAuth via Plugin API doesn't work

Q	A
Bug or feature request?	Bug (probably)
Which Swagger/OpenAPI version?	2.0
Which Swagger-UI version?	3.13.4
How did you install Swagger-UI?	via npm/webpack
Which browser & version?	Safari 11.1
Which operating system?	MacOS 10.13.4

In our project we use the plugin api to override several components, such as InfoUrl and InfoBasePath which works like expected. If we try the same for the component ApiKeyAuth it doesn’t have any impact to our UI, even if we cancel it out completely:

export const ApiKeyAuthPlugin = () => {
	return {
		components: {
			ApiKeyAuth: () => null
		}
	}
}

Demonstration API definition

"security": [
	{
		"api_key": []
	}
],
"securityDefinitions": {
	"api_key": {
		"in": "header",
		"name": "x-api-key",
		"type": "apiKey",
	}
},

Expected Behavior

With the above described plugin, the component should be cleared out which should result in an empty modal in our UI.

Current Behavior

Nothing happens. The UI looks like without a plugin at all.

Context

We need to set a default apiKey for our tryout requests from swagger-ui. So the users can decide whether they want to use the default one or their own. Therefore, we want to display the apiKey as a default in the authorization modal. Additionally this apiKey should even be set as default before the user clicks authorize. As this is not possible with the current swagger-ui, we want to create our own plugin to overwrite the apiKeyAuth component.

[shockey]

Hi @ChristophWalter!

If we try the same for the component ApiKeyAuth it doesn’t have any impact to our UI, even if we cancel it out completely:

Try using apiKeyAuth instead of ApiKeyAuth 😄 component names are case-sensitive, and not 100% consistent across the project…

To quote myself in #4431:

For context: #3393 is open, to make component names case-insensitive. There was a PR for the issue (#3419), which stored all components internally as lower-case, and then downcased all component lookups - but the contributor withdrew the code 😢

For future reference, you can use the getComponents method to see an object with every component’s name as a key, though in a perfect world you wouldn’t have to care about the case.

---

Don’t know how to access values within the swaggerfile during initialization, yet.

You can do this from within an onComplete, like so:

const ui = SwaggerUI({
  url: "http://petstore.swagger.io/v2/swagger.json",
  onComplete: () => {
    const spec = ui.specSelectors.specJson() // this is an Immutable.js Map
    const tokenValue = spec.getIn(["securityDefinitions", "MyAuth", "x-default"])

    ui.preauthorizeApiKey("MyAuth", tokenValue)
  }
})

[shockey]

@ChristophWalter no problem! Immutable has a very powerful API, for this particular thing you can use ui.specSelectors.specJson().getIn(["a", "deep", "path"]) to grab a value deeply within your data. Or you could always use ui.specSelectors.specJson().toJS() if you want a plain JS object 😄