Erreur de cookie du même site sur localhost avec auth0
J'utilise auth0 pour implémenter l'authentification dans mon application react. J'utilise le hook useAuth0 () comme suit,
const { isAuthenticated, isLoading } = useAuth0();
J'ai également implémenté la connexion en utilisant
const { loginWithRedirect } = useAuth0();
.
.
.
<button onClick={() => loginWithRedirect()} />
Lorsque j'appuie sur le bouton, il redirige vers auth0 et je peux me connecter. Après la connexion, il redirige vers l'application et affiche les itinéraires connectés sans aucun problème. Le problème, cependant, c'est que lorsque j'apporte une modification à l'application, elle se recharge et la page de connexion me s'affiche à nouveau, bien que j'étais connecté. Dans l'onglet Problèmes de Chrome, ce message s'affiche.
Je ne suis pas en mesure de comprendre pourquoi cela ne fonctionne pas lors de l'actualisation, mais pourquoi cela fonctionne sur la redirection après la connexion, et j'essaie de trouver une solution depuis hier, mais pas de chance jusqu'à présent. Je suis tombé sur Trouver le cookie qui provoque l'avertissement SameSite de Chrome, qui est la question la plus proche que j'ai pu trouver, mais il ne semble pas donner de réponse appropriée sur la façon de le résoudre.
Réponses
Ce qui a fonctionné pour moi à la fin était une réponse à une autre question SO .
Voici le contenu,
Le problème était que Brave et Safari utilisaient tous deux la prévention intelligente du suivi (ITP), qui empêchait l'authentification silencieuse de fonctionner.
La solution qui a fonctionné pour moi était d'activer la rotation des jetons d'actualisation (via le tableau de bord Auth0) et de fournir des accessoires supplémentaires au fournisseur Auth0.
Les deux nouveaux accessoires à ajouter sont: useRefreshTokens={true}
et 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>
Voici la documentation officielle pour en savoir plus sur la rotation des jetons d'actualisation: https://auth0.com/docs/tokens/refresh-tokens
Et c'était le problème de github qui a résolu le problème https://github.com/auth0/auth0-react/issues/101