Les profils de connexion et de déconnexion Auth0 ne fonctionnent pas. réagir à la machine à écrire
P粉349222772
2023-09-03 10:57:28
<p>J'ai une question à propos d'Auth0. Se connecter. et déconnexion. Utilisation de React TypeScript. </p>
<p>C'est dans Index.tsx. </p>
<pre class="brush:php;toolbar:false;">root.render(
<Auth0Provider
domain="somecode.us.auth0.com"
clientId="un code"
autorisationParams={{
redirect_uri : window.location.origin
}}
>
<React.StrictMode>
<Magasin du fournisseur={magasin}>
<CssBaseline />
<Application />
</Fournisseur>
</React.StrictMode>
</Auth0Provider>
);</pré>
<p>Certains codes sont donnés dans la configuration de l'authentification. </p>
<p>J'ai maintenant un bouton de connexion ou de déconnexion. </p>
<pre class="brush:php;toolbar:false;">const AuthButton = () =>
const {isAuthenticated, loginWithRedirect, logout } = useAuth0();
const handleLogin = () =>
connexionAvecRedirect();
} ;
const handleLogout = () =>
logout({ logoutParams: { returnTo: window.location.origin } });
} ;
retour (
<bouton
style={{
Couleur blanche',
Couleur d'arrière-plan : '#142952',
marginRight : '4rem',
fontFamily : 'Consolas',
bordure : 'aucun',
borderRadius : '3px',
largeur : '110px',
hauteur : '40px'
}}
onClick={isAuthenticated ? handleLogout : handleLogin}
>
{isAuthenticated ? 'Déconnexion' : 'Connexion'}
</bouton>
);
} ;
exporter AuthButton par défaut;</pre>
<p>Aussi. Je récupère les informations utilisateur à afficher. </p>
<pre class="brush:php;toolbar:false;">const Profil = () =>
const { utilisateur, isAuthenticated, getAccessTokenSilently } = useAuth0();
const [accessToken, setAccessToken] = useState('');
useEffect(() => {
const getAccessToken = async () =>
essayer {
const token = wait getAccessTokenSilently();
setAccessToken(jeton);
} attraper (erreur) {
console.erreur(erreur);
}
} ;
si (estAuthentifié) {
getAccessToken();
console.log("authentifié")
}
}, [isAuthenticated, getAccessTokenSilently]);
si (!isAuthenticated) {
return <div>Veuillez vous connecter pour afficher votre profil.</div>;
}
retour (
<div>
{utilisateur ?.image &&
<img src={user.picture} alt="Photo de profil" />
)}
<h2>Bonjour {utilisateur?.name}</h2>
<p>E-mail : {user?.email}</p>
<p>Méthode de connexion : {user?.sub?.split('|')[0]}</p>
<p>Jeton d'accès : {accessToken}</p>
</div>
);
} ;
exporter le profil par défaut ;</pre>
<h1><strong>Voici mon problème</strong> : Une fois connecté avec le protocole Auth0, le bouton <strong>Connexion et déconnexion ne change pas</strong>. D'abord. Il s'ouvre et accède à la boîte de dialogue auth0. Cependant. Après m'être connecté avec mon compte Google. Ensuite, le bouton indique toujours "Connexion". <strong>Cela signifie qu'il ne se connectera jamais</strong>. Je ne sais vraiment pas quoi faire. Voici les paramètres de configuration auth0 dont je dispose. </h1>
<p>Comme expliqué ci-dessus</p>
J'ai résolu ce problème en utilisant loginWithPopup au lieu de loginredirect. J'ai également utilisé ce lien.
Je n'utilise pas window.location.origin. Mais j'utilise l'adresse dans cette partie du code.