Error de cookie de Samesite en localhost con auth0

Question

Estoy usando auth0 para implementar la autenticación en mi aplicación de reacción. Estoy usando el gancho useAuth0 () de la siguiente manera,

const { isAuthenticated, isLoading } = useAuth0();

También he implementado el inicio de sesión usando

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

Cuando presiono el botón, se redirige a auth0 y puedo iniciar sesión. Después de iniciar sesión, se redirige a la aplicación y muestra las rutas registradas sin ningún problema. Sin embargo, el problema es que cuando realizo algún cambio en la aplicación, se vuelve a cargar y se me presenta la página de inicio de sesión nuevamente, aunque inicié sesión. En la pestaña de problemas de Chrome, se muestra este mensaje.

No puedo entender por qué no funciona en la actualización, pero por qué funciona en la redirección después de iniciar sesión, y he estado tratando de encontrar una solución desde ayer, pero hasta ahora no he tenido suerte. Me encontré con Find the cookie que causa la advertencia de SameSite de Chrome, que es la pregunta más cercana que pude encontrar, pero no parece dar una respuesta adecuada sobre cómo resolverlo.

Answer 1

Lo que funcionó para mí al final fue una respuesta a otra pregunta SO .

Aquí está el contenido

El problema era que Brave y Safari usaban Intelligent Tracking Prevention (ITP), lo que impedía que funcionara la autenticación silenciosa.

La solución que funcionó para mí fue habilitar tokens de actualización rotativos (a través del panel de Auth0) y proporcionar accesorios adicionales al proveedor de Auth0.

Los dos nuevos accesorios para agregar son: useRefreshTokens={true}y 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>

Aquí están los documentos oficiales para obtener más información sobre la rotación de tokens de actualización: https://auth0.com/docs/tokens/refresh-tokens

Y este fue el problema de github que resolvió el problema https://github.com/auth0/auth0-react/issues/101