👑 Une application de chat chiffrée avec React Hooks, Firebase et Seald 🔐

Bonjour ! 👋

Aujourd'hui, découvrons comment développer une petite application de chat avec React Hooks, Firebase et un nouveau paquet nommé Seald ! 🔥

Le chiffrement de bout en bout peut être complexe et coûteux à re-développer, bien qu'il soit essentiel de protéger les données confidentielles que vos applications traitent. Avec le SDK de Seald, nous effectuons un chiffrement de bout-en-bout sur les données stockées, produites ou reçues par vos applications.

Prenons un exemple avec une application de chat ! 💪

Structure de notre application de chat 🧰

Vous trouverez ci-dessus une démo de notre application de chat en React, avec un système de chiffrement de bout en bout, comprenant plusieurs fonctionnalités :

🟢 Créer une salle ;
🟢 Ajouter/supprimer des utilisateurs d'une salle ;
🟢 Modifier une salle ;
🟢 Inscription / Connexion ;
🟢 Gestion du status utilisateur ;
🟢 Chiffrer et déchiffrer un message.

Les principaux outils sont :

Firebase, un paquet qui nous permet de créer un système d'authentification permanente, de sauvegarder nos messages chiffrés dans une base de données et de les recevoir instantanément lorsqu'un utilisateur poste un nouveau message.

React qui sera notre bibliothèque frontend pour effectuer et concevoir des vues simples pour chaque état dans notre application.

Seald, la bibliothèque clé en main que nous utiliserons pour apporter le chiffrement de bout en bout 🔐 au chat.

Système d'authentification 👨‍💻

Seulement 3 routes pour notre application de chat avec authentification. Inscription, connexion et gestion des salles.

Nous définissons si les routes sont autorisées pour les utilisateurs authentifiés ou non.

Dérivation de mot de passe 🔏

Normalement, nous envoyons le mot de passe à Firebase en clair, puis Firebase l'obtient grâce à une fonction sécurisée telle que SCRYPT afin d'éviter qu'il ne figure dans la base de données.

Dans notre cas, nous voulons empêcher Firebase de pouvoir lire le mot de passe, même s'il n'est pas stocké, car nous allons l'utiliser pour protéger l'identité de Seald de bout en bout (même de Firebase).

Pour ce faire, nous faisons la même opération que Firebase, mais avant de le donner à Firebase : nous dérivons le mot de passe avec une fonction sécurisée (SCRYPT) et l'utilisons ensuite comme mot de passe.

Inscription 👤

Afin de créer un utilisateur dans cette application, un simple formulaire contenant 3 champs est suffisant :

Rien de très compliqué dans le code. Nous demandons à Firebase de créer une authentification via un e-mail et un mot de passe fourni par l'utilisateur.

Nous ajoutons également quelques informations sur l'utilisateur, comme le nom et l'URL d'une photo.

Ensuite, nous ajoutons la couche d'application Seald pour créer nos futurs messages chiffrés.

Connexion 👤

Ensuite, la connexion. Un formulaire classique (email / mot de passe) afin d'accéder aux salles et de pouvoir discuter avec d'autres utilisateurs.

Même chose que pour l'enregistrement. Nous récupérons l'authentification Firebase de l'utilisateur et de son compte Seald.

Les salles de discussions 👨‍👩‍👦‍👦

C'est de là que vient la partie intéressante.

Sur cette application, il est possible de discuter en 1 à 1 avec un autre utilisateur, mais aussi de discuter avec un groupe d'utilisateurs dans un espace personnalisé (une salle).

Créer une salle de discussion 🧸

Détaillons ensemble ce code :

• Tout d'abord, nous envoyons les données du formulaire à Firebase. Le nom de la salle et les utilisateurs sélectionnés sont requis.
• Ensuite, nous créons une session sécurisée en utilisant le SDK de Seald. Cela permettra de chiffrer et de décrypter un message pour cette salle de discussion.
• Enfin, nous voulons envoyer le premier message chiffré pour souhaiter la bienvenue aux utilisateurs de cette salle.

Envoyer des messages chiffrés 🔏

Maintenant, chattons ! N'oubliez pas que nous voulons un chiffrement de bout en bout pour les messages.

Avant chaque message créé, nous devons vérifier si nous disposons d'une session Seald authentifiée. Si ce n'est pas le cas, créez cette session avec le SDK 🔒.

Ensuite, la session nous permet de chiffrer un string, qui est notre message.

Alice 👩 envoie un message à Bob 👨

"Bonjour mon ami"

Nous appelons la méthode encrypt pour notre message ci-dessus :

Le message deviendra :

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

Maintenant, Bob 👨(et les autres utilisateurs de la salle) doivent déchiffrer le message d'Alice 👩. Comment faire ?

Déchiffrer les messages 🔐

Maintenant que nous savons comment envoyer un message chiffré, voyons comment récupérer un message instantanément et le décrypter pour les autres utilisateurs.

Nous utilisons l'événement value pour lire nos messages, tels qu'ils existaient au moment de l'événement. Cette méthode est déclenchée une fois lorsque l'évènement est instancié ainsi qu'à chaque fois que les données, y compris les enfants, changent.

Pour en savoir plus sur la lecture et l'écriture de données avec Firebase 📂

Nous récupérons notre liste de messages à chaque fois qu'un message est ajouté. Ainsi, un message chiffré est affiché, mais nous devons maintenant être en mesure de le décrypter :

Bob 👨 voit actuellement :

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

Nous appelons la méthode decrypt pour notre message chiffré ci-dessus :

Bob 👨 voit maintenant :

"Bonjour mon ami"

Nous avons maintenant un chat en temps réel avec un système de chiffrement de bout en bout 💪.

Note: Pour utiliser le SDK de Seald, rendez-vous sur seald.io.

Voilà

À bientôt !