Day 1 of #100DaysOfCode: Trying Out Tanker for End-to-End Encryption

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.

Comments

[Patrick Charles-Lundaahl]

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.

[Audrey Roy Greenfeld]

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 😊).

[Dimitri Merejkowsky]

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:

webpackConfig.node = {
  // libsodium uses fs for some reason, we don't ever want that in a browser
  fs: 'empty',
  // libsodium never actually uses node's crypto in our case
  crypto: 'empty',
};

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!