Auth0-Anmelde- und Abmeldeprofile funktionieren nicht. Typoskript reagieren

Question

Ich habe eine Frage zu Auth0. Anmeldung. und abmelden. Verwenden von Reaktionstyposkript.

Dies ist in Index.tsx.

root.render(
  <Auth0Provider
        domain="somecode.us.auth0.com"
        clientId="somecode"
        AuthorizationParams={{
          Redirect_uri: window.location.origin
        }}
      >
      <React.StrictMode>
        <Provider store={store}>
          <CssBaseline />
          <App />
        </Anbieter>
      </React.StrictMode>
  </Auth0Provider>
);

In der Authentifizierungskonfiguration ist ein Teil des Codes angegeben.

Jetzt habe ich eine Schaltfläche zum Anmelden oder Abmelden.

const AuthButton = () =>
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

  const handleLogin = () =>
    loginWithRedirect();
  };

  const handleLogout = () =>
    logout({ logoutParams: { returnTo: window.location.origin } });
  };

  zurückkehren (
    <-Taste
      Stil={{
        Farbe weiß',
        Hintergrundfarbe: '#142952',
        marginRight: '4rem',
        Schriftartenfamilie: 'Consolas',
        Grenze: 'keine',
        borderRadius: '3px',
        Breite: '110px',
        Höhe: '40px'
      }}
      onClick={isAuthenticated ? handleLogout : handleLogin}
    >
      {isAuthenticated ? 'Logout' : 'Login'}
    </button>
  );
};

Standard-AuthButton exportieren;

Auch. Ich rufe Benutzerinformationen zur Anzeige ab.

const Profile = () =>
  const { user, isAuthenticated, getAccessTokenSilently } = useAuth0();
  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    const getAccessToken = async () =>
      versuchen {
        const token = Warten auf getAccessTokenSilently();
        setAccessToken(token);
      } Catch (Fehler) {
        console.error(error);
      }
    };

    if (isAuthenticated) {
      Zugriffstoken erhalten();
      console.log("authentifiziert")
    }
  }, [isAuthenticated, getAccessTokenSilently]);

  if (!isAuthenticated) {
    zurück <div>Bitte melden Sie sich an, um Ihr Profil anzuzeigen.</div>;
  }

  zurückkehren (
    <div>
      {user?.picture &&
        <img src={user.picture} alt="Profilbild"
      )}
      <h2>Hallo {Benutzer?.Name}</h2>
      <p>E-Mail: {user?.email}</p>
      <p>Anmeldemethode: {user?.sub?.split('|')[0]}</p>
      <p>Zugriffstoken: {accessToken}</p>
    </div>
  );
};

Standardprofil exportieren;

Hier ist mein Problem: Nachdem ich mich mit dem Auth0-Protokoll angemeldet habe, ändert sich die Schaltfläche Anmelden und Abmelden nicht. Erste. Es öffnet sich und geht zum Auth0-Dialogfeld. Jedoch. Nachdem ich mich mit meinem Google-Konto angemeldet habe. Dann steht auf dem Button immer noch „Anmelden“. Das bedeutet, dass es nie zu einer Anmeldung kommt. Ich weiß wirklich nicht, was ich tun soll. Hier sind die Auth0-Konfigurationseinstellungen, die ich habe.

Wie oben erklärt

Answer 1

我通过使用loginWithPopup而不是loginredirect解决了这个问题。我也使用了该链接。

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

我没有使用window.location.origin。但我在这部分代码中使用了地址。