Page display mode in hello.js and YNAB

2018-07-02

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:

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:

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: HTML, JavaScript, hello.js, OAuth, YNAB

All content © 2018 Richard Cook. All rights reserved.