Dealing with End-to-End encryption & Flashes of decrypting content

So right now I’m working with some data that has traditionally been end-to-end encrypted with a mobile app that would maintain its full copy of the data locally. We sync the data to the server but the server has almost no idea what the data is and no way to decrypt it (by design the client keeps the key and passes it through a secure channel to other clients).

I love the “Hotwire” approach and the simplicity it provides but as I’ve built out pages with Turbo I realized there wasn’t a great way to delay a page being rendered till it was decrypted in the browser without some kind of blank page flash or loading state. Maybe it’s fine to keep this short loading state but its kind of jarring.

I’m not sure this approach works well with Turbo and tempted to move to more of a SPA for the main pages the user visits (maybe keep the various settings pages out of React) but I was curious if people were aware of APIs that would allow me to move more seamlessly between React Router & Turbo or perhaps to delay Turbo changing pages till the page is fully done loading. Maybe I just shouldn’t use Turbo here because that’s not what it’s made for, not sure.

Also, on a related note, decrypting takes a long time, it would be nice to cache the results of this in the browser if possible, but this would again require me to delay the page from loading or provide some kind of loading state for Encrypted data.

I really love server-rendered HTML and would like to push those boundaries when possible, but I also don’t want to force my love of the tech on a domain where it doesn’t make sense.

Tell me if you have any creative solutions!

Hi,

I think you should start a brand new app using ruby on rails without react and start play fully with turbo and discover all it’s components.

One great thing is the turbo-ios and turbo-android bridges that allow to quickly setup a hybride mobile app :slight_smile:

And also, start play with stimulus js because it’s another way to use js in an app and it’s not the same paradigme of building app like with react.

Cordialement,

The point of this project is to make a web version of an existing mobile app, sorry I didn’t make that clear :upside_down_face:

Yeah, I’ve built a huge side project with Stimulus JS and it works great! I’ve got it working where the data would be decrypted right as it arrives in the browser, but this is kind of a bad user experience.

E2E probably means SPA

As I’ve reflected on this more I realized that when it comes to our situation the mobile app has long made the assumption that it stores and manages ALL the data and the server is just a syncing mechanism. So I ran into a lot of issues where I needed to query and filter the data on the server but couldn’t because it was encrypted.

We thought about pulling data out of it, but thought the benefit of server side rendering wasn’t worth the lowered security.

I think heavily encrypted data like this kind of calls for client-side state if you want to do queries against it in complex ways. Which SPAs are good for.

I think I resisted this idea for so long because in 90% of apps client-side state is just a partial copy of the server-side state anyway which becomes this distributed system of databases that is very complex.

However, when you’re dealing with e2e encryption it’s just the way it is.

Luckily in my case, the data model is pretty simple and so it’s not a big deal.

Might make a longer post about when to chose a MPA v.s. SPA, tell me if you’re interested.

Unpoly

All that said, Unpoly is a really cool JS library similar to Turbo links that has a transition function that could hide decryption before page transitions. Plus it solves a lot of issues like the ability to create modals with urls and 3 pane layouts, check it out!