My wife, Katy, is a big fan of YNAB and consequently we’ve started writing an app for it. I get to do all the fun parts like figuring out the authentication/authorization.

Plumbing in OAuth2 support has always been tricky (at least for little old me) and adding support for multiple OAuth providers has, in my experience, always led to a big splat of hideous glue code. Fortunately, I recently discovered hello.js which takes away much of the pain.

In the specific case of my application, I want to require the user to sign in on initial page load. I wanted to do this using the standard popup. However, this, of course, proves to be impossible in the presence of popup blockers (see my bug report and various StackOverflow discussions. Fortunately, there is the “page” display mode provided by the hello.login method which works pretty well. I’d like to share my simple demo app with you today.

My application consists of a landing page index.html:

All this does is provide a link to the “dashboard” which is defined in dashboard.html which is where the meat of the application lives:

The dashboard has the following things of note:

• Includes <script> tags to load jQuery, hello.js and my own hello-ynab.js script (described below)
• Defines a simple module Auth which encapsulates a handful of hello.js methods
• A “sign-out” button which is enabled when the user is signed in and which simply signs the user out and redirects back to index.html

Finally, I provide my own custom hello.js module to provide basic support for YNAB:

Once this module is fleshed out a little more, I hope to contribute it back to the hello.js project.

The code repository also includes copies of jquery.min.js and hello.js and so should be a fully working demo app. To run it locally, you’ll need to do the following:

• Clone the repository from https://gist.github.com/360f788a00f66194269d1efb42de3f80.git
• Obtain a YNAB client ID
• Replace REDACTED in dashboard.html with this client ID
• Run a simple web server in the repository’s directory, e.g. python -m SimpleHTTPServer 3000

Note that YNAB requires an HTTPS redirect URI, so you’ll probably end up having to set up an Nginx reverse proxy to slap some TLS on top of your simple web server. Here’s a simple Nginx configuration file demonstrating roughly how you might do this:

Enjoy!

Tags