Auth0 ログイン プロファイルとログアウト プロファイルが機能しません。タイプスクリプトに反応する
<p>Auth0 について質問があります。ログイン。そしてログアウトします。反応タイプスクリプトを使用します。 </p>
<p>これは Index.tsx にあります。 </p>
<pre class="brush:php;toolbar:false;">root.render(
<Auth0プロバイダー
ドメイン= "somecode.us.auth0.com"
clientId=「何らかのコード」
authorizationParams={{
redirect_uri: window.location.origin
}}
>
<React.StrictMode>
<プロバイダストア={ストア}>
<CssBaseline />
<アプリ/>
</プロバイダー>
</React.StrictMode>
</Auth0Provider>
);</pre>
<p>認証構成にいくつかのコードが指定されています。 </p>
<p>ログイン ボタンまたはログアウト ボタンが表示されました。 </p>
<pre class="brush:php;toolbar:false;">const AuthButton = () => {
const { isAuthenticated、loginWithRedirect、ログアウト } = useAuth0();
const handleLogin = () => {
loginWithRedirect();
};
const handleLogout = () => {
logout({ logoutParams: { returnTo: window.location.origin } });
};
戻る （
<ボタン
スタイル={{
色: '白'、
背景色: '#142952',
marginRight: '4rem',
フォントファミリー: 'Consolas'、
境界線: 'なし'、
境界半径: '3px',
幅: '110px',
高さ: '40px'
}}
onClick={isAuthenticated ? handleLogout : handleLogin}
>
{isAuthenticated ? 'ログアウト' : 'ログイン'}
</ボタン>
);
};
デフォルトの AuthButton;</pre> をエクスポートします。
<p>また。ユーザー情報を取得して表示します。 </p>
<pre class="brush:php;toolbar:false;">const Profile = () => {
const { ユーザー、isAuthenticated、getAccessTokenSilently } = useAuth0();
const [accessToken, setAccessToken] = useState('');
useEffect(() => {
const getAccessToken = async () => {
試す {
const token = await getAccessTokenSilently();
setAccessToken(トークン);
} キャッチ (エラー) {
コンソール.エラー(エラー);
}
};
if (isAuthenticated) {
getAccessToken();
console.log("認証済み")
}
}, [isAuthenticated, getAccessTokenSilently]);
if (!isAuthenticated) {
return <div>プロフィールを表示するにはログインしてください。</div>;
}
戻る （
<div>
{ユーザー?.写真&& (
<img src={user.picture} alt="プロフィール画像" />
)}
<h2>こんにちは {user?.name}</h2>
<p>メールアドレス: {user?.email}</p>
<p>ログイン方法: {user?.sub?.split('|')[0]}</p>
<p>アクセストークン: {accessToken}</p>
</div>
);
};
デフォルトのプロファイルをエクスポート;</pre>
<h1><strong>これが私の問題です</strong>: Auth0 プロトコルでログインした後、<strong>ログイン ログアウト ボタンが変化しません</strong>。初め。それが開き、auth0 ダイアログに進みます。しかし。 Google アカウントでログインした後。その後、ボタンには「ログイン」と表示されたままになります。
これは、決してログインしないことを意味します。本当にどうすればいいのか分かりません。ここに私が持っている auth0 構成設定があります。 </h1>
<p>上で説明しました</p>
