Authentification

React authentication

To-do

Les choses à faire pour avoir une authentification fonctionnelle :

• Formulaire pour envoie du mot de passe et du nom d'utilisateur
• Un système de vérification nom d'utilisateur / mot de passe
• Un moyen de stocker le userId dans le client

Formulaire

Le formulaire doit contenir un nom d'utilisateur ou adresse mail, combiner avec un mot de passe.

Ces inputs doivent être envoyé au back à l'aide d'axios ou de fetch. La requête doit envoyer avec la méthode POST sur l'url défini au niveau de votre API.

fetch(
    'http://auth-react.com/api/login',
    {
        email: email,
        password: password
    },
    headers : myHeaders,
    method: POST
)

Vérification

Dans le routeur qui est appelé par le formulaire une vérification de la concordance utilisateur/mot de passe doit être faites.

Exemple avec une base de données mongodb

const express = require('express')
const router = express.Router()

router.post('/login', async(req, res) => {
    const {email, mot_de_passe} = req.body

     try {
         // Recherche d'un utilisateur dans la base de données
        let utilisateur = await Utilisateur.findOne({ email })

        // Aucun utilisateur trouvé
        if (!utilisateur) {
            return res.status(400).json({ error: "L'email est invalide" })
        }

        if (mot_de_passe != utilisateur.mot_de_passe) {
            return res.status(400).json({ error: 'Mot de passe invalide' })
        }

        return res.status(200).json({
            id: utilisateur.id,
            nom: utilisateur.nom,
            prenom: utilisateur.prenom,
        })
    } catch (err) {
        res.status(500).json({ error: 'Serveur erreur' })
    }
}) 

Remarque : si le mot de passé est chiffre ou hasher il faut passer à utiliser la méthode de comparaison de l'outil de chiffrement/hashage utilisé

Stockage

Une fois que la requête nous retourne l'utilisateur connecté, il suffit de placer le userId et les autres informations nécessaires dans le sessionStorage.

sessionStorage.setItem('user', JSON.stringify(response.data))

Remarque: la création de la variable de session se fait dans le then de la requête fetch ou axios.