Les profils de connexion et de déconnexion Auth0 ne fonctionnent pas. réagir à la machine à écrire

Question

J'ai une question à propos d'Auth0. Se connecter. et déconnexion. Utilisation de React TypeScript.

C'est dans Index.tsx.

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;

Aussi. Je récupère les informations utilisateur à afficher.

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 ;

Voici mon problème : Une fois connecté avec le protocole Auth0, le bouton Connexion et déconnexion ne change pas. 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". Cela signifie qu'il ne se connectera jamais. Je ne sais vraiment pas quoi faire. Voici les paramètres de configuration auth0 dont je dispose.

Comme expliqué ci-dessus

Answer 1

J'ai résolu ce problème en utilisant loginWithPopup au lieu de loginredirect. J'ai également utilisé ce lien.

authorizationParams={{
redirect_uri: 'mysiteadress.com/home'
}}

Je n'utilise pas window.location.origin. Mais j'utilise l'adresse dans cette partie du code.