For the longest time, it's been on my bucket list to figure out how to implement end-to-end encryption for web apps. So I'm starting with it as my first day of #100DaysOfCode.
I did a quick search and discovered @dmerejkowsky 's post on adding end-to-end encryption to Mastodon. He uses Tanker's API to encrypt Mastodon direct messages.
Tanker looks promising:
I followed Tanker's Encrypt and decrypt data in a web app tutorial, converting it from React to Vue as I went along.
I remixed https://glitch.com/edit/#!/vuejs-tailwind-starter to create a new Vue.js project with Tailwind CSS.
I added my Tanker app ID to 🔑.env.
In package.json > Add Package, I added:
- @tanker/client-browser
- @tanker/fake-authentication
I then added the imports as per the tutorial:
import FakeAuthentication from '@tanker/fake-authentication';
import { Tanker } from '@tanker/client-browser';
At this point I ran into the error Module not found: Error: Can't resolve 'fs'. Commenting the second line out gets rid of the error.
I tried installing graceful-fs which didn't help. Uninstalled it. Found a Glitch forum post about fs that said fs is already part of node.js.
In case memory might be the culprit, I upgraded to a paid Glitch subscription and boosted my app. That didn't help.
At this point I'm stuck.
That was a rough Day 1. I was hoping to at least get through the Tanker tutorial. If anyone wants to help debug this, here's the code: https://glitch.com/edit/#!/morning-pages
I'm also open to suggestions of other tools/libraries for web app end-to-end encryption.
Latest comments (3)
Hello Audrey, @dmerejkowsky here :)
Thank you for trying out Tanker !
We took the time to investigate the problem thanks to the code you shared.
The problem you face is due to a known issue where webpack and libsodium (one of our dependencies) don't play nice with each other.
A workaround is to modify the webpack config to have something like this:
Hopefully this will allow you to go through the rest of the tutorial -
in the mean time we'll update our documentation so that
future users don't get stuck because of the same issue.
Cheers!
This is a cool project!
Re: your error with 'fs', have you recreated it locally? I'm not familiar with Glitch, but if it's one of those pre-packaged nodejs hosts, it wouldn't surprise me if there might be limits around filesystem access.
Patrick, good point and suggestion, thank you!
My husband @danielfeldroy tried the project out locally late last night and said he duplicated it...I'm going to do the same myself later today and confirm (or better yet, fix 😊).