Web

The web based example can be downloaded along with the mobile examples from the administrative portal or from GitHub (https://github.com/tresorit/ZeroKit-simple-example).

Supported browsers

We recommend to use the latest Chrome or Firefox for testing.

A full list of supported browsers:

• Chrome 38+
• Firefox 35.0+
• Microsoft Edge (25.10586+)
• Safari 8+
• Internet Explorer 11

Setting up the example application

1. Make sure you have the Example backend up and running, if not please see Node.js backend sample
2. Download the example from the management portal or from GitHub
   1. You can also fork and/or clone the repository from https://github.com/tresorit/ZeroKit-NodeJs-backend-sample
3. Edit config.js: You need to set the server url to where you set the example backend up. By default it's set for a backend running locally, on port 3000.
4. Serve the application: you have multiple options here:
   1. If you have Node.js installed you can:
      1. install express by: npm install express
      2. run the server by: node server.js
   2. If you have python intstalled you can run: python -m SimpleHttpServer 3002
5. This will start serving your own zero-knowledge example application of your own tenant on port 3002.
6. Navigate to http://localhost:3002/ and try it out.

Using the example

The example is a simple one page application that uses tabs for navigation.

1. Create a new example user of the example application
   1. Go to the Registration page
      1. Navigate to [http://localhost:3000/](http://localhost:3000/) in your favorite browser (See a list of supported browsers at the beginning of this chapter)
      2. Click Register on the top navigation bar.
   2. Provide a username and a passwordYou can keep it simple, these credentials are only for testing
   3. Click on the Register button
   4. Shortly after, you should see a "Successful Registrationl" message near the bottom of the page.
   5. Repeat the registration process once more to register a second user.
2. Log in with the user
   1. Click on the Log in link on the bottom of the registration page, or hit back in your browser.
   2. Enter the login information into the form
   3. Click Login. After a short while you should see a confirmation message
   4. Click Server log in. After some time you should see a success message.
   5. You are now logged in both on the client and server side.
3. Go to the tresor creation page: click the tresor link in the success message after logging or in the navigation bar at top of the page.
4. Create a tresor: a tresor is an encrypted, shareable, revocable keychain that you can use to encrypt data shared with a group of users.
   1. Simply click on the "Create tresor" button. You should see a message appear telling you that a tresor was created.The text below is the id of the tresor. You should save this id somewhere as it's the only way to identify the tresor, but it should be prefilled for you in the rest of the example
5. Create your first encrypted message
   1. Put some secret message in the text area
   2. Click on Encrypt. A new, seemingly random, long, base64 encoded text will appear in a success message below. You can save and decrypt this text later
   3. The original plaintext message you entered will appear below the button
   4. Save the encrypted message for later use, for example copy it to a textfile or put it on your clipboard
6. Go to decrypt clicking the link on the top navigation bar.The Encrypted text should be prefilled
   1. Click Decrypt. A success message should appear below containing the original text you encrypted.
7. Try to decrypt with another user
   1. Open your browser in Incognito/Private browsing mode. Important: don't just open a new tab in your current browser as it will use your current login session, and now we'll want to log in simultaneously with your second user. If you cannot start a new session easily, fully close your current browser and log in with the second user.
   2. Register a new user if you didn't register a second user and log in as before
   3. After logging in navigate to the Decryption page
   4. Paste the encrypted text into the text area and click Decrypt.
   5. You should look out for a message below the button to see the decryption fail
8. Share the first user's tresor with the second user
   1. Bring the previous browser window into focus
   2. Navigate to the Share pageYou should see the tresor ID prefilled.
   3. Enter the username of the other user into the text field below User to invite.
   4. Click share. You should see a success message.
   5. Now the second user should be able to decrypt the same encrypted message which it couldn't before, to test this bring the second window into focus and hit Decrypt again (without refreshing)
   6. The originally entered text should appear below the button.