My AuthContext works for a while, and shows the displayname, then i get this error once the page refresh

Question

Using Firebase 9: When i comment out the user.displayname, no errors. When i uncomment, it will show the displayName in the Navbar, however when i refresh the page or click away i will get the following errors below

TypeError: Cannot read properties of null (reading 'displayName')

src/components/Navbar.js:13
  10 | return (
  11 |   <nav>
  12 |     <h1>My Reading List</h1>
> 13 |     <p>{user.displayName}</p>
     | ^  14 |     <ul>
  15 |       <li>
  16 |         <Link to="/">Home</Link>
(anonymous function)
src/context/AuthContext.js:28
  25 | 
  26 | useEffect(() => {
  27 |   const unsub = onAuthStateChanged(auth, (user) => {
> 28 |     dispatch({ type: "AUTH_IS_READY", payload: user });
     | ^  29 |     unsub();
  30 |   });
  31 | }, []);
 514 | _assert(promise, this, AuthErrorCode.INTERNAL_ERROR);
  515 | // The callback needs to be called asynchronously per the spec.
  516 | // eslint-disable-next-line @typescript-eslint/no-floating-promises
> 517 | promise.then(() => cb(this.currentUser));
      | ^  518 | 
  519 | if (typeof nextOrObserver === 'function') {
  520 |   return subscription.addObserver(nextOrObserver, error, completed)```

Answer 1

I realised that the error was coming due to authentication state in route guarding. When you apply route guarding, make sure you set your permissions correctly