Add YNAB OAuth

[DanielHaitink]

Add YNAB OAuth

[Huppie]

@1: I think a 'settings' panel makes sense. We could consider adding a link in the text that says something like 'or link this tool to your online YNAB instance' that opens the settings panel when clicked. Of course the 'regular' CSV flow should remain :-)

@2: Let's have a look what's available and works / looks nice, I agree we should just start with something simple and make it nicer once it works.

[PehrGit]

Hi Daniel,

I was chatting with https://github.com/Huppie and we would like to implement directly pushing the transactions to YNAB. Before we get started I'd like to check with you if you agree with our approach or have thoughts/suggestions.

1. First, though the name of the issue specifies oauth we would prefer to authenticate with a PAT. As you can read here https://api.youneedabudget.com/#outh-applications, if you use the client-side/implicit flow, which we would have to do as it's a client-side app, users will have to re-authorize every 2 hours. That would not benefit our goal which is to reduce the amount of manual actions/clicks. And also after 25 registrations there's a bunch of hoops to jump through.
   1.1 We will need to design a way to enter the PAT. Simple prompt using window.prompt()?
   1.2 We will need to store the PAT for future use, I guess local storage?

2. We will need some user input, any preference how we handle that in terms of UI?
   2.1 The app will need a way to determine which budget to use for each bank account.
   2.2 The app will need to match each bank account with the account in YNAB. The name in YNAB will not always match exactly the account number. At least they don't in my YNAB.
   2.3 I'd like to keep it as simple as possible. Perhaps we could display a simple table with the account in the first column and a column for budget and account with a dropdown with the possible values. Something like this:

Account number from CSV	Budget	Account
NL12RABO12345678	budget1 budget2 budget3	account1 account2 account3

Any thoughts on the above from you @DanielsWrath ?

[DanielHaitink]

Hey! I am glad that you two are willing to participate and implement this feature.

1. I think it can be a good idea to use the personal access tokens. I would still prefer the OAuth method, but for a smaller tool such as this one PAT would work okay.
   1.1 I am not a fan of window.prompt() though. It is just very ugly. I admit that YNABGoingDutch isn't a beauty, but I still prefer to stay away from those ugly looking web popups.
   Maybe something like a settings page/section (maybe something foldable, I'm no UI wizard) might be useful for the PAT? Or it could even be a button on the site, which is spawned when there is no PAT in local storage. After clicking it will slide down a text-field in which the PAT can be given. Not sure if that description is clear at all 😅. Can draw something later.
   Furthermore, I think it should be possible to still use the tool to download CSV files if you don't want to go through the hassle of creating a PAT (I think many people will find it difficult to do so, which makes sense as it is created for devs).
   1.2 Local storage is probably fine for that.
2. I guess there needs to be some kind of pop-up/overlay/section to choose the correct budget and account per account in the CSV. After selecting this, we can store the chosen account and budget in local storage, such that we don't need to ask the user to choose again. There should be some override though, as the user might have misclicked or changed their YNAB/account.
   As for 2.3, I think a simple picker like that should suffice for now. We can always make it fancier later, if needed.

Thanks for putting time into this. Appreciate it. Let me know what you think about my ideas. Totally fine if you disagree about certain things.

[Huppie]

I've been busy with some other stuff but did make some limited progress you can see in the link-ynab-pat branch on my fork.

I've added this sentence:

When you click it, a simple input form appears where you can input your PAT. If you provide a PAT and click 'load data' it does load your account data but dumps it in a console.log for now. The next step is to join the accounts found in the CSV to the accounts from YNAB. Not sure when I'll get to it though. If you feel like joining in on the fun, feel free to pull it in :-)

I also very rarely write 'plain JS' code (it's usually typescript), so it took some getting used to. Hope I'm following the right patterns there.

[DanielHaitink]

@Baklap4 Hi! Yes it would indeed be great. Sadly I have no time available ATM to work on this. Looks like the branch of @Huppie is stale. If you'd like to continue working on it, be my guest and fork his YNABGD code. I'd love to see this implemented in some way or another.

If you have some questions or need some help or advice, I'm of course available!

[Huppie]

@Baklap4 It's been some time, I remember it working partially (very basic implementation) in my repo. Will double check the status and get back to you tomorrow. That way I can at least tell you the parts that do and don't work. Does that work for you?

[DanielHaitink]

How are things going?

[DanielHaitink]

Nice, Ill take a loot at it and join in when I have some spare time.

There's no time limit 😉

[Baklap4]

@Huppie / @DanielsWrath how's this going? I'd love to see this happening! Need help with anything?

[Baklap4]

@Huppie that'd be great!

[Huppie]

@Baklap4 I had a quick glance. Looks like it's still very basic at this time. Pretty much in the state I left it since my last comment. It just proves the connection can be made to YNAB (all locally through JS) and lists the accounts in the console.

These accounts can be translated to an 'account selection / account link' table / screen as described in the process above by @PehrGit and @DanielsWrath

I don't have much time to work on this at this time, but feel free to tag me if you want some feedback. I can usually find some time to read through a PR.

[DanielHaitink]

So, I have been working on this. I have created some code in the ynab-pat branch of the repo. As of now, I am able to create new imported transactions. The code still needs some work and a lot of cleaning. After that, I also need to create an connection between the conversion script and the api script and I need to build some sort of UI to choose the budget/account (which should also be stored in the local storage).

However, the first connection is made and I think this feature will be added in the foreseeable future.

[DanielHaitink]

I have successfully connected YNABGoingDutch to YNAB using their API. The new features are present in the branch ynab-pat, which I will merge today with the master branch.

Please note that the functionality is still under development and that there might be issues or bugs. Hope this will make using ynab a lot easier for everyone using this tool!