[SOLVED] How can the browser show an incorrect URL?

How can the browser show an incorrect URL?

I have a Vue app that uses Auth0. I'm getting this sequence of events:

User visits https://example.com/myapp/dev/?myparam, clicks login
User logs in at Auth0 login page
Browser redirects to original page, now logged in, but url shown is https://example.com/myapp/

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?

Solution

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()}`,
        ]);
      },
    });