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
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:
<script>tags to load jQuery, hello.js and my own
hello-ynab.jsscript (described below)
Authwhich encapsulates a handful of hello.js methods
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
hello.js and so should be a fully working demo app. To run it locally, you’ll need to do the following:
dashboard.htmlwith this client ID
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:
Content © 2023 Richard Cook. All rights reserved.