GESTION DE L'AUTH DANS LES APPLICATIONS REACT À L'AIDE DE NANOSTORES ET DE L'API CONTEXT

Au cours de mes débuts dans la création d'applications Web full stack avec ReactJs, je me suis retrouvé confus quant à la façon de gérer l'authentification dans le frontend. Je veux dire, que devez-vous faire ensuite après avoir reçu votre jeton d'accès du backend ? Comment préserver l’état de connexion ?

La plupart des débutants supposeraient « Oh, stockez simplement votre jeton dans l'état ». Mais j'ai rapidement découvert que ce n'était pas la meilleure solution, ni même une solution du tout car, comme le savent la plupart des développeurs ReactJs expérimentés, l'état est temporaire car il est effacé à chaque fois que vous actualisez la page et nous pouvons certainement le faire. Les utilisateurs ne se connectent pas à chaque actualisation.

Avance rapide jusqu'à maintenant que j'ai acquis un peu d'expérience dans la création d'applications full stack en réaction, en étudiant l'approche d'un développeur plus expérimenté en matière d'authentification et en reproduisant le processus dans deux autres applications, j'aimerais donner un guide sur la façon dont je le gère actuellement. Certaines personnes ne pensent peut-être pas que ce soit la meilleure méthode, mais je l'ai adoptée comme méthode pour l'instant et je suis ouvert à l'apprentissage d'autres méthodes utilisées par d'autres développeurs.

PREMIÈRE ÉTAPE

Vous avez soumis votre e-mail et votre mot de passe (en supposant que vous utilisez une authentification de base par e-mail et par mot de passe) au backend pour lancer le processus d'authentification. Je ne parlerai pas de la façon dont l'authentification est gérée dans le backend car cet article explique comment gérer l'authentification uniquement dans le frontend. Je vais passer à la partie où vous avez reçu un jeton dans la réponse HTTP. Vous trouverez ci-dessous un exemple de code d'un simple composant de formulaire de connexion qui soumet l'e-mail et le mot de passe au serveur et reçoit le jeton et les informations utilisateur dans la réponse. Maintenant, par souci de simplicité, les valeurs de mon formulaire sont gérées avec l'état, il serait bien préférable d'utiliser une bibliothèque robuste comme formik pour les applications de production.

import axios from 'axios'
import { useState } from "react"

export default function LoginForm() {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")

    const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo
        } catch (error) {
            throw error
        }
    }

    return(
        <form onSubmit={handleSubmit}>
            <div>
                <input name="email" onChange={(e) => setEmail(e.target.value)}/>
                <input name="password" onChange={(e) => setPassword(e.target.value)}/>
            </div>
            <div>
                <button type="submit">
                    Login
                </button>
            </div>
        </form>
    )
}

DEUXIÈME ÉTAPE

Enveloppez l'intégralité de votre application, ou uniquement les parties qui doivent accéder à l'état d'authentification dans un fournisseur de contexte d'authentification. Cela se fait généralement dans votre fichier racine App.jsx. Si vous n'avez aucune idée de ce qu'est l'API de contexte, n'hésitez pas à consulter la documentation Reactjs. Les exemples ci-dessous montrent un composant de fournisseur AuthContext créé. Il est ensuite importé dans App.jsx et utilisé pour envelopper le RouterProvider renvoyé dans le composant App, rendant ainsi l'état d'authentification accessible depuis n'importe où dans l'application.

import { createContext } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {

    return(
        <AuthContext.Provider>
            {children}
        </AuthContext.Provider>
    )
}

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AuthProvider from "./AuthContext";

const router = createBrowserRouter([
    // your routes here
])

function App() {
    return(
        <AuthProvider>
            <RouterProvider router={router} />
        </AuthProvider>
    )
}

export default App

TROISIÈME ÉTAPE

Dans le contexte d'authentification, vous devez initialiser deux variables d'état, « isLoggedIn » et « authenticatedUser ». Le premier état est un type booléen qui sera initialement défini sur « false » puis mis à jour sur « true » une fois la connexion confirmée. La deuxième variable d'état est utilisée pour stocker les informations de l'utilisateur connecté telles que les noms, l'e-mail, etc. Ces variables d'état doivent être incluses dans la valeur du fournisseur renvoyée dans le composant contextuel afin qu'elles puissent être accessibles dans toute l'application pour le rendu conditionnel. .

import { createContext, useState } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        <AuthContext.Provider value={values}>
            {children}
        </AuthContext.Provider>
    )
}

ÉTAPE QUATRE

Nanostores est un package permettant de gérer l'état dans les applications Javascript. Le package fournit une API simple pour gérer les valeurs d'état sur plusieurs composants en l'initialisant simplement dans un fichier séparé et en l'important dans n'importe quel composant dans lequel vous souhaitez utiliser l'état ou le mettre à jour. Mais, dans le but de stocker votre jeton d'authentification reçu dans la réponse HTTP à la première étape, vous utiliserez nanostores/persistent. Ce package conserve votre état en le stockant dans localStorage, de cette façon il n'est pas effacé lorsque vous actualisez la page. @nanostores/react est une intégration spécifique à React pour les nanostores, elle met à disposition le hook useStore pour extraire des valeurs d'un état nanostore.

Alors maintenant, vous pouvez continuer et :

• Installez les packages suivants : nanostores, @nanostores/persistent et @nanostores/react.

• Dans un fichier séparé nommé user.atom.js ou quel que soit le nom que vous choisissez, initialisez un magasin « authToken » et un magasin « utilisateur » en utilisant nanostores/persistent.

• Importez-les dans le fichier de composant de votre formulaire de connexion et mettez à jour l'état avec le jeton et les données utilisateur reçues dans votre réponse de connexion.
  

npm i nanostores @nanostores/persistent @nanostores/react

import { persistentMap } from '@nanostores/persistent'

export const authToken = persistentMap('token', null)

export const user = persistentMap('user', null)

import { authToken, user } from './user.atom'

 const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo

            authToken.set(token)
            user.set(userInfo)
        } catch (error) {
            throw error
        }
    }

ÉTAPE CINQ

Maintenant, dans votre contexte d'authentification qui enveloppe votre application, vous devez vous assurer que les états du jeton et de l'utilisateur sont tenus à jour et rendus disponibles dans l'ensemble de votre application. Pour y parvenir, vous devez :

• Importez les magasins « authToken » et « user ».

• Initialie a useEffect hook, inside of the hook, create a ‘checkLogin()’ function which will check whether the token is present in the ‘authToken’ store, if it is, run a function to check whether it’s expired. Based on your results from checking, you either redirect the user to the login page to get authenticated OR… set the ‘isLoggedIn’ state to true. Now to make sure the login state is tracked more frequently, this hook can be set to run every time the current path changes, this way, a user can get kicked out or redirected to the login page if their token expires while interacting with the app.

• Initialize another useEffect hook which will contain a function for fetching the user information from the backend using the token in the authToken store every time the app is loaded or refreshed. If you receive a successful response, set the ‘isLoggedIn’ state to true and update the ‘authenticatedUser’ state and the ‘user’ store with the user info received in the response.

Below is the updated AuthProvider component file.

import { createContext, useState } from "react";
import { authToken, user } from './user.atom';
import { useStore } from "@nanostores/react";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)
    const token = useStore(authToken)
    const navigate = useNavigate()
    const { pathname } = useLocation()

    function isTokenExpired() {
        // verify token expiration and return true or false
    }

    // Hook to check if user is logged in 
    useEffect(() => {
        async function checkLogin () {
            if (token) {

              const expiredToken = isTokenExpired(token);

              if (expiredToken) {
                // clear out expired token and user from store and navigate to login page
                authToken.set(null)
                user.set(null)
                setIsLoggedIn(false);
                navigate("/login");
                return;
              }
            }
        };

        checkLogin()
    }, [pathname])

    // Hook to fetch current user info and update state
    useEffect(() => {
        async function fetchUser() {
            const response = await axios.get("/api/auth/user", {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })

            if(response?.status !== 200) {
                throw new Error("Failed to fetch user data")
            }

            setAuthenticatedUser(response?.data)
            setIsLoggedIn(true)
        }

        fetchUser()
    }, [])

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        <AuthContext.Provider value={values}>
            {children}
        </AuthContext.Provider>
    )
}

CONCLUSION

Now these two useEffect hooks created in step five are responsible for keeping your entire app’s auth state managed. Every time you do a refresh, they run to check your token in local storage, retrieve the most current user data straight from the backend and update your ‘isLoggedIn’ and ‘authenticatedUser’ state. You can use the states within any component by importing the ‘AuthContext’ and the ‘useContext’ hook from react and calling them within your component to access the values and use them for some conditional rendering.

import { useContext } from "react";
import { AuthContext } from "./AuthContext";

export default function MyLoggedInComponent() {

    const { isLoggedIn, authenticatedUser } = useContext(AuthContext)

    return(
        <>
        {
            isLoggedIn ? 
            <p>Welcome {authenticatedUser?.name}</p>
            :
            <button>Login</button>
        }
        </>
    )
}

Remember on logout, you have to clear the ‘authToken’ and ‘user’ store by setting them to null. You also need to set ‘isLoggedIn’ to false and ‘authenticatedUser’ to null.

Thanks for reading!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!