auth0이있는 localhost의 Samesite 쿠키 오류

Aug 18 2020

내 반응 앱에서 인증을 구현하기 위해 auth0을 사용하고 있습니다. 다음과 같이 useAuth0 () 후크를 사용하고 있습니다.

const { isAuthenticated, isLoading } = useAuth0();

나는 또한 사용하여 로그인을 구현했습니다.

const { loginWithRedirect } = useAuth0();
.
.
.
<button onClick={() => loginWithRedirect()} />

버튼을 누르면 auth0으로 리디렉션되고 로그인 할 수 있습니다. 로그인 후 앱으로 다시 리디렉션되고 로그인 된 경로가 문제없이 표시됩니다. 그러나 문제는 앱을 변경하면 다시로드되고 로그인했지만 로그인 페이지가 다시 표시된다는 것입니다. Chrome 문제 탭에이 메시지가 표시됩니다.

새로 고침에서 작동하지 않는 이유를 알 수 없지만 로그인 후 리디렉션에서 작동하는 이유는 무엇이며 어제부터 해결책을 찾으려고했지만 지금까지는 운이 없습니다. 내가 찾을 수있는 가장 가까운 질문 인 Chrome의 SameSite 경고를 유발하는 쿠키 찾기를 발견했지만 해결 방법에 대한 적절한 대답을 제공하지 않는 것 같습니다.

답변

KennyJohnJacob Aug 28 2020 at 05:18

결국 나를 위해 일한 것은 또 다른 SO 질문 에 대한 대답이었습니다 .

내용은 다음과 같습니다.

문제는 Brave와 Safari가 모두 ITP (Intelligent Tracking Prevention)를 사용하여 자동 인증이 작동하지 않는다는 것입니다.

나를 위해 일한 솔루션은 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 문제였습니다. https://github.com/auth0/auth0-react/issues/101