Auth0 不会在页面刷新时为电子邮件/密码持续登录 [英] Auth0 does not persist login on page refresh for email/password

问题描述

我使用 Auth0 作为使用 React 的 SPA 的身份验证提供程序.我遵循了 Auth0 反应教程 和 这个更详细的教程来自他们的博客.

I am using Auth0 as my authentication provider for a SPA using React. I have followed the Auth0 react tutorial and this more detailed tutorial from their blog.

我目前只使用电子邮件/密码身份验证.并且身份验证按预期进行登录/注销，检索用户信息等.

I am currently just using just email/password authentication. And the authentication works as expected for login/logout, retrieving user info etc.

但是，当我刷新页面时，useAuth0 中的 isAuthenticated 值总是返回 false.即使在 isLoading 解析为 true 之后，我也必须重新登录.

However, when I refresh the page, the isAuthenticated value from the useAuth0 always returns false. Even after isLoading resolves to true, hence I have to log in again.

奇怪的是，这种行为在 Chrome 或 Firefox 上不会发生.它在 Brave 和 Safari 上失败.

This behaviour strangely does not occur on Chrome or Firefox. It fails on Brave and Safari.

我在 Auth0(另一个有类似问题的人)的论坛帖子中注意到 Auth0Provider 应该使用 prompte=none<进行 authorize 调用/code>，就是这样.它还在页面加载后不久返回成功的 202(但不会将 isAuthenticated 更改为 true).此调用还设置了一个 cookie auth0.is.authenticated=true.

I noticed in a forum post on Auth0 (another person with a similar problem) that the Auth0Provider should be doing a authorize call using prompte=none, and it is. It also returns a successful 202 shortly after the page loads (but doesn't change isAuthenticated to true). This call also sets a 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 代码中.

Here is my route that checks the auth state. This component is wrapped in the Auth0ProviderWithHistory code as suggested in the Auth0 tutorials.

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 调用响应具有以下详细信息，我应该以某种方式捕获它并保存它们以重新使用它们登录吗?

I have noticed when I reload the page, and call the loginWithRedirect function I am not redirected to the Universal Login page, instead there are two token calls (POST and OPTIONS). The POST call response has the following details, should I somehow capture this and saving them to reuse them to login?

access_token: "VALUE"
expires_in: 86400
id_token: "VALUE"
scope: "openid profile email"
token_type: "Bearer"

作为一个实验，我在快速入门"上下载了 react 示例.Auth0 仪表板中的应用程序部分，以查看行为是否在那里复制.原来如此.

As an experiment, I downloaded the react sample on the "Quick Start" section of an application in the Auth0 dashboard to see if the behaviour was replicated there. And it was.

我的印象是 Auth0Provider 应该自动处理静默身份验证，不是这样吗?

I had the impression that the Auth0Provider should be handling the silent authentication automagically, is this not the case?

auth0-react npm 包可以使用的选项不多，所以我不确定接下来要尝试什么.唯一可用的功能是:

There are not many options to use with auth0-react npm package, so I am not sure what to try next. The only available functions are:

getAccessTokenSilently: ƒ (opts)
getAccessTokenWithPopup: ƒ (opts)
getIdTokenClaims: ƒ (opts)
isAuthenticated: false
isLoading: true
loginWithPopup: ƒ (opts)
loginWithRedirect: ƒ (opts)

如果这不可能，我可能不得不迁移到 @auth0/auth0-spa-js SDK.

If this isn't possible, it looks like I might have to migrate to the @auth0/auth0-spa-js SDK.

推荐答案

问题是 Brave 和 Safari 都使用智能跟踪预防 (ITP)，这阻止了静默身份验证的工作.

The issue was that Brave and Safari both use Intelligent Tracking Prevention (ITP), which was preventing the silent authentication from working.

对我有用的解决方案是启用轮换刷新令牌(通过 Auth0 仪表板)并向 Auth0 提供程序提供额外的道具.

The solution that worked for me was to enable rotating refresh tokens (via the Auth0 dashboard) and providing additional props to the Auth0 provider.

要添加的两个新道具是:useRefreshTokens={true} 和 cacheLocation=localstorage".

The two new props to add are: useRefreshTokens={true} and 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

Here are the official docs to learn more about rotating refresh tokens: https://auth0.com/docs/tokens/refresh-tokens

这篇关于Auth0 不会在页面刷新时为电子邮件/密码持续登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！