Auth0 不会在 email/password 的页面刷新时保持登录
Auth0 does not persist login on page refresh for email/password
我使用 Auth0 作为我使用 React 的 SPA 的身份验证提供程序。我关注了他们博客中的 Auth0 react tutorial and this more detailed tutorial。
我目前只使用 email/password 身份验证。并且身份验证按预期工作 login/logout、检索用户信息等
但是,当我刷新页面时,useAuth0
中的 isAuthenticated
值总是 returns 错误。即使在 isLoading
解析为 true 之后,我也必须重新登录。
奇怪的是,这种行为不会发生在 Chrome 或 Firefox 上。它在 Brave 和 Safari 上失败。
我在 Auth0(另一个有类似问题的人)的论坛 post 上注意到 Auth0Provider
应该使用 prompte=none
进行 authorize
调用,并且这是。它还 returns 在页面加载后不久成功 202
(但不会将 isAuthenticated
更改为 true
)。此调用还设置了一个 cookie auth0.is.authenticated=true
.
authorize?client_id=VALUE&redirect_uri=VALUE&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=VALUE&nonce=VALUE&code_challenge=VALUE&code_challenge_method=S256&prompt=none&auth0Client=VALUE
这是我检查授权状态的路线。按照 Auth0 教程中的建议,此组件包含在 Auth0ProviderWithHistory
代码中。
export default function Routes() {
const { isLoading, isAuthenticated } = useAuth0()
const getDashboard = () => {
//determine which dashboard to return
}
if (isLoading) return <p>Loading...</p>
if (isAuthenticated) {
return (
<Suspense fallback={<p>loading...</p>}>
<Switch>
<Route exact path="/">
{getDashboard()}
</Route>
<Route path="/customer/:customerId">
<Customer />
</Route>
<Route>
<NotFound />
</Route>
</Switch>
</Suspense>
)
}
return <SignInAndRegister />
}
我注意到当我重新加载页面并调用 loginWithRedirect
函数时,我没有被重定向到通用登录页面,而是有两个标记调用(POST 和 OPTIONS)。 POST 呼叫响应具有以下详细信息,我是否应该以某种方式捕获它并保存它们以重新使用它们登录?
access_token: "VALUE"
expires_in: 86400
id_token: "VALUE"
scope: "openid profile email"
token_type: "Bearer"
作为一项实验,我在 Auth0 仪表板中应用程序的“快速启动”部分下载了 React 示例,以查看该行为是否已复制到那里。确实如此。
我的印象是 Auth0Provider
应该自动处理静默身份验证,不是这样吗?
与 auth0-react
npm 包一起使用的选项不多,所以我不确定接下来要尝试什么。唯一可用的功能是:
getAccessTokenSilently: ƒ (opts)
getAccessTokenWithPopup: ƒ (opts)
getIdTokenClaims: ƒ (opts)
isAuthenticated: false
isLoading: true
loginWithPopup: ƒ (opts)
loginWithRedirect: ƒ (opts)
如果这不可能,看来我可能必须迁移到 @auth0/auth0-spa-js
SDK。
问题是 Brave 和 Safari 都使用了智能跟踪预防 (ITP),这阻止了静默身份验证的工作。
对我有用的解决方案是启用旋转刷新令牌(通过 Auth0 仪表板)并向 Auth0 提供程序提供额外的道具。
要添加的两个新道具是:useRefreshTokens={true}
和 cacheLocation="localstorage"
。
<Auth0Provider
domain={process.env.REACT_APP_AUTH0_DOMAIN}
clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
useRefreshTokens={true}
cacheLocation="localstorage"
>
{children}
</Auth0Provider>
以下是官方文档,可了解有关轮换刷新令牌的更多信息:https://auth0.com/docs/tokens/refresh-tokens
我使用 Auth0 作为我使用 React 的 SPA 的身份验证提供程序。我关注了他们博客中的 Auth0 react tutorial and this more detailed tutorial。
我目前只使用 email/password 身份验证。并且身份验证按预期工作 login/logout、检索用户信息等
但是,当我刷新页面时,useAuth0
中的 isAuthenticated
值总是 returns 错误。即使在 isLoading
解析为 true 之后,我也必须重新登录。
奇怪的是,这种行为不会发生在 Chrome 或 Firefox 上。它在 Brave 和 Safari 上失败。
我在 Auth0(另一个有类似问题的人)的论坛 post 上注意到 Auth0Provider
应该使用 prompte=none
进行 authorize
调用,并且这是。它还 returns 在页面加载后不久成功 202
(但不会将 isAuthenticated
更改为 true
)。此调用还设置了一个 cookie auth0.is.authenticated=true
.
authorize?client_id=VALUE&redirect_uri=VALUE&scope=openid%20profile%20email&response_type=code&response_mode=web_message&state=VALUE&nonce=VALUE&code_challenge=VALUE&code_challenge_method=S256&prompt=none&auth0Client=VALUE
这是我检查授权状态的路线。按照 Auth0 教程中的建议,此组件包含在 Auth0ProviderWithHistory
代码中。
export default function Routes() {
const { isLoading, isAuthenticated } = useAuth0()
const getDashboard = () => {
//determine which dashboard to return
}
if (isLoading) return <p>Loading...</p>
if (isAuthenticated) {
return (
<Suspense fallback={<p>loading...</p>}>
<Switch>
<Route exact path="/">
{getDashboard()}
</Route>
<Route path="/customer/:customerId">
<Customer />
</Route>
<Route>
<NotFound />
</Route>
</Switch>
</Suspense>
)
}
return <SignInAndRegister />
}
我注意到当我重新加载页面并调用 loginWithRedirect
函数时,我没有被重定向到通用登录页面,而是有两个标记调用(POST 和 OPTIONS)。 POST 呼叫响应具有以下详细信息,我是否应该以某种方式捕获它并保存它们以重新使用它们登录?
access_token: "VALUE"
expires_in: 86400
id_token: "VALUE"
scope: "openid profile email"
token_type: "Bearer"
作为一项实验,我在 Auth0 仪表板中应用程序的“快速启动”部分下载了 React 示例,以查看该行为是否已复制到那里。确实如此。
我的印象是 Auth0Provider
应该自动处理静默身份验证,不是这样吗?
与 auth0-react
npm 包一起使用的选项不多,所以我不确定接下来要尝试什么。唯一可用的功能是:
getAccessTokenSilently: ƒ (opts)
getAccessTokenWithPopup: ƒ (opts)
getIdTokenClaims: ƒ (opts)
isAuthenticated: false
isLoading: true
loginWithPopup: ƒ (opts)
loginWithRedirect: ƒ (opts)
如果这不可能,看来我可能必须迁移到 @auth0/auth0-spa-js
SDK。
问题是 Brave 和 Safari 都使用了智能跟踪预防 (ITP),这阻止了静默身份验证的工作。
对我有用的解决方案是启用旋转刷新令牌(通过 Auth0 仪表板)并向 Auth0 提供程序提供额外的道具。
要添加的两个新道具是:useRefreshTokens={true}
和 cacheLocation="localstorage"
。
<Auth0Provider
domain={process.env.REACT_APP_AUTH0_DOMAIN}
clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
useRefreshTokens={true}
cacheLocation="localstorage"
>
{children}
</Auth0Provider>
以下是官方文档,可了解有关轮换刷新令牌的更多信息:https://auth0.com/docs/tokens/refresh-tokens