Auth0 不会在电子邮件/密码的页面刷新时保持登录

Posted 2023-03-08

【中文标题】Auth0 不会在电子邮件/密码的页面刷新时保持登录

【英文标题】：Auth0 does not persist login on page refresh for email/password

【发布时间】：2020-12-11 17:29:24

【问题描述】：

我使用 Auth0 作为我使用 React 的 SPA 的身份验证提供程序。我关注了他们博客中的Auth0 react tutorial 和this more detailed tutorial。

我目前只使用电子邮件/密码身份验证。并且身份验证在登录/注销、检索用户信息等方面按预期工作。

但是，当我刷新页面时，useAuth0 中的 isAuthenticated 值始终返回 false。即使isLoading 解析为 true，我也必须重新登录。

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

我在 Auth0（另一个有类似问题的人）的论坛帖子中注意到，Auth0Provider 应该使用prompte=none 进行authorize 调用，并且确实如此。它还在页面加载后不久返回成功的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 仪表板的应用程序的“快速启动”部分下载了反应示例，​​以查看该行为是否在此处复制。确实如此。

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

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

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

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

【问题讨论】：

好吧，你必须在每次重新加载时验证用户是否已经通过身份验证，然后让用户转到相同的路线，否则将他退出。我希望您将一些与身份验证相关的信息保存在 cookie 或本地存储中。

你检查你的 auth0 配置了吗？看来你的配置不对。

有具体的配置要检查吗？该应用程序可以登录等，所以我知道domain、clientId、回调 URL、注销 URL 和 Web 起源是正确的，因为如果登录/注销正常流程错误，则会中断。

嗨@Charlewis 我想这是一个悬而未决的问题。参考：github.com/auth0-samples/auth0-react-samples/issues/192

这些问题与我遇到的略有不同，我在 repo 上创建了一个问题 - github.com/auth0/auth0-react/issues/101

【参考方案1】：

问题在于 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

【讨论】：

是的，这也解决了我的问题。对于其他偶然发现的人，这里是这个github.com/auth0/auth0-react/issues/101的github问题@

随着浏览器反跟踪功能的增长，您会发现合法使用（例如 Auth0 创建的 cookie）被剥夺了，因为它们可能看起来是跟踪 cookie。轮换刷新令牌通过将刷新令牌存储在本地存储或不受 ITP 实施的控制的内存中来规避此问题。

值得注意的是，这也解决了 Nextjs 的静态站点生成中的类似问题，即页面更改后身份验证状态不存在。