Can "Login with Patreon" be implemented serverlessly?

Hi folks – hope I have an easy question, but can’t seem to find a specific answer searching around so far. Just looking to understand at a high level if I need to have some sort of backend or server to be able to implement a login with Patreon style button on a static website?

Currently my site is hosted via GitHub pages, and is just Javascript/HTML/CSS. No backend or server, or databases to speak of. Is it possible to rely on the Patreon API for authentication, and then store a session token locally on the user’s device to keep them logged in?

Or would I need to add something like AWS Lambda to help with the authentication with Patreon’s APIs?

Thanks so much!

More context:

Was planning on creating a Log In Button via the docs: API Reference

And then having it store the token as a local cookie on the user’s device to keep them logged in. In theory I just have an API call (XMLHttpRequest or Fetch) to the Patreon API that is triggered when a user clicks on the button, and then async/await the response from the Patreon API. Once the response is received, store the token received as in localStorage and done.

But before embarking on this, wanted to check that I’m not missing a step here. Again, greatly appreciate any and all help for how to go about this!

You could technically do it by using JS, however the session would last as much as the browser session or the lifetime of the token that you may save client-side. Also may be unsafe depending on circumstances.

Not really worried about being unsafe, all I’m hoping to do is not show advertising to anyone who is logged in and verified as a supporter on Patreon.

And when the client side localStorage token expires I can reverify that they’re still a Patreon subscriber to continue showing ads. Perhaps have it last two weeks or something, there will be some overlap if someone unsubscribes, but not a huge concern of mine either at this point.

Thanks for letting me know it is at least feasible all within the JS page!

You could have them login via the browser through JS, check whether they have a valid token, and then drop a short-lived cookie that will tell your site that the user is a patron. You wouldnt even need to save the token at user side or your side. Actually, even the token is not needed - when the user returns to your redirect uri from oAuth with the authorization code in the code= parameter, you can conclude that this is a valid patron and immediately drop a ‘no-ads’ cookie.

I think the main issue is not the local storage cookie.
Patreon OAuth APIs rely on a callback mechanism - After your user has been authenticated, Patreon APIs invoke the callback URL you’re supposed to provide. Your app is to wait at that URL to receive the Patreon token and process it to retrieve user data.
The question is: what is that URL?
Your static website has some URL, yes, You can have some javascript sitting there waiting, yes.
The question is: how do you know how to pair the (asynchronous) request you sent to APIs some minutes ago, with a response coming from Patreon some minutes later?
In other words, you need to maintain a JavaScript session on your static site to do several asynchronous operations.
Perhaps you can generate some unique ID you pass as a parameter to the initial invocation of Patreon APIs, and then use it (if Patreon sends it back to you) to match the given request from the given response. That’s just some random thoughts…

1 Like

Yes, he can do that in the state var. The state war is sent back as it has been received. So if he sends a signed string in the state var, he can receive it back, check the signature and then process the request.