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呼叫，确实如此.页面加载后不久，它也会成功返回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"

作为一个实验，我将反应样本下载到了"Quick Start" 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屋！