This tutorial will show you how to apply Virgil’s E3Kit group encryption to your application’s chat messages using Sendbird’s UIKit. Before diving into the implementation details, we’ll first understand more about end-to-end encryption and take a closer look at Virgil Security. We’ll then cover a core use case and illustrate it with a user story.
But first, let’s take a look at some prerequisites.
To get the most out of this tutorial, it is helpful to have:
Please note that this tutorial is aimed at developers with some background knowledge of JavaScript and of cybersecurity.
With that out of the way, let’s get started!
End-to-end encryption is a secure communication system in which only users with a private security key can read transmitted messages. End-to-end encryption is often required in regulated industries, such as healthcare or finance, with compliance requirements on data accessibility. End-to-end encryption encrypts the message payload transmitted, stored, and retrieved. Only users with access to the private key used to encrypt the data can read the content.
In the context of Sendbird, end-to-end encryption means that Sendbird systems and personnel are unable to access the message’s content. This is a critical part of Sendbird’s privacy guarantees. It is worth noting that all communications in Sendbird are encrypted at the transport level while in motion and at the persistence level when at rest.
Consider the case of a healthcare company. HIPAA compliance is mandatory in healthcare. Patient data needs to be secured by all means.
The user story goes: As a user, I want to send messages that can only be read by me and the persons I’m sending the messages to protect my privacy. End-to-end encryption delivers on the user requirement.
Remember to consider the impact of sending encrypted messages. Encrypted messages can be used for good purposes or to harm. Make sure to check the legal implications for implementing encrypted messages in your jurisdiction.
If you want to learn more about end-to-end encryption, check out this excellent article by the Electronic Frontier Foundation.
Now that the foundations are laid, let’s discuss why you should consider using Virgil’s E3Kit with Sendbird.
Virgil Security is a cryptographic software and services provider. It offers E3Kit, an end-to-end encryption SDK for many platforms to simplify encryption, key management, and other complex security tasks.
E3Kit delivers:
The implementation consists of 3 major parts:
First, let’s go through a quick overview and then dive deeper into the implementation with code samples.
The diagram below shows the high-level communication flow. Remember that a counterpart message sender user is required for the registered device.
Given a Virgil user_id and Sendbird user_id are the same:
The current user:
The current user is automatically:
Now let’s go through all these steps in detail.
Given that you have a Web App server running to issue Virgil User JWT tokens, run the following code.
We need to get a JWT and init Virgil instance, and fetch a JWT token when the app loads.
e3.js – Create Virgil Group
CustomizedApp.js – Synchronous generation of channel params
Important note: To load the correct Virgil Group, you will need the Sendbird Channel URL and the user_id of the creator of the Virgil Group. In this case, the details are stored in the Sendbird channels’ creator field.
Sendbird’s UIKit message input currently does not allow for asynchronous operations before message sending. Therefore, it is recommended to leverage Sendbird’s useSendbirdStateContext with the sendbirdSelectors.
Render the custom message input and pass down the Sendbird SDK in order to access useSendbirdStateContext and sendbirdSelectors.
Check out the entire input component in the code here.
When a user sends a message, the following operations take place:
With Sendbird’s UIKit, it is possible to listen for changes to the message list view and render a message card for each new message. The customer message card can be created by leveraging the UIKit’s renderChatItem property on the Channel component.
The decryption of each message is asynchronous. Therefore, we set placeholders for each message, complete the decryption, then re-render the unencrypted messages.
Notice how the message sender’s user_id is required. Then we get the Sendbird Group Channel’s associated Virgil Group. Finally, the message can be decrypted and returned.
And that’s it! We have covered how to associate a Virgil Group with a Sendbird Group Channel and use Sendbird’s UIKit customizations to encrypt, decrypt and display decrypted messages. With Sendbird’s UIKit and Virgil Security, you can rest assured that all your users’ messages are secure.
If you need additional guidance, check out the docs for both Sendbird and Virgil. As always, don’t hesitate to contact us if you need any help!
We can’t wait to see what you build! Happy coding! ✌️
Stay up-to-date on the latest technical content from Sendbird.
Thank You for registering!