T
TanStack•2y ago
other-emerald

Login redirect not loading content after login again

I tried using 
navigate({ to: redirect });
navigate({ to: redirect });
but what happens it fails with 
An error occurred: Invariant failed: Attempting to navigate to external url with this.navigate!
An error occurred: Invariant failed: Attempting to navigate to external url with this.navigate!
when navigating to (search.redirect = http://localhost:5173/dashboard/calender). As i guess it only wants the relative path which makes sense. Then I tried using 
  React.useLayoutEffect(() => {
    if (auth.isAuth && search.redirect) {
      router.history.push(search.redirect);
    }
  }, [auth, search.redirect]);
  React.useLayoutEffect(() => {
    if (auth.isAuth && search.redirect) {
      router.history.push(search.redirect);
    }
  }, [auth, search.redirect]);
Which then does push the url, but doesn't actually seem to navigate and load the content. Only after a refresh. I guess i could just use the routes relative path when setting the search param or is it better to use the href ?
2 Replies
useful-bronze
useful-bronze•2y ago
Could you please provide a Stackblitz example for this? Since this often times is reliant on how you've got your specific authentication system set up. I'd also, not rely on a useEffect or useLayoutEffect for this, since you are then relying on conditions rather than a user-driven-event for triggering the navigation. Maybe check out the login page of the Authenticated Routes with Context example. Over there, I had to use flushSync to ensure that login was persisted to state before actually triggering a navigate because of React's batching works. https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes-context
React Router Authenticated Routes Context Example | TanStack Router...
An example showing how to implement Authenticated Routes Context in React Router
other-emerald
other-emeraldOP•2y ago
Sure, i am busy also trying to get the axios interceptor working with my http only cookie, but after lets say a forced logout. And logging in again, for some reason the router context with my axios instance doesnt seem to update. Still debugging to narrow down whats the problem. I'll be happy to share a mock implementation which I use for http only cookies with tanstack router. Being a little obnoxious so far though 😅

Did you find this page helpful?