Profil log masuk dan log keluar Auth0 tidak berfungsi. skrip taip bertindak balas

Question

Saya ada soalan tentang Auth0. Log masuk. dan logout. Menggunakan skrip taip tindak balas.

Ini ada dalam Index.tsx.

root.render(
  <Auth0Provider
        domain="somecode.us.auth0.com"
        clientId="somecode"
        authorizationParams={{
          redirect_uri: window.location.origin
        }}
      >
      <React.StrictMode>
        <Kedai pembekal={kedai}>
          <CssBaseline />
          <Apl />
        </Pembekal>
      </React.StrictMode>
  </Auth0Provider>
);</pra>
<p>Sesetengah kod diberikan dalam Konfigurasi Pengesahan. </p>
<p>Sekarang saya mempunyai butang log masuk atau log keluar. </p>
<pre class="brush:php;toolbar:false;">const AuthButton = () =>
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

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

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

  kembali (
    <butang
      gaya={{
        warna: 'putih',
        Warna latar belakang: '#142952',
        marginRight: '4rem',
        fontFamily: 'Consolas',
        sempadan: 'tiada',
        sempadanRadius: '3px',
        lebar: '110px',
        ketinggian: '40px'
      }}
      onClick={isAuthenticated ? handleLogout : handleLogin}
    >
      {isAuthenticated ? 'Logout' : 'Login'}
    </butang>
  );
};

eksport lalai AuthButton;

Juga. Saya mendapatkan semula maklumat pengguna untuk dipaparkan.

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

  useEffect(() => {
    const getAccessToken = async () =>
      cuba {
        token const = tunggu getAccessTokenSilently();
        setAccessToken(token);
      } tangkap (ralat) {
        console.error(error);
      }
    };

    jika (adalah Disahkan) {
      getAccessToken();
      console.log("disahkan")
    }
  }, [isAuthenticated, getAccessTokenSilently]);

  jika (!adalah Disahkan) {
    kembali <div>Sila log masuk untuk melihat profil anda.</div>;
  }

  kembali (
    <div>
      {pengguna?.gambar &&
        <img src={user.picture} alt="Gambar Profil"
      )}
      <h2>Helo {user?.name}</h2>
      <p>E-mel: {user?.email}</p>
      <p>Kaedah Log Masuk: {user?.sub?.split('|')[0]}</p>
      <p>Token Akses: {accessToken}</p>
    </div>
  );
};

eksport Profil lalai;

Inilah masalah saya: Selepas saya log masuk dengan protokol Auth0, butang Log Masuk tidak berubah. Pertama. Ia dibuka dan pergi ke dialog auth0. Namun begitu. Selepas log masuk dengan akaun Google saya. Kemudian butang masih mengatakan "Log Masuk". Ini bermakna ia tidak akan pernah log masuk. Saya benar-benar tidak tahu apa yang perlu dilakukan. Berikut ialah tetapan konfigurasi auth0 yang saya ada.

Seperti yang dijelaskan di atas

Answer 1

Saya menyelesaikan masalah ini dengan menggunakan loginWithPopup dan bukannya loginredirect. Saya juga menggunakan pautan ini.

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

Saya tidak menggunakan window.location.origin. Tetapi saya menggunakan alamat dalam bahagian kod ini.