YNAB API Starter Kit: How to use OAuth for localhost

Is there a way to update the files and test the OAuth when using http://localhost:8081?

Currently, I have to push the updates to Github and test the login using the github link.  I noticed that when creating a new OAuth application, there is this comment about Returning URI(s):

Use urn:ietf:wg:oauth:2.0:oob for local tests

I tried to use that in config.json but it won't continue to the listing of budgets. Any tips on how to rely on npm start for development and not always do npm run build then push to repository?

Maybe I can hard code the token in the code too? So that I won't have to see the Authorize button every time. Sorry, I'm not that familiar with Webpack and Vue.js so just relying on trial and error.

8replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • I don't quite follow everything you're asking about, but try ngrok for your 8080 problem. 

    Reply Like
      • Alfred
      • firnnauriel
      • 10 mths ago
      • Reported - view

      alexdresko  Thanks, using ngrok is a good suggestion. But aside from that, are there any alternatives? 

      I'm thinking if I should just change some parts of the codes to use Personal Access Token instead of OAuth just to make the demo site automatically logs in after doing npm start. 

      Reply Like
  • Hey Alfred,

    Over at Beyond Rule 4 I ended up using https://tolocalhost.com/ which solves this quite nicely.

    Make sure that if you do go this route that you're not leaving that site as a valid Redirect URI for your live OAuth application. I ended up making two separate OAuth applications; one for dev that only had https://tolocalhost.com/ as a valid redirect, and then the prod version only has the live website. 

    Reply Like
  • Hey, Alfred  I think ngrok might be the solution here.

    First, I believe a redirectUri of `urn:ietf:wg:oauth:2.0:oob` just causes the response be rendered in your browser for visual inspection. (At least I saw JSON in the browser when I tested it.) It doesn't redirect to localhost.

    For security reasons, YNAB requires your OAuth Redirect URI(s) to use HTTPS (as opposed to HTTP), so won't work for redirectUri.

    I wasn't able to get the starter kit listening on, despite futzing around with webpack-dev-server's `https: true` option. Full disclosure: I'm a total node noob so there may be an easy way to get it working. That would be ideal b/c then you wouldn't have to mess with ngrok.

    Install ngrok, get the starter kit running, then start ngrok with: `ngrok http 8081`. From the output, copy the Forwarding address that uses HTTPS. In the starter kit's `src/config.json`, set the `redirectUri` to that ngrok address.

    Then go to your developer settings page on YNAB, find your oauth application in the list and click "View". In the bottom right corner click "Edit". Add a new  Redirect URI (under `urn:ietf:wg:oauth:2.0:oob`) for the ngrok address.

    Restart your starter kit server then browse to your https ngrok address and go through the OAuth flow. It all worked for me and brought me back to the "Select A Budget" screen.

    Let us know how it goes.

    Reply Like
  • Just wanted to drop by and let you know that insecure local URLs are now live. Asked them on Twitter and it was live soon after: https://twitter.com/ynab/status/1103766868790308869

    That means that you can use http://localhost:8081 as a valid redirect URL.

    Reply Like
      • Alfred
      • firnnauriel
      • 7 mths ago
      • 1
      • Reported - view

      Mark Jan Kordon  I  finally had the time to work on this again and I just tested it now using the ynab 1.12.0 npm module, it is working perfectly! Great job YNAB team!

      Reply Like 1
  • any chance you can help me I cant seem to get localhost to connect after authorizing.  I dont want to keep building to see changes in my app. 

    Reply Like
      • Alfred
      • firnnauriel
      • 4 mths ago
      • Reported - view

      Sky Blue Commander have you added localhost in your OAuth Application settings? Here's a sample:


      Reply Like
Like Follow
  • 4 mths agoLast active
  • 8Replies
  • 177Views
  • 5 Following