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.
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
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 http://127.0.0.1:8081 won't work for redirectUri.
I wasn't able to get the starter kit listening on https://127.0.0.1:8081, 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