swagger-api / swagger-api/swagger-ui
Add Bearer Token to Swagger-UI CURL requet
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
I'm using the Swagger-UI-dist NPM package to generate a swagger view in my Angular Application. However, I want to attach a custom bearer token to CURL requests in Swagger UI. I checked this thread as well, but still no luck.
component.html:
<div #swagger>
<div class="swagger-container"></div>
</div>
component.ts: Only contains the relevant logic
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from 'swagger-ui-dist';
import { SwaggerUiProperty } from './swagger-ui.model';
@Component({
selector: 'lib-adl-et-swagger-ui',
templateUrl: './adl-et-swagger-ui.component.html',
styles: []
})
export class AdlEtSwaggerUiComponent implements OnInit, AfterViewInit {
@ViewChild('swagger') container: ElementRef;
@Input() public SwaggerEndpointURL: string;
@Input() SwaggerUiProperty: SwaggerUiProperty;
ngAfterViewInit() {
const ui = SwaggerUIBundle({
url: this.SwaggerEndpointURL,
domNode: this.container.nativeElement.querySelector('.swagger-container'),
deepLinking: true,
presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
() => {
return {
components: {
Topbar: () => null,
Info: () => null
}
};
}
],
docExpansion: this.SwaggerUiProperty?.docExpansion,
jsonEditor: this.SwaggerUiProperty?.jsonEditor,
defaultModelRendering: this.SwaggerUiProperty?.defaultModelRendering,
showRequestHeaders: this.SwaggerUiProperty?.showRequestHeaders,
layout: this.SwaggerUiProperty?.layout,
showExtensions: this.SwaggerUiProperty?.showExtensions,
showCommonExtensions: this.SwaggerUiProperty?.showCommonExtensions,
sorter: this.SwaggerUiProperty?.sorter,
onComplete: function() {
// Default basic auth
ui.preauthorizeBasic("basicAuth", "username", "password");
// Default API key
ui.preauthorizeApiKey('Authorization', '');
},
"securityDefinitions": {
"Authorization": {
"type": "apiKey",
"description": "Filling bearer token here",
"name": "Bearer",
"in": "header"
}
}
});
}
}
Current UI:

The curl request in the image does not contain the bearer token.
Expected UI:
I want to include the bearer token in the CURL request as in the below image.

Swagger Format:
{
"openapi" : "3.0.1",
"info" : {
"title" : "token",
"version" : "v1"
},
"servers" : [ {
"url" : "https://localhost:8243/token/v1"
}, {
"url" : "http://localhost:8280/token/v1"
} ],
"security" : [ {
"default" : [ ]
} ],
"paths" : {
"/*" : {
"get" : {
"responses" : {
"200" : {
"description" : "OK"
}
},
"security" : [ {
"default" : [ ]
} ],
"x-auth-type" : "Application & Application User",
"x-throttling-tier" : "Unlimited"
},
"put" : {
"responses" : {
"200" : {
"description" : "OK"
}
},
"security" : [ {
"default" : [ ]
} ],
"x-auth-type" : "Application & Application User",
"x-throttling-tier" : "Unlimited"
},
"post" : {
"responses" : {
"200" : {
"description" : "OK"
}
},
"security" : [ {
"default" : [ ]
} ],
"x-auth-type" : "Application & Application User",
"x-throttling-tier" : "Unlimited"
},
"delete" : {
"responses" : {
"200" : {
"description" : "OK"
}
},
"security" : [ {
"default" : [ ]
} ],
"x-auth-type" : "Application & Application User",
"x-throttling-tier" : "Unlimited"
},
"patch" : {
"responses" : {
"200" : {
"description" : "OK"
}
},
"security" : [ {
"default" : [ ]
} ],
"x-auth-type" : "Application & Application User",
"x-throttling-tier" : "Unlimited"
}
}
},
"components" : {
"securitySchemes" : {
"default" : {
"type" : "oauth2",
"flows" : {
"implicit" : {
"authorizationUrl" : "https://localhost:8243/authorize",
"scopes" : { },
"x-scopes-bindings" : { }
}
}
}
}
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied component.ts SwaggerUIBundle configuration and compare its security settings with the OpenAPI document's components.securitySchemes and operation security entries. Reproduce the generated CURL request in Swagger UI and trace how the configured authorization is represented; done means the generated request includes the expected bearer token.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, javascript
- Domain
- api, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100