[Video tutorial] Adding Sign in with Twitter to your Crystal web app

Hi folks, I just published a tutorial on how to add the Sign in with Twitter functionality to a Crystal web app.


The inspiration for the tutorial came from a shard I wrote a while ago to simplify the 3-legged OAuth1.0a method. You can read more about that on Twitter’s official guide.

The code shown in the presentation - a Kemal web app with a Vue.js front end - is available on github, and you can find the slides here.

While preparing this tutorial, I noticed that it’s hard to find standard practices around the management of third-party OAuth tokens. There also seems to be a lot of variability in the way developers share authentication secrets with the user, once an access token has been obtained.

With this in mind, I hope this topic can be an opportunity to share your experiences with sign in with X integrations :popcorn:

10 Likes

Are you thinking to do one for tumblr?

Hey @carcinocron, I hadn’t thought of that, but after a quick look to the Tumblr docs it looks like most of the code in twitter_auth should be reusable - except for some Tumblr quirks that seem manageable.

Let me have a closer look and come back to you :male_detective:

1 Like

Dear @carcinocron, what a journey this was :bullettrain_front:

TL;DR

You’ll find a working Sign in with Tumblr example here.

oauth_flow

More details

Turns our there is a slight difference between Twitter and Tumblr in the way they expect you to sign the access token request.

Twitter expects a signature based on the consumer secret only, whereas Tumblr expects one based on both the consumer secret and the request token secret - AKA the resource owner secret.

Anyhow, I extracted the common functionality in a shard called simple_oauth - I’ll update twitter_auth to depend on that, too.

Finally, a note that this new shard’s capabilities are already part of the Crystal Standard Library.

I see only a couple of reasons to prefer simple_oauth to the standard library module:

  1. It’s easier to understand and update - by means of being much smaller
  2. it makes it easy to swap the HTTP client used in the calls to the OAuth provider.
2 Likes