Retour d'expérience | Projet authentification avec Vue.js + Node.js

Un court billet pour garder une trace des différentes étapes de ce projet.

Le Projet

J'ai réalisé plusieurs applications qui demandent une authentification, toutes sous le domaine 'ikodi.eu'.

Ici le projet est de développer une application d'authentification et d'authorisation qui puisse être (à terme) utilisée avec mes autres applications.

Ainsi un utilisateur pourra créer un compte ou se logguer depuis une des applications du domaine 'ikodi.eu' et resté identifié sur les autres applications.

Ressources et lien

Le repo du projet : https://github.com/Ikodi-julien/auth-ikodi

Une vidéo pour le flow de validation d'email : https://www.youtube.com/watch?v=72JYhSoVYPc

1/ Phase de réflexion et préparation :

durée : 2 jours

Création du repo github, Réflexion sur l'architecture globale et choix des
technos, Réalisation du MCD et des wireframes,

Stack technique :

Frontend :

• Vue.js,
• Axios,
• Tests avec mocha + chaï,

Backend:

• API REST avec express, axios, cors,
• Base de donnée persistante PostgreSQL + callback,
• Redis pour le status de l'utilisateur,
• Authentification :
• Formulaire email + password avec cryptage ou
• API tiers (google, github, linkedin)
• Authorisation par token JWT en cookie http-only,
• Envoi de mails avec Nodemailer,

Déploiement :

• Instance EC2 d'AWS,
• Connexion ssh,
• Proxy nginx,

2/ Mise en place du frontend à blanc :

durée : 4 jours

Apprentissage des bases de Vue, Setup d'un projet Vue.js, Réalisation des
composants avec leurs tests, d'après les wireframes.

3/ Mise en place Backend :

durée : 5 jours

• setup app express,
• setup pgSQL,
• setup Redis,
• setup endpoints :
• GET :
• /
• /doc (à ce jour pas encore fait, enregistré en issue #
• /count
• /google
• /google/auth
• /github
• /github/auth
• /me
• /email-verify
• /reset-pwd/:id/:token
• POST:
• /login
• /signup
• /logout
• /forgot-pwd
• /reset-pwd/:id/:token
• PUT:
• /me/credentials
• /me/password
• DELETE:
• /me

setup controllers et middlewares :

• signup, login, update, delete, google api, github api, redirect,
• envoi de lien de confirmation d'email et de reset du mot de passe,
• gestion du statut de l'utilisateur avec Redis,
• vérification et renouvellement des tokens JWT,

4/ Test des composants Vue.js :

durée : 4 jours

• Apprentissage du test des composants Vue.js,
• Réalisation des tests : Mocha, chaï

Bien plus long que prévu, je n'avais pas configuré les tests à la création du projet et il y a eu des incompatibilités de version. De plus, la doc de Vue3 est bien plus claire que celle de Vue2 pour ce qui est de la réalisation des tests.

Au final c'est pratique quand c'est bien configuré depuis le début.

5/ Tests d'intégration du back :

durée : 2 jours,

Réalisation des tests d'intégration (login, signup, update, delete) et modifs pour qu'ils passent…

6/ Connexion Frontend et Backend :

durée : 4 jours

Ici, j'ai compris la complexité que pouvait représenter une application d'authentification autonome. Notamment quand il faut avoir jusqu'à 8 terminaux ouverts pour suivre une requête :

• console du front de l'app lambda d'origine ->
• console front de l'app d'authentification ->
• logs backend de l'app d'authentication ->
• cli backend de l'app d'authentification ->
• cli base de donnée de l'app d'authentification ->
• retour console front de l'app lambda ->
• logs backend de l'app lambda ->
• cli backend de l'app lambda ->
• cli base de données de l'app lambda

Et oui, le compte d'un utilisateur est partagé entre l'app d'authentification (pseudo, email, mdp crypté) et l'app lambda (avatar, catégories d'animés, favoris…) les deux sont reliés grâce aux jsonwebtoken.

Egalement, il est bon de prévoir sérieusement le MCD au départ. Coder direct la tête dans le guidon ça n'est pas efficace.

7/ Gestion login et signup avec api (google et github)

durée : 2 jours

C'est l'occasion de factoriser, chainer les middlewares dans express.

Petite satisfaction (même si perte de temps avec api github), car c'est allé plutôt rapidement et simplement comparé à mes essais précédents.

Le savais-tu ? Une requête Ajax ne permet pas la redirection (après réflexion c'est logique) donc pour tester des valeurs de formulaire avant d'envoyer un formulaire (dont la requête pourra être redirigée) il faut recréer un formulaire et un event submit après les contrôles des valeurs d'input…

8/ Fix bugs et tests :

durée 2 jours

• Tests globaux d'intégration en local et ajustements,
• Création des branches de déploiement.

9/ Mise en place de l'envoi de mail pour mot de passe oublié et confirmation d'email :

durée : 1 jour

Rien à dire, si ce n'est que cela fera l'objet du prochain billet.

10/ Préparation avant build et déploiement :

durée : 1 jour

• S'assurer que les variables d'url sont bien configurées et utilisées,
• Supprimer les valeurs par défaut des inputs de formulaires,
• Régler et tester les inputs de mot de passe avec min et max et regex,
• Chasse aux console.log,
• Faire un joli code bien rangé,

11/ Déploiement :

durée : 2 jours

• Création de l'enregistrement DNS,
• Clone repos de l'app d'authentification et du front sur instance EC2 aws, également l'app « Concord » visible à concord.ikodi.eu modifiée pour utilisée l'app d'authentification.
• Augmentation du stockage sur l'instance EC2,
• Gestion des conflits de version (downgrade nécessaire sur EC2),
• Setup base de données pgSQL,
• Daemonisation de l'app avec pm2,
• Création des fichiers de variables d'environnement et de clé d'identification (google, github),
• Paramétrage du proxy Nginx y compris certification https avec Certbot,
• Tests des scénari d'intégration,
• Versionning V1 pour auth, V2 pour Concord.

12/ Tests de scénari dans le navigateur :

durée : Encore en cours à ce jour

Enregistrement et résolution d'issues dans le projet github.

En résumé :

Préparation : 2 jours,

Frontend : 4 jours

Backend : 7 jours

Connexion back/ front : 4 jours

Fix, tests, factorisation et stabilisation : 9 jours

Déploiement : 2 jours

Total : 4 semaines