OAuth Playground Source

[evancohen]

Hey @simov, have you open sourced the code for the OAuth playground?
Great project 🚀

[simov]

No, I haven't open sourced the showcase app yet. But with the amount of docs and examples here it shouldn't be that hard to figure out what I have on the server.

The first thing is to have configuration for each provider, but in this case I have only the provider's application key and secret set. The next important thing is to have a single final callback on your server for all providers, you can set it in server:{callback:'/handle_all'}. In that route you receive not only the response data from the OAuth flow, but the provider name as well under the provider key in the querystring or in the session.

The rest of the code is in the browser, I have a web form that makes POST request to the connect route using the Dynamic Override feature. The actual form fields come from yet another JSON configuration that I have compiled by reading each and every provider's developer docs.

[evancohen]

Most excellent! Thanks for the detailed response :)

[jlarmstrongiv]

@simov I’m currently learning grant. Are you considering open-sourcing the OAuth Playground? It’d be helpful to learn from 😄

[simov]

Maybe you can have a look at the articles listed in this thread #202, specifically this one https://dev.to/simov/oauth-like-a-boss-2m3b. It has an example of how to extract the access token from the callback URL.

Try this:

• add two login buttons on your page using two different providers
• setup Grant and your OAuth apps
• click on those login buttons, in the end you should be redirected back to your login page or some other route
• extract the access token

That's basically what the OAuth Playground app does.

Then you can start playing around with different things: maybe you want to add a little bit of logic in your server routes, or maybe you want to send some dynamic parameters from the browser to configure the login flow. How are you going to persist the user session? Are you going to use a cookie or localStorage, and so on.

Note that for all of those basic cases, at least on the server side, you can simply copy/paste an example from the examples folder, configure it and start using it. Separate example repositories are available for every cloud environment, you can find the links at the bottom of the Handlers section https://github.com/simov/grant#handlers