Por alguna razón, cuando se usa cacheLocation='localstorage' para Auth0, una actualización de página en nuestra aplicación hace que se realice una llamada dos veces...
Sin almacenamiento local funciona bien...
Usamos almacenamiento local cuando ejecutamos pruebas de Cypress, ya que la redirección de página al iniciar sesión no funciona sin él.
La duplicación no ocurre cuando se inicia sesión por primera vez, solo en la página siguiente se actualiza cuando se inicia sesión. Al eliminar el comentario en el siguiente código, se duplica la llamada como en la primera captura de pantalla...
return ( <Auth0Provider domain={process.env...} clientId={process.env...} redirectUri={ typeof window !== 'undefined' ? window.location.origin : `http://localhost:3000` } onRedirectCallback={onRedirectCallback} audience={process.env...} //cacheLocation='localstorage' > <UserInfoProvider> <PubSubProvider> <StackedLayout> <Component {...pageProps} /> </StackedLayout> </PubSubProvider> </UserInfoProvider> </Auth0Provider> )Editar: a continuación se muestra un fragmento relevante del código de la página...
let [searchState, setSearchState] = useState() const router = useRouter() const [data, setData] = useState() const [error, setError] = useState() const [references, setReferences] = useState({}) const {getAccessTokenSilently} = useAuth0() useEffect(() => { const fetchData = async () => { setData(null) setError(null) const accessToken = await getAccessTokenSilently() const res = await fetch( `${props.apiBaseHref}?${new URLSearchParams(props.query).toString()}`, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` } } ) if (!res.ok) { setError('some error') } else { setData(await (res.json())) } } setSearchState({ ...props.query }) fetchData() }, [props.apiBaseHref, props.query, getAccessTokenSilently])