[React] Preserve auth data between sessions?

[zfei]

It looks like the browser FiefAuthStorage sync's auth data to session storage whereas FiefReactAuthStorage only sync's them to a state (reducer).

Currently with client-side routing, the auth info works fine, but once I refresh the page, the state's gone. How do we preserve userinfo/tokeninfo between sessions then?

[fief-bailiff[bot]]

Hail, @zfei 👋 Welcome to Fief's kingdom!

Our team will get back to you very soon to help.

In the meantime, take a minute to star our repository ⭐️

Farewell!

[frankie567]

Hello @zfei 👋

That's indeed a limitation of our React implementation, and maybe we should revisit this to store it also in storage. I'll add this to the backlog.

That said, when accessing a private page, the user shall be redirected to Fief's login page and, as we store a session on our side, they should be automatically redirected to your app again. So, this should be quite fast and transparent for them.

[zfei]

Thanks for the reply. Thing is the UX could be a bit abrupt here. In my case, it's a section of the page that's protected, instead of the entire page. When the user's not authenticated, the protected section would just render a banner suggesting the user to sign up/login if they wish to.

[frankie567]

Yeah, I can see the problem. I'll look at this ASAP!

[frankie567]

This shall be solved in the latest version of the JS SDK: https://github.com/fief-dev/fief-js/releases/tag/v0.12.1

[zfei]

This is awesome, thanks!