Task#60 Navbar bugs¶
The navbar had the following bugs in the second spring prototype * Shows that the user isn't authenticated on refresh or page change * No redirection when clicking login with an authenticated user * The navbar looks awkward on mobile version
What needed to be done¶
The navbar authentication bug turned out to be a problem with how looking for the authentication hook is handled in firebase hooks, attaching a listener to the observable object solved it for the most part.
However, another bug appeared where the observer wouldn't destroy itself so creating a custom lifecycle for it and manually launching useEffect on every component render to check whether the user was authenticated or not to choose how the navbar will be rendered.
Turned out the firebase hooks have a well known bugs when handling a local authentication persistence, so the authenticated user is automatically logged out on refresh or tab switch, even if choosing the persistence type to be Local instead of session based.
As a current workaround the navbar has been elevated to be above the reactrouter and made use of Links instead of navlinks which will stop the page from refreshing when switching the page but the problem still persists when manually refreshing the page
What has been done¶
- Elevated navbar position in App
- Solved the isAuth hook in react problem
- Created a manual lifecycle for the listener to unsubscribe on
- Minimally changed the mobile navbar to be stacked on top of each other instead of stacking word to word
What still needs to be done¶
- Manually handling the authentication persistence locally in the browser
- Possibly switching away from firebase authentication and using normal hooks to steer away from firebase-tools bugs
- Look for a better mobile navbar look
Decisions to take¶
- Switching the whole navbar component out with another one and rewriting the hooks
Total work time on this component¶
5+ Days