Stash

okay, i just patched up some last minute like vulnerabilities (like xss idk how but i seem to do this every project) and added some finishing touches, but i think this project is good to ship! (i didnt know what to put for the picture lol)

so i didnt end up adding websockets, since i figured that would be waaaaaay to much work and i can get the exact same real time effect using just simple polling, so what i ended up doing was writing a lightweight endpoint that just tracks version numbers for each stash, so like the client polls that endpoint, and if it’s numbers are different than the server then it refetches only that data, so its at least a little more efficient than just re-rendering everything. honestly i think its pretty good, the updates are pretty much immediate so i think its fine. anyway that was like the last feature i wanted to add, so i think this project is about ready to ship!

unfortunately, i think im out of features to add that isnt websockets, so i guess next devlog is gonna have like 18 hours attached to it bc im going to have to rewire a bunch of stuff to accommodate real time updates but on the bright side, i did add this very cool marquee selection effect so yay for that i guess :P

so yk how i said i was gonna do ALL the features except websockets? so i added some very cool stuff imo, which is:
.
.
a send via files button, so if you want to select some files/folder whatever and you want to send it to a friend, theres built in functionality to send it via my own file sharing app, files.sahildash.dev! I also added some like server guards to make sure my computer’s disk doesnt like explode or whatever, but by FAR the coolest feature i added was file previews!!!
.
.
now for file previews, i actually went down a bit of an optimization rabbit hole, since for larger files, what would end up happening is that my current architecture of fetching the entire encrypted blob and decrypting would genuinely crash MY ENTIRE BROWSER, so no es bueno. I had to switch to a chunking version through a stream so that the program can upload/download stuff in parts and not all at once, and this made larger file previews MUCH MUCH faster. for me during testing, i got a preview from taking ~2mins to less than 10s so id says thats a craaaaazy good improvement. Also, i added a file cache so that when downloading the content for like downloading, the preview or the send via files, it doesnt have to refetch all the time, and you can just use that same data (revolutionary ik)
.
.
ok bye

added some cool little features from last devlog. still havent added websockets, but i have added:

• a quota bar so you know how much space you have left
• multi file/folder select (shift or ctrl click) to easily download/delete/move groups of things
• file previews, so you can look at the content you’re about to download!

anyway so next devlog im (hopefully) going to have websockets working so like real time stuff works! its probably gonna be a huge refactor so like im 100% gonna procrastinate on it lol. so like i would expect more devlogs about other random features before the websockets. k bye!

so uhhh funny story… remember how i was joking around about how long wiring in the api would take. guess that wasnt a joke. anyway now the app is more or less somewhat functional! i added some cool animations and styling things, and just small features, but the big ones are file and folder uploading, completely encrypted ofc, and devices! basically you can now generate an access code and then on the main page, use it to join the stash. i also added a qr code thing, but im not 100% sure it works (since i havent like actually hosted this yet, its still running on localhost) but once i get around to doing that, ill probably have to fix it since its completely broken and ill make a devlog about that. anyway yeah, after hosting/fixing the qr code, im probably gonna add WebSocket’s so like new devices and file are instantly shown to everyone else, and then its just small polish things from there!

just added in the ui for the file viewer (i think vault is a tuff name idk) but no api stuff yet. i think the ui looks good, the animations and things are nice, ill prob like deploy it to an actual site eventually, idk ig im just being lazy rn. anyway i guess next up is wiring up the api to this lil thing, hopefully it doesnt take as long as last time (i think this is foreshadowing)
.
.
ok bye

just added in the recovery phrase, and also just embedded the stash id into the recovery phrase so the user never has to like interact with the stash id, only the recovery phrase.
.
also i just realized i never actually explained how the encryption system works for the app so like heres the explanation ig.
.
.
the core idea is that when you create a stash, your device generates a random 256-bit key that’s your stash key, and it never leaves your device in plaintext. everything else is derived from it. your auth key, your metadata encryption key, your file encryption key, all of them are derived from the stash key using HKDF, so the server never sees any of it, just encrypted blobs.
.
.
auth works via challenge-response. when you load the app, your device asks the server for a random nonce, signs it with your auth key (which the server knows a verifier for but not the key itself), and sends it back. if it checks out, you get a session token. this is how i mange auth without an account system.
.
.
the recovery phrase is a 12-word BIP39 mnemonic derived from the first 16 bytes of the stash key. when you create a stash, the app wraps your stash key using a key derived from that phrase using PBKDF2, and stores the encrypted blob server-side. to recover on a new device, you enter the phrase, the app re-derives the wrapping key, decrypts the blob, and you’re back in. the stash ID is also embedded in the recovery lookup so you never have to know or type it because the phrase is the only thing that matters.
.
.
anyway that was a pretty long explanation, but now that the main landing page ui + api is done, now i just need to make like the actual browser page and there ill probably have like a button to view all connected devices, send the access codes, and obv, upload/download/view files.
.
.
okie bye!

FINALLY finished wiring in the api to the main page, so now stash creation, auth, and recovery work! but there are still some todos, obv, like for now the recovery phrase is just b64 strings and not like actually words, and recovery needs the stash id, but ill figure out a way to just embed that into the recovery code itself, but again thats a todo, also for now after authenticating it just redirects to /#, so i need to make the main stash browser page, anyway thats it!

added the landing page for the website, i think it looks pretty good. i havent hooked up the api to it yet, since rn im kind of 50/50 of whether or not i should like make all the pages first (no api) or make a page, add in api and do that for all the pages, idk. anyway yeah here it is ig

Just added the backend api, and also made a quick testing page to make sure everything works correctly, and i think it does! now that this is done, i can focus on building the main ui, along with the features along with it.