Redirecting from Loader to replace current URL

[sazzer]

I'm migrating some code to use a loader instead of a wrapper component and useEffect to handle authentication callbacks. Part of this involves redirecting the user back to the route that they were on when they started authenticating - so that it doesn't disrupt their flow.

All of that works fine, but I've noticed that when using redirect instead of useNavigate then there's no way to replace the current URL in the history.

i.e. what I had before was:

    navigate(sessionState.currentUri, {
      replace: true
    });

What I've got now in my loader is:

return redirect(sessionState.currentUri);

And you end up on the correct page just fine, but the callback URL is in the history meaning that the back button doesn't work as desired.

Is there any way of doing this from within a loader?

Cheers

[phoneticallySAARTHaK]

Do you want the back button to not show the authentication pages?
Although you probably should not, but Maybe you can manually update the browser history stack

[sazzer]

Almost, yes.

Right now, the flow is:

• Open http://example.com/somePage
• Click "Log In" - redirected to https://example.auth.eu-west-1.amazoncognito.com/login
  • Possibly some other redirects in here from Cognito.
• Authenticate - redirected to http://example.com/callback?code=xxx
  • Possibly some other redirects in here from Cognito.
• Loaded processes callback and redirects to http://example.com/somePage

At the moment, the end result of that is that the history will contain 4 entries in it. The 1st and 4th are identical, and the 2nd and 3rd are useless:

1. http://example.com/somePage
2. https://example.auth.eu-west-1.amazoncognito.com/login
3. http://example.com/callback?code=xxx
4. http://example.com/somePage

The absolute ideal would be for the history to have one entry in it, but I know that's almost certainly not possible:

1. http://example.com/somePage

However, when I was using a wrapper component I was able to have the http://example.com/callback entry be replaced with http://example.com/somePage which is at least a bit cleaner:

1. http://example.com/somePage
2. https://example.auth.eu-west-1.amazoncognito.com/login
3. http://example.com/somePage

I can't see how to do that inside a loader with redirect().

[danielsonz]

Good question. I'm stuck on this, too.

[AB1908]

Did anyone ever figure this out? Seems the team abstracted away the history stack in v6 whereas I'd much rather roll my own history stack for my use case. I've been stuck on this a few months I think.

[phoneticallySAARTHaK]

I've realised that for most use cases redirect in loaders or actions works as expected, i.e. it doesn't create a new history entry

[AB1908]

Good to know, thanks. It does solve one problem for me. However, my use case needs me to skip certain entries in the history stack depending on the page I'm on so I'm still stuck I guess. The replace param doesn't cut it for me.

[phoneticallySAARTHaK]

AFAIK, it's not possible with the browser history stack

[AB1908]

Yeah no worries, I can live with it for now since it's a small pet project. Thanks for taking a look regardless.

[Brendonovich]

Would be great if this was supported, we're using memory routers to hold the state of tabs, and when creating a new tab we begin at /, since the logic to get to the default page is defined in loaders using redirects, which currently only support pushing to the history stack.
We're also using a custom memory router that exposes history so that history.index can determine whether the navigation buttons should be enabled.
redirect() being push-only means that the back button will always be enabled, since going from / to the right route automatically counts as one navigation.

[Brendonovich]

I've opened a PR for this: #11100