Loopback-next: [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 https://github.com/strongloop/loopback-next/issues/1035#issuecomment-438387429

Acceptance Criteria

• [x] Investigate whether swagger ui support token based authentication
• [x] and what changes/workaround needed in order to make it work
• [x] 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
• https://github.com/swagger-api/swagger-ui/issues/818#issuecomment-113185459
• https://swagger.io/docs/specification/authentication/bearer-authentication/
• https://github.com/swagger-api/swagger-ui/issues/5004

[hacksparrow]

Conclusion: Swagger UI provides UI for setting the token, we don't have to create additional UI. Links to example and discussion - https://github.com/strongloop/loopback-next/pull/2210#issuecomment-451866876.

[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 https://github.com/strongloop/loopback-next/pull/2210#issuecomment-451866876.

[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? https://github.com/strongloop/loopback4-example-shopping/pull/267

[jannyHou]

Follow-up story created:

• Create a formal PR to add this feature in explorer: https://github.com/strongloop/loopback-next/issues/3740
• Contribute the security spec from auth strategy and merge it into the OpenAPI spec: https://github.com/strongloop/loopback-next/issues/3669

[jannyHou]

Closed. See spike https://github.com/strongloop/loopback4-example-shopping/pull/267