Bonjour , j'aimerai savoir comment faire pour garder l'utilisateur connecter , je me connecte sur mon application SPA avec mon api j'arrive bien a me connecter mais quand je refresh la page je reste connecter a mon api grâce au cookie mais cela me deco de mon front end , j'aimerai que mon front end garde en mémoire que l'utilisateur est connecté , j'y arrive avec le local storage en mettant isLoggedIn a true quand je me connecte et false quand je logout mais chaque utilisateur peut venir modifier cette variable du local storage .. Et si je deco avec logout et que je met la valeur a true dans mon navigateur web , cela affiche ma SPA comme si jetait connecté mais l'utilisateur ne peux pas utiliser les API backend grâce au token et meme si je refresh cela laisse mon isLoggendIn a true et n'arrive pas a voir que cela est faux .

J'aimerai avoir une solution fiable et sécurisé comme facebook par exemple qui je sais utilise des cookies et si je supprime un cookie cela me deconnecte automatiquement.

Merci de votre aide.

Bonjour, en principe le comportement que tu nous présente malgré qu'il peut être dérangeant est non souhaité il ne doit pas pouvoir représenter un problème de sécurité.

Si l'utilisateur vient manuellement modifier l'état dans le localStorage pour afficher l'interface en tant qu'utilisateur connecter alors qu'il ne l'est pas,

les actions qu'il va tenter de faire devrait être refuser par le serveur qui lui va vérifier la présence soit d'un cookie soit d'un token dans la requête réseaux (qui n'existera pas du coup) cela relève plus d'un problème "d'affichage" que d'un problème de sécurité normalement.

Si tu veux te débarrasser de ce problème d'affichage tu peux au moment de la lecture dans le localStorage faire une demande au serveur pour confirmer la valeur, par exemple.

J'imagine qu'actuellement ton composant qui lit la valeur isLogged (qui doit certainement être le composant racine) fait quelque chose comme cela:

import React from 'react'

export default function App() {

    const [isLogged, setIsLogged] = React.useState(localStorage.getItem("isLogged"))


    // ... your app code </> ...
    return (<></>)
}

Tu peux imaginer avoir ce code-là:

import React from 'react'

export default function App() {

    const [isLogged, setIsLogged] = React.useState(false)
    const [isReady, setIsReady] = React.useState(false)

    // vérifie si le client est connecter a chaque fois que l'application est recharger
    React.useEffect(() => {

        const isLoggedClientValue = localStorage.getItem("isLogged");


        if(isLoggedClientValue) {

            fetch("<URL_VERIFIE_CLIENT_LOGGED>", {/*  query option ... */})
            .then((response) => response.json())
            .then(json => {

                // vérifie si le serveur confirme que le client est connecter:
                if(json.clientIsLogged) {
                    setIsLogged(true)
                }

            })
            .catch(error => {
                console.error("> Oops, went wrong: cant get client status with: ", error)
            })
            .finally(() => {
                setIsReady(true)
            })

        } else {
            setIsLogged(false);
            setIsReady(true);
        }

    }, [])


    // l'application est dans un état de chargement
    if(!isReady) {

        // ici on peut afficher un loader sur l'interface
        // comme un cercle qui tourne par exemple

        // ...
        return (
            <></>
        )
    }


    // ... your app code </> ...
    return (<></>)
}

Là où dans un effet de bord (useEffect) on vient vérifier (en demandant au serveur) si le client est réellement connecter.

L'effet de bord sera ré exécuter a chaque rechargement de l'application.

C'est un exemple simplifier à adapter à ton application. 

D'accord merci bien et oui niveau serveur , il n'y a pas de problème si il n'a pas de token , il ne pourra pas faire les demandes serveurs .

Et c'est bien ce que je pensais aussi faire , faire une demande serveur a chaque fois qu'il accède a une page pour savoir si l'utilisateur est bien connecté et changer le valeur du localstorage en fonction mais pour moi je ne savais pas si cela était correct ou alors si cela fait une surcharge server de faire des appels server a chaque fois qu'un utilisateur accède a une page pour vérifié si il est bien connecté si par exemple cela se fait sur des milliers ou millions d'utilisateur en même temps.

Je sais que facebook on a un cookie c_user qui contient des chiffres et que si on le supprime cela nous deco et quand on se reconnecte cela remet le cookie , je pense qu'ils ont du le crypter surement et j'aimerai avoir un même système car je trouve cela quand même un peu mieux , qu'un localstorage avec isloogedIn true or false qu'un utilisateur pourrai modifier sachant qu'actuellement si on le modifie si on ferme et reouvre le navigateur cela laisse la valeur qu'on a entrer mais si je fais un appel server pour vérifier cela règlera ce problème merci bien :) 

Le fait que facebook (où une autre application) range une valeur chiffré/crypté dans un cookie pour déterminer si l'utilisateur est connecter,

n'empêche pas l'utilisateur de modifier le cookie pour mettre n'importe quoi dedans où même juste changer une lettre où un chiffre, je pense qu'il on aussi la nécessiter de faire une requête réseaux pour vérifier avec le serveur si l'utilisateur est réellement connecter.

Tu peux peut être refaire le test que tu as fait sur facebook en gardant la console de développement ouverte dans l'onglet réseaux colonne XHR pour voir si il y à des requêtes AJAX qui sont effectuer durant leurs processus.

Si tu trouves que placer une clés isLogged dans le localStorage avec un boolean est un peu trop simplet où trop facilement lisible pour un utilisateur qui se sent l'âme bricoleur, tu peux peut être ranger directement le token de connexion que le serveur te fournit.

Du genre avoir une clés c_token avec le token serveur qui sera moins lisible qu'un simple boolean avec une clés isLogged.

Après techniquement je pense que cela ne change rien.  

D'accord merci et oui j'ai une solution je que vais exploiter et faire des requêtes  server a chaque fois qu'un utilisateur accède a une page pour vérifier si il est connecté et sur laravel j'ai eu du mal mais j'ai trouver cette commande qui grâce au token donne les infos utilisateur :  $user =  auth('sanctum')->user(); 

Merci de ton aide cela ma beaucoup aidé a mieux comprendre qu'au finale même si le front end ment avec des infos manipuler par l'utilisateur , le server c'est toujours lui qui s'occupe de dire la vérité et vérifier les info.