Skip to content

feat: OAuth2 Login with Refresh #1125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: OAuth2 Login with Refresh #1125

wants to merge 5 commits into from

Conversation

engenb
Copy link

@engenb engenb commented Jan 21, 2020

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.
image
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"
image
image

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
Copy link

CLAassistant commented Sep 23, 2020

CLA assistant check
All committers have signed the CLA.

@dantman
Copy link

dantman commented Sep 24, 2020

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
Copy link

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 engenb changed the title react-oauth (POC) feat: OAuth2 Login with Refresh Feb 23, 2021
@engenb
Copy link
Author

engenb commented Feb 23, 2021

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
Copy link

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. :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants