Selon la documentation de ce composantvous pouvez obtenir le statut de connexion dans le code :
FacebookLoginClient.login((res) => {
// "res" contains information about the current user's logged-in status
});
Ainsi, dans tout composant qui doit connaître l’état, référencez simplement la bibliothèque :
import { FacebookLoginClient } from '@greatsumini/react-facebook-login';
Et utilise ça FacebookLoginClient.login pour vérifier l’état de connexion de l’utilisateur. Si le statut ne répond pas aux critères que vous avez définis, redirigez l’utilisateur. (Par exemple, vous pouvez vérifier cela dans un useEffect lors du premier chargement du composant, ou peut-être à chaque rendu si vous êtes paranoïaque à ce sujet.)
Éditer: Pour plus de détails sur le rendu du composant cible, puisque useEffect se produit après le rendu initial, vous pouvez compter sur un état supplémentaire pour vérifier. Par exemple, considérons cette structure :
const [canRender, setCanRender] = useState(false);
useEffect(() => {
FacebookLoginClient.login((res) => {
// check the status and call "setCanRender" accordingly
});
}, []);
if (!canRender) return Checking authentication...;
// your existing return for the component goes here
L’idée ici est de définir par défaut le composant sur une sorte d ‘”état de chargement” et de ne rendre le contenu “sécurisé” qu’après vérification de l’authentification.
