Getting started with Tanker.io and Vue.js

Tanker is a PaaS that allow developers to easily protect any kind of data with end-to-end encryption through a SDK.

Here we are going to implement a simple Vue.js app containing a text input. The contents of this inout will be encrypted and decrypted using Tanker.

This post is basically the tanker encrypt-decrypt tutorial using Vue.js instead of React.

  • You have basic knowledge of JavaScript
  • You have basic knowledge of Vue.js

Create a Vue.js project

This shouldn’t be too hard. I’ll be doing it with vue-cli.

yarn global add @vue/cli
vue create tanker-encrypt-decrypt
cd tanker-encrypt-decrypt
yarn serve

Now head to src/App.vue and replace the content of it with the following:

<template>
<div id="app">
<h1>tanker-encrypt-decrypt tutorial</h1>
</div>
</template>
<script>
export default { }
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

The style part doesn’t really matter here. I kept it only to get a more stylish app.

Moreover you can get rid of

  • src/components/HelloWorld.vue
  • src/assets/logo.png

we won’t be using them.

Add Tanker.io dependencies

yarn add @tanker/client-browser
yarn add @yarn add @tanker/fake-authentication

The first one is a Client SDK that will allow us to encrypt and decrypt data in our web app. The second one aims to simulate a backend service that can distribute identities to the users of our tutorial application. Indeed Tanker identifies users before allowing them to perform cryptographic operations.

Create an account on Tanker

Signup here: https://dashboard.tanker.io/, verify your email and then create a new app.

Click on “Create app”.

You should now (among other things) have an App ID

Set up Tanker

Let’s head back to src/App.vue and update the script part as follow:

<script>
import FakeAuthentication from '@tanker/fake-authentication'
import Tanker from '@tanker/client-browser'
const appId = 'YOUR APP ID'export default {
data () {
return {
tanker: null,
fakeAuth: null,
}
},
created () {
this.tanker = new Tanker({ appId })
this.fakeAuth = new FakeAuthentication({ appId })
}
}
</script>

Nothing crazy here. We are importing and initializing the librairies we just installed.

To be able to encrypt data we need a session. As this is a tutorial we are going to fake this session thanks to @tanker/fake-authentication.

Start a session

We will need to do some async calls to start a session. So let’s start by updating a little bit our app to know when it’s ready to be used.

<template>
<div id="app">
<div v-if="ready">
<h1>tanker-encrypt-decrypt tutorial</h1>
</div>
<div v-else>
<p>Loading</p>
</div>
</div>
</template>
<script>
import FakeAuthentication from '@tanker/fake-authentication'
import Tanker from '@tanker/client-browser'
const appId = 'YOUR APP ID'export default {
data () {
return {
tanker: null,
fakeAuth: null,
ready: false
}
},
created () {
this.tanker = new Tanker({ appId })
this.fakeAuth = new FakeAuthentication({ appId })
},
mounted() {
this.ready = true
}
}
</script>

We just add a ready variable equals to false by default and set to true when the mounted hooks is called.

Let’s start the session now:

<script>
import FakeAuthentication from '@tanker/fake-authentication'
import Tanker from '@tanker/client-browser'
const appId = 'YOUR APP ID'const user = {
email: 'bruce@wayne-entreprises.com',
passphrase: 'iamthebatman'
}
export default {
data () {
return {
tanker: null,
fakeAuth: null,
ready: false
}
},
created() {
this.tanker = new Tanker({ appId })
this.fakeAuth = new FakeAuthentication({ appId })
},
async mounted() {
const { email, passphrase } = user
const { identity } = await this.fakeAuth.getIdentity(email)
const status = await this.tanker.start(identity)
switch (status) {
case Tanker.statuses.IDENTITY_REGISTRATION_NEEDED:
await this.tanker.registerIdentity({ passphrase })
break
case Tanker.statuses.IDENTITY_VERIFICATION_NEEDED:
await this.tanker.verifyIdentity({ passphrase })
break
case Tanker.statuses.READY:
break
default:
throw new Error(`Unhandled status: ${status}`)
}
this.ready = true
}
}
</script>

Create an input component

Let’s create a component where we will encrypt and decrypt a string: src/components/Input.vue

<template>
<div>
<h2>Enter your message</h2>
<input class="form-control" v-model="value" />
<button class="btn btn-primary" @click="toggle">{{ encrypted ? 'Decrypt' : 'Encrypt' }}</button>
</div>
</template>
<script>
import { toBase64, fromBase64 } from '@tanker/client-browser';
export default {
props: [
'tanker'
],
data () {
return {
value: '',
encrypted: false
}
},
methods: {
async toggle () {
if (this.encrypted) {
const encryptedData = fromBase64(this.value)
const clearText = await this.tanker.decrypt(encryptedData)
this.value = clearText
} else {
const encryptedData = await this.tanker.encrypt(this.value)
const encryptedText = toBase64(encryptedData)
this.value = encryptedText
}
this.encrypted = !this.encrypted
}
}
}
</script>
<style scoped>
h2 {
margin-top: 50px;
}
input {
width: 50%;
margin: 25px auto;
}
</style>

In order to get some style I added the bootstrap CSS in public/index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

Here we have created a component with a text input and a button that when clicked will either encrypt or decrypt the text.

Moreover you can see that the component expects a tanker prop. This is the Tanker instance that should be passed to it. We don’t want the component to instantiate it.

Now let’s add our component to our App.vue:

import Input from './components/Input.vue'// ...export default {
components: {
Input
},
// ...

and then add it to the template:

<template>
<div id="app">
<div v-if="ready">
<h1>tanker-encrypt-decrypt tutorial</h1>
<Input :tanker="tanker" />
</div>
<div v-else>
<p>Loading</p>
</div>
</div>
</template>

If you go to your browser you should now have something like this:

And this is it!

Software engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store