Auth0 登入和登出設定檔不起作用。反應打字稿

Question

我對 Auth0 有疑問。登入.和註銷。使用反應打字稿。

這裡位於 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 />
        </Provider>
      </React.StrictMode>
  </Auth0Provider>
);

在身份驗證設定中給了一些程式碼。

現在我有一個登入或登出按鈕。

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

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

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

  return (
    <button
      style={{
        color: 'white',
        backgroundColor: '#142952',
        marginRight: '4rem',
        fontFamily: 'Consolas',
        border: 'none',
        borderRadius: '3px',
        width: '110px',
        height: '40px'
      }}
      onClick={isAuthenticated ? handleLogout : handleLogin}
    >
      {isAuthenticated ? 'Logout' : 'Login'}
    </button>
  );
};

export default AuthButton;

還有。我檢索使用者資訊以顯示。

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

  useEffect(() => {
    const getAccessToken = async () => {
      try {
        const token = await getAccessTokenSilently();
        setAccessToken(token);
      } catch (error) {
        console.error(error);
      }
    };

    if (isAuthenticated) {
      getAccessToken();
      console.log("authenticated")
    }
  }, [isAuthenticated, getAccessTokenSilently]);

  if (!isAuthenticated) {
    return <div>Please login to view your profile.</div>;
  }

  return (
    <div>
      {user?.picture && (
        <img src={user.picture} alt="Profile Picture" />
      )}
      <h2>Hello {user?.name}</h2>
      <p>Email: {user?.email}</p>
      <p>Login Method: {user?.sub?.split('|')[0]}</p>
      <p>Access Token: {accessToken}</p>
    </div>
  );
};

export default Profile;

這是我的問題：在我登入 Auth0 協定後，登入登出按鈕沒有改變。第一的。它打開並轉到 auth0 對話框。然而。使用我的Google帳號登入後。然後按鈕仍然顯示“登入”。 這意味著它永遠不會登入。我真的不知道該怎麼辦。這是我擁有的 auth0 配置設定。

上面已經解釋

Answer 1

我透過使用loginWithPopup而不是loginredirect解決了這個問題。我也使用了該連結。

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

我沒有使用window.location.origin。但我在這部分程式碼中使用了地址。