Privy

Introduction

Bienvenue dans le devlog de Privy, un projet éducatif né de ma passion pour la sécurité informatique et le développement d’applications réelles. En tant qu’étudiant, j’ai voulu comprendre les rouages des messageries sécurisées en construisant la mienne de A à Z. Ce projet est à la fois un terrain de jeu technologique et une aventure d’apprentissage, où chaque bug et chaque défi m’ont permis de progresser.

Dans cet article, je vais vous partager les étapes clés du développement, les choix technologiques, les défis rencontrés, et les leçons tirées de cette expérience. Toutes les ressources sont disponibles sur le dépôt GitHub.

Qu’est-ce que Privy ?

Privy est une application de messagerie sécurisée conçue pour expérimenter avec :

Le chiffrement de bout en bout pour des conversations privées.
L’échange de clés sécurisé (avec une exploration possible du Bluetooth et du NFC).
Une communication hybride combinant REST API et WebSocket.
Un support multiplateforme : web, mobile (via Capacitor) et desktop (Electron à l’étude).

L’objectif n’est pas de rivaliser avec les géants du secteur, mais de comprendre comment fonctionnent les applications sécurisées, et d’apprendre en pratiquant.

Partie 1 : Architecture et Choix Technologiques

1.1 Flux d’Authentification et de Communication

Voici un aperçu des interactions entre les différents composants de Privy, de l’inscription à l’échange de messages en temps réel :

Schéma fourni par https://talktogithub.com

1.2 Frontend : Vue 3 + Vite

J’ai opté pour Vue 3 et Vite pour le frontend, car cette combinaison offre une réactivité exceptionnelle et une courbe d’apprentissage douce. Le projet est structuré comme une SPA (Single Page Application), ce qui permet une navigation fluide et une expérience utilisateur moderne.

Pourquoi Vue 3 ? Sa simplicité et sa flexibilité en font un excellent choix pour un projet éducatif.
Vite : Un outil de build ultra-rapide, idéal pour itérer rapidement.

1.3 Backend : Node.js + Express + WebSocket

Le backend repose sur Node.js et Express pour gérer les requêtes HTTP, tandis que WebSocket assure la communication en temps réel.

WebSocket : Indispensable pour les messages instantanés et les indicateurs de saisie.
MySQL : Une base de données relationnelle pour stocker les utilisateurs, les conversations et les messages.

1.4 Sécurité : Chiffrement et Gestion des Clés

La sécurité est au cœur de Privy. Chaque message est chiffré avec une clé symétrique avant d’être envoyé. Pour l’instant, les clés sont stockées dans le localStorage, mais l’objectif est d’évoluer vers une solution plus robuste, comme un coffre-fort chiffré ou un échange de clés via Bluetooth.

Chiffrement symétrique : AES pour les messages.
Chiffrement asymétrique : RSA pour l’échange de clés.

1.5 Multiplateforme : Capacitor et Electron

Capacitor : Permet de packager l’application web en une app mobile (iOS/Android) avec peu d’efforts.
Electron : Envisagé pour une version desktop, si le besoin s’en fait sentir.

Partie 2 : Développement : Le Plan vs. la Réalité

2.1 Ce qui était prévu

Une application full décentralisée, avec échange de clés en Bluetooth/NFC.
Une sécurité à toute épreuve.
Une expérience utilisateur parfaite sur toutes les plateformes.

2.2 La réalité

Certaines fonctionnalités sont encore expérimentales ou en cours de développement.
La gestion des clés est perfectible (localStorage n’est pas idéal pour la sécurité).
Des bugs et des angles rugueux subsistent, mais chaque problème est une opportunité d’apprendre.

Exemple de défi : L’intégration du chiffrement de bout en bout a été plus complexe que prévu, notamment pour gérer les clés de manière sécurisée. Voici un extrait de code illustrant le chiffrement côté client :

async function encryptMessage(message, key) {
  const encoded = new TextEncoder().encode(message);
  const iv = window.crypto.getRandomValues(new Uint8Array(12));
  const ciphertext = await window.crypto.subtle.encrypt(
    { name: "AES-GCM", iv: iv },
    key,
    encoded
  );
  return { ciphertext, iv };
}

Partie 3 : Fonctionnalités Clés

3.1 Authentification et Gestion des Utilisateurs

Inscription/Connexion : Avec des tokens JWT pour maintenir les sessions.
Gestion des conversations : Création, invitation, acceptation/déclinaison.

3.2 Messagerie en Temps Réel

Grâce à WebSocket, les messages sont livrés instantanément, et les indicateurs de saisie informent les utilisateurs en temps réel.

3.3 Chiffrement de Bout en Bout

Chaque message est chiffré avant d’être envoyé, et seul le destinataire peut le déchiffrer.

Partie 4 : Déploiement et Configuration

4.1 Lancer le Projet en Local

Pour le backend :

cd backend
cd api
npm install
cd ../websocket
npm install
cd ..
docker compose up -d

Pour le frontend :

cd frontend
npm install
npm run dev

4.2 Packager pour Mobile

Avec Capacitor, il est facile de générer une application mobile :

npx cap add android
npx cap sync
npx cap open android

Prochaines Étapes

Voici ce que je prévois d’améliorer dans les prochaines semaines :

Gestion multilingue : Pour ne plus se limiter au français.
Meilleure gestion des erreurs : Des messages clairs et utiles pour les utilisateurs.
Améliorations de sécurité : Renforcement de l’authentification et du stockage des clés.
Optimisations de performance : Pour une expérience encore plus fluide.

Collaboration et Feedback

Privy est avant tout un projet personnel et éducatif. Je ne cherche pas de collaborateurs pour l’instant, mais toute remarque, signalement de bug ou suggestion d’amélioration est la bienvenue ! N’hésitez pas à ouvrir une issue sur GitHub ou à me contacter directement.

Conclusion

Privy est un projet en constante évolution, où chaque ligne de code est une leçon. Bien qu’il ne soit pas parfait, il représente une étape importante dans mon apprentissage du développement d’applications sécurisées.

Si vous êtes intéressé par le code, les détails techniques ou si vous souhaitez contribuer, tout est disponible sur GitHub. Merci d’avoir suivi ce devlog, et à bientôt pour les prochaines mises à jour !

Télécharger l’application Android