OAuth Simplified

simov

simo

Posted on December 10, 2018

OAuth Simplified

We often need to implement some sort of login functionality in our web apps, or authorize our app to access the user's data programmatically.

Historically this was done by using the user's password directly for authorization. Unfortunately this leads to alot of problems, so a delegated authorization framework was invented, called OAuth.

Two versions of OAuth are available: OAuth 1.0a and OAuth 2.0, the latter being the most widely used today. Both OAuth 1.0a and the so called server side flow (Authorization Code Grant) of OAuth 2.0 require a server app, and involve multiple steps to improve security.

This makes these two types of authorization flows a bit more complicated to implement, so naturally, we look for third-party modules ready to drop in and get going.

Login

A few years ago I was using Passport to implement login functionality using OAuth in my NodeJS app. The problem was, however, that Passport was never built around the idea of having multiple login providers in a single app. While totally possible it required separate module for every provider, developed by a different person.

On top of that Passport makes one additional request after the OAuth flow to get a more detailed profile of the user. Unfortunately that's not part of the specification, and over time it become an obstacle, because I always needed something slightly different.

I ended up with fair amount of glue code in my app, just for a handful of login providers. And to make matters worse - now I had to write tests for it.

So I asked myself:

Is it possible to create something dramatically simpler?

You see, it doesn't matter if something already exists:

You can innovate always!

You can always take already existing solution and create a better one, a simpler one, unique in its own way.

Meet Grant!

Goals

Grant was built around very narrow and extreme use case:

Support for unlimited number of OAuth providers, without the need of any glue code.

As we all know good configuration data structure is the backbone of every great app. At its core Grant is exactly that:

A simple, yet powerful configuration data structure.

Having all aspects of the module defined as JSON, opens up the doors for all kinds of interesting use cases:

  • static configuration per environment
  • nested static sub configurations per provider
  • dynamic configuration per authorization attempt

In fact, the configuration is not even required, it can be passed dynamically via GET or POST request:

Making Grant a completely transparent OAuth proxy.

Meaning that you can deploy it somewhere on your stack and access it from any other server and programming language.

How

First we need to register an OAuth app for every provider that we want to login with. For example, we have to register OAuth 2.0 client app for Google, and OAuth 1.0a client app for Twitter. The redirect URL of our OAuth apps should always end with /connect/[provider]/callback:

http://localhost:3000/connect/google/callback
http://localhost:3000/connect/twitter/callback
Enter fullscreen mode Exit fullscreen mode

Then we need a configuration file where we can put our OAuth app credentials along with a few other options:

{
  "defaults": {"origin": "http://localhost:3000", "callback": "/hello", "state": true},
  "google": {"key": "...", "secret": "...", "scope": ["openid"], "nonce": true},
  "twitter": {"key": "...", "secret": "..."}
}
Enter fullscreen mode Exit fullscreen mode

Lastly, our server may look like this:

var express = require('express')
var session = require('express-session')
var grant = require('grant-express')

express()
  .use(session({secret: 'dev.to'}))
  .use(grant(require('./config.json')))
  .use('/hello', (req, res) => res.end(JSON.stringify(req.query, null, 2)))
  .listen(3000)
Enter fullscreen mode Exit fullscreen mode

This will allow us to login with Google and Twitter by navigating to the following URLs in our browser:

http://localhost:3000/connect/google
http://localhost:3000/connect/twitter
Enter fullscreen mode Exit fullscreen mode

Conclusion

OAuth has never been easier!

And to prove that Grant comes with support for 180+ login providers, but any other provider conforming to the OAuth spec should work out of the box.

Grant was also developed along with an example app showcasing the design goals behind it, and its real potential. As you can imagine this app consists of almost no code on the server, and only a JSON configuration.

Lastly, the official documentation of the module is a great source of information where I try to cover diverse set of features and use cases.

Happy Coding!

💖 💪 🙅 🚩
simov
simo

Posted on December 10, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Dead Simple OAuth
oauth Dead Simple OAuth

August 18, 2020

OAuth Like a BOSS
oauth OAuth Like a BOSS

January 7, 2019

OAuth Simplified
oauth OAuth Simplified

December 10, 2018