fix: #1610 refactor authentication handling and session management #1627
Conversation
…-refactor-authentication-handling-and-session-management
| }; | ||
|
|
||
| // Export the ref-wrapped state for use across components | ||
| export const authState = ref<AuthState>(currentAuthState); |
There was a problem hiding this comment.
Do you still like to "export" the state If your intention is not giving developers to direct access to this state?
There was a problem hiding this comment.
The modularization of authState was initially introduced to solve the issue where the authentication state (authState.value) was not being retained or properly updated after a refresh. By creating a separate module to handle the authState as a ref, it ensures that:
- The authentication state persists across components.
- The state is reactive and updates correctly in Vue’s reactivity system.
- Components using the authState can reflect the current authentication status without needing to manage it independently.
There was a problem hiding this comment.
Sorry, maybe I did not state my questions clearly. I understand the usage you build; my question was maybe you would like to have a getter/setter to enforce other component does not directly use the state and only go through setter to modify the state change; if that's the case, maybe there is no need to export it. But it is fine to export it, I was just wondering if that's the intention.
| const logout = async () => { | ||
| await Auth.signOut(); | ||
| stopSilentRefresh(); | ||
| authState.value = reactive<AuthState>({ |
There was a problem hiding this comment.
Something a bit odd, you can directly setting the "authSate.value" with the object you need that I guess vue ref will reflect the change, or is it not? why wrapping into another 'reactive' and not 'ref'?
There was a problem hiding this comment.
The reason we wrap the state in reactive is due to the fact that the authState is exposed as readonly to external components through the AuthProvider. Since it’s made readonly, we can’t directly modify it from outside, ensuring that no external mutation happens accidentally. When logging out, we create a new reactive state internally to bypass the readonly restriction and properly update the state. So while Vue does reflect changes through ref, the readonly wrapper necessitates this approach for safe mutation management.
There was a problem hiding this comment.
Thanks. If after you experiment direct assign object does not work, I only wonder if wrapping in ref() is the suitable one not reactive() (but maybe they have no conflict..).
|
This PR only addresses the login flow and auth state.
Some components are broken, please only test out the log in and log out flow.
It's a good idea to clear out the localstorage of this app before testing