feat: OAuth2 Login with Refresh

[engenb]

Hello,

Disclaimer: my react/redux experience is limited, so this may need some iteration/refinement - I'm ok with that!

I'm using GraphQL in a project and wanted to utilize this excellent tool. I find it's always handy to have an api query interface like this in deployed environments, as I prefer inspecting data via the api over messing around in the database directly. However, if I'm running GraphQL Playground in deployed environments, I have requirements to secure it. I whipped up an approach to include an OAuth feature and thought I'd contribute it back for your consideration.

If oauth settings are provided, a UserManager component is rendered next to the current Settings component. It renders as "Sign In" or "Sign Out" depending on the current authenticated state of the user. Clicking this button launches an implicit login flow in a new window, using the IdentityModel project's oidc-client.js. If the user is already logged in with their identity provider, the window immediately closes itself. It should be possible to have this launch a new tab, which I would prefer over a new window, but I haven't explored this yet.

If login is successful, an authorization: Bearer {token} header is added and the UserManager renders as "Sign Out"

Once authenticated, the oidc-client starts a silent renew process that will repeat the implicit flow in a headless iframe to update the token a few seconds before it expires. This process results in the authorization header being updated as well.

This requires that the server hosting GraphQL Playground provide additional content to handle the oauth redirects. I have provided a very basic example of this via oauth2-redirect.html.

I've been using this for a few days now and so far, so good. I hope others out there find this useful!

[CLAassistant]

All committers have signed the CLA.

[dantman]

This looks like an interesting idea. I'm using Azure AD B2C which does seem to support OAuth 2 which seems like it could work well with this.

I am using graphql-playground through apollo-server(-express). So I'd be happy to test to to test out how this works with AAD B2C, but I don't know how I'd test this out where I'm uisng it.

[fmonorchio]

I need it. It's an usefull idea. For now I have a query on backend side that return the token with a password flow. When it can be merged into master? thanks

[engenb]

My fork has fallen behind master so there are some merge conflicts now. My day job keeps me pretty busy but I should have some time this weekend to get those resolved.

FWIW I can appreciate why they wouldn't want to include this into the project. While OAuth2 is a pretty common standard for web authentication, it opens the door to requests for other auth provider plugins. The team may see this as outside the scope of the project. At any rate, this PR is here as an example if anyone else needs a solution like this. I figured it more likely someone would find this here than at my personal fork.

[fmonorchio]

I think that an oauth/oidc flow is not outside of the project. security is a must have everywhere. other tool that I use like SwaggerUI have this feature configurable and ready to use. :-)