[Spike] Token based authentication in API Explorer

[dhmlau]

Timebox to 5 days

Description / Steps to reproduce / Feature proposal

User experience

Go to API Explorer, login and set the token so that API Explorer can use the token for subsequent request.

Originated from #1035 (comment)

Acceptance Criteria

• Investigate whether swagger ui support token based authentication
• and what changes/workaround needed in order to make it work
• create a list of follow-up tasks (user stories) describing changes we need to make in order to make token based authentication work in our API Explorer

References

• https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.1.md#jwt-bearer-sample
• How to integrate with jwt based authentication? swagger-api/swagger-ui#818 (comment)
• https://swagger.io/docs/specification/authentication/bearer-authentication/
• Proper way to inject jwt into swagger 2 / swagger 3 doc via 'Try It Out'? swagger-api/swagger-ui#5004

[hacksparrow]

Conclusion: Swagger UI provides UI for setting the token, we don't have to create additional UI. Links to example and discussion - #2210 (comment).

[bajtos]

I disagree with closing this story. A spike it's done when there is a list of follow-up stories describing what needs to happen next.

In this particular case, we need user stories describing changes that we need to make to enable token-based authentication in API Explorer rendered for LB4 applications. Based on the discussion in #2210, I think we will need to describe security schemas in the OAI spec generated for our apps, but that's something to figure out as part of this spike.

[lygstate]

when this got to be fixed

[jotamora]

Hello,

Anybody can said to me if there is someone working in that? If there is someone working, anybody knows, more less, when can be ready?

Thanks.

[shendkardevesh]

hi @bajtos,
i tried to set headers by @param.header.string('token') token?: string in controller which gives me option to enter token for a api, which get's set in header.
which in ui gives me -

doing this is a correct way or we need something exactly same as in swagger-ui.

[nflaig]

Hi @shendkardevesh,

right now I also face the problem that the explorer is completely unusable for me because there is no option to set headers so I have to use Postman instead.

This looks like a good workaround but you would need to add @param.header.string('token') token?: string to every controller method which seems odd if you don't even use the token there.

Do you know if there is a way to just add this once somewhere and the input field shows up for every endpoint?

[hacksparrow]

@shendkardevesh @nflaig refer to #2210 (comment).

[nflaig]

@hacksparrow are there instructions on how to enable this for loopback 4 applications?

[hacksparrow]

@nflaig the link I pasted above is all we have for now. It is more of a Swagger UI thing. It would help to have our own instruction, though.

[frbuceta]

Hi, I want to work on this feature (yes i am able)

My idea is to add securityScheme when registering a@loopback/authentication strategy and add security to the endpoints when the decoratorexample --> @authenticate('BasicStrategy')is defined

Any idea how I can do?

[dhmlau]

@frbuceta, @jannyHou has created a PR on the result of the spike. Could you please take a look? loopbackio/loopback4-example-shopping#267

[jannyHou]

Follow-up story created:

• Create a formal PR to add this feature in explorer: Enable the authorize button from swagger-ui in the shopping example with tutorial #3740
• Contribute the security spec from auth strategy and merge it into the OpenAPI spec: propagate configured AuthenticationStrategy to OpenApiSpec #3669

[jannyHou]

Closed. See spike loopbackio/loopback4-example-shopping#267