Auth0 登录和注销配置文件不起作用。反应打字稿
P粉349222772
2023-09-03 10:57:28
<p>我对 Auth0 有疑问。登录。和注销。使用反应打字稿。</p>
<p>这里位于 Index.tsx 中。</p>
<pre class="brush:php;toolbar:false;">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>
);</pre>
<p>身份验证配置中给出了一些代码。</p>
<p>现在我有一个登录或注销按钮。</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 } });
};
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;</pre>
<p>还有。我检索用户信息以显示。</p>
<pre class="brush:php;toolbar:false;">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;</pre>
<h1><strong>这是我的问题</strong>：在我登录 Auth0 协议后，<strong>登录注销按钮没有改变</strong>。第一的。它打开并转到 auth0 对话框。然而。使用我的谷歌帐户登录后。然后按钮仍然显示“登录”。 <strong>这意味着它永远不会登录</strong>。我真的不知道该怎么办。这是我拥有的 auth0 配置设置。</h1>
<p>上面已经解释了</p>
我通过使用loginWithPopup而不是loginredirect解决了这个问题。我也使用了该链接。
authorizationParams={{ redirect_uri: 'mysiteadress.com/home' }}我没有使用window.location.origin。但我在这部分代码中使用了地址。