👑 Create a secure Chat Application with React Hooks, Firebase and Seald 🔐
Tags: react, javascript, showdev, firebase
Published: 2020-08-31 21:03:11

Hello guys ! 👋

Today, let's discover a small chat application developed with __React Hooks__, __Firebase__ and a new package named __Seald__! 🔥

The goal of this article is to introduce you the Seald SDK and how this little package can be very effective in terms of security for your apps!

![cybersecurity meme](https://dev-to-uploads.s3.amazonaws.com/i/b086ptjw4hn4xccn6iog.png)
<figcaption>Created with meme-studio.io</figcaption>

[__End-to-end encryption__](https://en.wikipedia.org/wiki/End-to-end_encryption) of unstructured data can be complex and expensive to redevelop, essential to protect the confidential data your applications handle. With [Seald SDK](https://www.seald.io/products/integrations), we perform end-to-end encryption on data stored, produced or received by your applications. 

Let's take an example with __a chat application__ ! 💪

## Structure of our chat app 🧰

![Seald chat demo](https://dev-to-uploads.s3.amazonaws.com/i/m8dwn3r63zpczg413nsz.gif)
<figcaption>React + Firebase + Seald</figcaption>

Above is __a demo of our chat app__ in React, with an end-to-end encryption system, including several features: 

🟢 Create a room
🟢 Add/Remove users from a room
🟢 Modify a room
🟢 Registration / Login 
🟢 User status
🟢 Encrypting and decrypting a message

### The __main tools used are__:

[Firebase](https://firebase.google.com), a ready-to-use framework which allows us to create a persistent authentication system, save our encrypted messages in a database and receive them instantly when a user posts a new message.

[React](https://reactjs.org) which will be our frontend library to perform and design simple views for each state in our application.

[Seald](https://www.seald.io), the turnkey library we will use to bring end-2-end encryption 🔐 to the chat.

## Auth system 👨‍💻

![React Router](https://dev-to-uploads.s3.amazonaws.com/i/9oi0vzf263x0v6ew29b2.png)
<figcaption>Router with 3 routes</figcaption>

Only 3 routes for our chat application with authentication. __Registration__, __login__ and __room management__.

We define if the routes are allowed for authenticated users or not.

### Password derivation 🔏

Normally, we would send Firebase the password in cleartext, and then Firebase would derive it with a secure function such as __SCRYPT__ in order to avoid having it in the database.

In our case, we want to prevent Firebase from ever being able to read the password, even if it’s not stored, because we’re going to use it for protecting __the Seald identity end-2-end__ (even from Firebase).

In order to do that, we just do the same operation Firebase does, but *before* giving it to Firebase : we derive the password with a secure function (__SCRYPT__) and then use it as a password. 

![Password derivation](https://dev-to-uploads.s3.amazonaws.com/i/1zkw3ak5bisgqbhnii5t.png)
<figcaption>Password derivation before giving it to Firebase</figcaption>

### Sign up 👤

In order to create a user in this application, a simple form containing 3 fields is enough: 

![Sign up Seald demo](https://dev-to-uploads.s3.amazonaws.com/i/f9habf4cqavz2gv6lwj5.png)
<figcaption>Sign up form</figcaption>

![Sign up code](https://dev-to-uploads.s3.amazonaws.com/i/slcc8wehs9c5e7eaqhaa.png)<figcaption>Sign up code</figcaption>

Nothing very complicated in the code. We ask Firebase to create an authentication via an email and a password provided by the user.

And also add some informations about the user, like the name and a photo URL.

Then, we add the Seald application layer to create our future 
encrypted messages.

### Sign in 👤

Then, the login. A classic form (__email__ / __password__) in order to access the rooms and be able to chat with other users.

![Sign in Seald demo](https://dev-to-uploads.s3.amazonaws.com/i/ehihqcixbuo7sisnox0d.png)
<figcaption>Sign in form</figcaption>

![Sign in Seald code](https://dev-to-uploads.s3.amazonaws.com/i/n8lv5j3hjv5jy0u8rvxr.png)
<figcaption>Sign in code</figcaption>

Same as on the registration. We retrieve the __Firebase authentication__ of the user and his __Seald account__.

## Rooms 👨‍👩‍👦‍👦

That's where the interesting part comes from.

On this application, it is possible to __chat in 1 to 1__ with an another user, but also to __chat with a group of users__ in a custom room. 

### Create a room 🧸

![Add room Seald demo](https://dev-to-uploads.s3.amazonaws.com/i/geo99wm8xk4vczrnxx53.png)
<figcaption>Create a room</figcaption>

![Add room Seald code](https://dev-to-uploads.s3.amazonaws.com/i/bzmfah9ud6e4rk75ld1n.png)

Let's detail this code together: 

- First, we send the form data to [Firebase](firebase.google.com). The name of the room and the selected users are required.

- Then we create an encrypted session using the [Seald SDK](https://www.seald.io). This will allow to __encrypt__ and __decrypt__ a message for this room.

- And finally, we want to send the first encrypted message to welcome the users of this room.

![Demo hello](https://dev-to-uploads.s3.amazonaws.com/i/jvhxvhc8vtqj257fy081.png)
<figcaption>Our first room!</figcaption>
 
### Send encrypted messages 🔏

Now, let's chat ! But, remember, we want an __End-To-End encryption__ for the messages.

![Seald sdk](https://dev-to-uploads.s3.amazonaws.com/i/jj30v8jhlb94lkps0t37.png)

Before each created message, we need to check if we have an authenticated Seald session. If not, create that session with the SDK 🔒.

Then, the session allows us to encrypt a string, which is our message. 

__Alice__ 👩 sends a message to __Bob__ 👨

```js
"Hello my friend"
```

We call the method `encrypt` for our message above:

![Seald encrypt message](https://dev-to-uploads.s3.amazonaws.com/i/ds6d1ob6ixnnq9fuw8rb.png)

__The message will become__

```js
"{\"sessionId\":\"NazDAYyuRw2lDKS0VaianA\",\"data\":\"8RwaOppCD3uIJVFv2LoP3XGXpomj0xsMv4qmMVy30Vdqor2w0+DVCXu3j13PEyN2KfJm6SiSrWDRMDziiiOUjQ==\"}"
```

![Encrypted message Seald](https://dev-to-uploads.s3.amazonaws.com/i/s29hph61kqp49rc7pa60.png)
<figcaption>🔴 Before decrypting messages</figcaption>

Now, Bob 👨(and others users of the room) need to __decrypt the message of Alice 👩__. How can we do that ? 

### Decrypted messages 🔐

![Seald sdk code decrypt](https://dev-to-uploads.s3.amazonaws.com/i/qqtd6xfqg7rarhl1e8rb.png)

Now that we know how to send an encrypted message, let's see how to retrieve a message instantly and decrypt it for other users.

We use the `value` event to read our messages, as they existed at the time of the event. [This method](https://firebase.google.com/docs/database/web/read-and-write#listen_for_value_events) is triggered once when the listener is attached and again every time the data, including children, changes.

Read more about [reading and writing Data with Firebase](https://firebase.google.com/docs/database/web/read-and-write) 📂

We retrieve our message list every time a message is added. So an encrypted message is displayed, but now we need to be able to decrypt it:  

__Bob 👨 actually sees__: 

```js
"{\"sessionId\":\"NazDAYyuRw2lDKS0VaianA\",\"data\":\"8RwaOppCD3uIJVFv2LoP3XGXpomj0xsMv4qmMVy30Vdqor2w0+DVCXu3j13PEyN2KfJm6SiSrWDRMDziiiOUjQ==\"}"
```

We call the method `decrypt` for our encrypted message above:

![Decrypt sdk Seald](https://dev-to-uploads.s3.amazonaws.com/i/i5cex96s3ebfzw7j8xsh.png)

__Bob 👨 will now see__: 
```js
"Hello my friend"
```

![Chat demo decrypted Seald](https://dev-to-uploads.s3.amazonaws.com/i/vsoy80p00l9q0pcop4to.png)
<figcaption>🟢 After decrypting messages</figcaption>

We now have a real time chat with an end-to-end encryption system 💪

> Note: To use the Seald SDK, go to [seald.io](https://www.seald.io).

*Voilà*

Cheers 🍻 🍻 🍻 

If you enjoyed this article you can follow me on [Twitter](https://twitter.com/TrustedSheriff "TrustedSheriff") or here on [dev.to](https://dev.to/viclafouch) where I regularly post bite size tips relating to HTML, CSS and JavaScript.

{% link https://dev.to/viclafouch/promise-allsettled-vs-promise-all-in-javascript-4mle %}

{% link https://dev.to/viclafouch/github-profile-the-right-way-to-show-your-latest-dev-articles-bonus-398m %}