iOS 无法访问受保护的反应路线

Question

使用 Auth0 成功验证后，我无法导航到受保护的路由（相反，我被重定向回 LandingPage - 控制台日志中没有出现错误）。

此问题仅在 iOS 上出现（Chrome 和 Safari 均如此！）

我正在使用BrowserRouter
chrome://inspect 不产生日志
托管在 Netflify 上（包括一个 /public/_redirects 文件）
当我在验证后检查 iOS 上的 URL 时，我注意到 URL 包括 https://my-domain/?code=...&state=... 但是没有发生重定向。
当我通过身份验证后手动转到https://my-domain/dashboard时，我仍然无法导航到此路由。
在 Auth0 中，我允许回调 URLs：http://my-site.com 和 http://my-site.com/dashboard。

路线文件：

import { Routes, Route, Outlet, Link } from 'react-router-dom'
import { useAuth0, withAuthenticationRequired } from '@auth0/auth0-react'
import { Header, UnauthenticatedHeader, Loader } from '../components'
import { LandingPage, Dashboard, Profile } from '../pages'
import { Container } from 'react-bootstrap'

const ProtectedComponent = ({ component, ...propsForComponent}) => {
  const Cp = withAuthenticationRequired(component);
  return <Container>
    <Cp {...propsForComponent} />
  </Container>
};

export default function Router() {

  const { isLoading, isAuthenticated } = useAuth0();
  return (
    <Routes>
      {
        (isLoading) 
        ? <Route path="*" element={<Loader />} /> 
        : <Route path="/" element={
            <>
              {
                (!isAuthenticated)
                ? <UnauthenticatedHeader />
                : <Header />
              }
              <Outlet />
            </>
          }>
            {/* Unauthenticated */}
            <Route index element={<LandingPage />} />
            
            {/* Authenticated */}
            <Route path="dashboard" element={<ProtectedComponent component={Dashboard} />} />
            <Route path="profile" element={<ProtectedComponent component={Profile} />} />
          </Route>
      }

      {/* catch-all */}
      <Route path="*" element={<NoMatch />} />
    </Routes>
  );
}

function NoMatch() {
  return (
    <div>
      <h2>Page not found.</h2>
      <p>
        <Link to="/">Go to the home page</Link>
      </p>
    </div>
  )
}

我的LandingPage组件：

import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuth0 } from '@auth0/auth0-react'

export default function LandingPage() {
  const { loginWithRedirect, isAuthenticated } = useAuth0()
  const navigate = useNavigate()

  useEffect(() => {
    if (isAuthenticated) {
      return navigate('dashboard')
    }
  }, [isAuthenticated, navigate])

  return (
    <div>
      <a onClick={() => loginWithRedirect()}>
        Create FREE Account
      </a>
    </div>
  )
}

任何帮助将不胜感激！

Answer 1

经过一番推论，这原来是 Safari 中的一个已知问题，与 react-router 无关。在我的案例中，这个问题也影响了 Chrome： https://auth0.com/docs/troubleshoot/authentication-issues/renew-tokens-when-using-safari

在我的应用程序的其他地方（在 Apollo 包装器中），我正在使用 getAccessTokenSilently().

获取访问令牌

验证 iOS 上的问题：

设置 > Chrome：启用“允许 Cross-Website 跟踪”；或
设置 > Safari：禁用“阻止 Cross-Site 跟踪”

在浏览器中，清除缓存 / 并重新加载。静默身份验证现在应该可以工作了。

修复：

    <Auth0Provider
      ...
      useRefreshTokens={true} // <-- Added this
    >

在 Auth0 设置中：

启用Refresh Token Rotation
设置 Reuse Interval 个 3。

iOS 无法访问受保护的反应路线

iOS unable to access protected react routes

ios

reactjs

react-router

auth0