DEV Community 👩‍💻👨‍💻

Cover image for Day 1 of #100DaysOfCode: Trying Out Tanker for End-to-End Encryption
Audrey Roy Greenfeld for Feldroy

Posted on

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:

Tanker

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';
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
pclundaahl profile image
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.

Collapse
 
audreyfeldroy profile image
Audrey Roy Greenfeld Author

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

Collapse
 
dmerejkowsky profile image
Dimitri Merejkowsky • Edited on

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!

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!