I have a Vue app that uses Auth0. I'm getting this sequence of events:
This final URL is incorrect - it's definitely not possible to resolve the page at the given URL. So how is this even possible?
And given the above: how can I access the original URL, particularly this part: dev/?myparam
?
Ok, so I mis-framed my question a bit. But:
There are JS functions that manipulate history, like window.history.replaceState()
and window.location.pushState()
. This can affect the currently shown URL. Browsers let you do this as long as you don't change the domain.
In this specific case, vue3-auth0
uses replaceState()
to update the URL after redirecting from a login page. It appears to be buggy and always rewrites it as /
even when it shouldn't. It is also trying to strip out URL parameters that Auth0 adds, notable code
and state
.
I ended up adding this hacky trap to catch it, and prevent it.
window.history.replaceState = new Proxy(window.history.replaceState, {
apply: (target, thisArg, argArray) => {
const search = new URLSearchParams(window.location.search);
search.delete('code');
search.delete('state');
return target.apply(thisArg, [
{},
'',
`${window.location.href.split('?')[0]}?${search.toString()}`,
]);
},
});