extended-salmon

Refresh Route on Auth Change

Hello, I am moving from next js to Tanstack router and it has been a pleasure to work with, I am wondering if someone could help me with this example though, for some reason when I am trying to login I have to do the action twice, i thought because of the way the context work it would update everywhere, https://stackblitz.com/edit/tanstack-router-gqbxfs?file=src%2Froutes%2F_auth%2Fsignin.tsx you can see in the example here, when i try to log in, i have to do it twice and then only the second time it redirects me to authenticated route and viceversa am i missing something ?

Enyel Sequeira

StackBlitz

Auth Refresh router? - StackBlitz

Run official live example code for Router Authenticated Routes, created by Tanstack on StackBlitz

13 Replies

extended-salmonOP•16mo ago

i noticed in the example you would have somehting like this

      // This is just a hack being used to wait for the auth state to update
      // in a real app, you'd want to use a more robust solution
      await sleep(1)

      // This is just a hack being used to wait for the auth state to update
      // in a real app, you'd want to use a more robust solution
      await sleep(1)

extended-salmon•16mo ago

I've noticed the same problem as you but I've been working with tanstack/router for 3 months and it's happened since I updated the version from 1.29.2 to 1.34.9 so maybe it's an error I don't know :man_shrugging :
Anyway, I haven't tried your example yet but it looks like it might solve the problem because I'm 100% sure that the application context is not synchronized live with the router context. You've said that we need to use a more robust solution, so do you have any ideas for solving this problem?

extended-salmonOP•16mo ago

Hey so the hack that I found was in the example repo, not really sure what the alternative is to be honest. I would have thought that the context would be synchronized as well, so not sure why thats not the case, probably we are missing something @TkDodo 🔮 sorry for tagging you dirrectly, but would you have any alternative solution here?

extended-salmon•16mo ago

Good idea to ping @Tanner Linsley Hope you can find a moment to reply 💪 I think it’s a mistake because the contexts were sync in live before my upgrade or maybe we are missing something 🥲

extended-salmonOP•16mo ago

Bump?

optimistic-gold•16mo ago

please try to make the example more minimal. setSessionKey writes to react context which is somehow managed by react-cookie which I can't see how it works. If its done with react state, it will only schedule an update so it won't be synchronously available. flushSync can help but getting a more minimal example would be good

extended-salmonOP•16mo ago

hey @TkDodo 🔮 apologies about that, i've set up something just using a useLocalstorage that behaves like useState, but also below is comment a version with just useState as suggested, adn you can see that you have to double click the action, you can see that with the hack mentioned about sleep works fine, but again, not sure if thats really the way to handle this

extended-salmon•16mo ago

I've just gone back to the example doc and see that it's changed a bit since a certain version, I'll update it and let you know if it solves the problem. I see there's still the solution sleep()

ratty-blush•16mo ago

Curious, What changed in the docs? Could you link there?

extended-salmonOP•16mo ago

Same, curious here let me know if it works

foreign-sapphire•16mo ago

I had to flushSync while updating the user data, after this, i had to await the router.invalidate() and things started working as expected, but not sure if this is the best solution

extended-salmon•16mo ago

I can’t sorry because I don’t remember and same with the code example it changed but I can’t say what exactly

extended-salmonOP•16mo ago

Do you have an example of how you fixed this?

Gaming

Programming

Refresh Route on Auth Change

Did you find this page helpful?