Add JWT authorization header in Swagger v3

[Humberd]

I'm looking for a solution to add a JWT authorization header to each request like they did in this thread

Their solution for Swagger v2:

function addApiKeyAuthorization() {
	var key = encodeURIComponent($('#input_apiKey')[0].value);
	if (key && key.trim() != "") {
		var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + key, "header");
		window.swaggerUi.api.clientAuthorizations.add("bearer", apiKeyAuth);
		log("added key " + key);
	}
}

[fernandocamargoai]

+1

[fernandocamargoai]

In my case, I've defined an API KEY Auth with an Authorization header. I've also created a basic JWT with no expiration time that will only work on development (the dev secret was used to sign it). If I click on the Authorize button and type "Bearer ", it works. But I'd like to simply have it pre-configured instead of having to type it everytime. Isn't it a simple javascript snippet that I can use to configure it?

[fernandocamargoai]

After quite some time spent trying to figure it out, I found a workaround to do what I wanted. Basically, right after the basic configuration (index.html), I added the following code:

ui.authActions.authorize({JWT: {name: "JWT", schema: {type: "apiKey", in: "header", name: "Authorization", description: ""}, value: "Bearer <JWT>"}})

This is how my security definition is:

securityDefinitions:
  JWT:
    description: ""
    type: "apiKey"
    name: "Authorization"
    in: "header"

[TuureKaunisto]

@fernandocamargoti Is the code you pasted here in a public repo? It would be super helpful to take a look at the full working code since I couldn't get the latest version Swagger UI to send the Authorization header in the project I'm working on even with the code you pasted.

[fernandocamargoai]

@TuureKaunisto, It's not in public repo :(

But was your issue with that code? Are you using the most recent Swagger UI 3?

I basically cloned the master branch of this repository, copied what was inside the dist folder and added that line of code right after the normal configuration in the index.html. That line basically sets the Authorization (exactly what would happen if the user would click in Authorize and fill in the fields).

[danmusk]

Based on what worked in v2, I made a similar "hack" for v3:

In startup.cs

app.UseSwaggerUI(c =>
{
    c.InjectOnCompleteJavaScript("../swagger-bearer-auth.js");
});

I placed the swagger-bearer-auth.js in wwwroot, with the following content:

(function () {
    $(function () {
        $('#auth_container').append("<input type='text' id='input_apiKey' />"); 
        $("#input_apiKey").change(addApiKeyAuthorization);
    });

    function addApiKeyAuthorization() {
        var key = encodeURIComponent($('#input_apiKey')[0].value);
        if (key && key.trim() != "") {
            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + key, "header");
            window.swaggerUi.api.clientAuthorizations.add("bearer", apiKeyAuth);
        }
    }
})();

[TuureKaunisto]

@fernandocamargoti thanks for your response. I did get it working now and the key gets set correctly. Thanks a lot for your help!

My problem was that the authorization header doesn't get sent or shown on the curl command although it does get set correctly. I guess there's a problem with my spec.

[owenconti]

I found with the definition below, all I had to do was prefix my key with "Bearer " or "JWT ", etc.

Defintion:

  "securityDefinitions":{
    "JWT": {
      "description": "",
      "type": "apiKey",
      "name": "Authorization",
      "in": "header"
    },

Header in the request:

It is entirely possible that I am missing something, so please let me know if I am off my rocker. Otherwise, @webron, what is the intended fix here?

[webron]

@owenconti it's a bit complicated, we can sync up on that.