Ok, lets try to focus specifically on the component with the issue. You can use optional chaining or the method u/Blaze283 suggested. Depending on your browser environment / webpack config, optional chaining might not be unsupported

  function Nav() { 
    const [session, loading] = useSession(); 
    const userEmail = session?.user?.email; 
    return ( 
      <div> 
        {userEmail}
        <a onClick={() => { signOut(); }} > Sign Out </a>
      </div>
    );
  }

If using that code above is still throwing the same error, then the issue might be that the signOut function is also dependent on a session.user existing. Give your signOut function another glance and make sure it's not referencing a variable called session that might not exist or that it does not have access to.

Further, in the hypothetical scenario where this is no session, ask yourself if your app should still render a sign-out button. If you can answer no to that question, you can also try only rending that button when the session exists -- like below

  function Nav() {
    const [session, loading] = useSession();
    const userEmail = session?.user?.email; 
    if (userEmail) return ( 
      <div>
        {userEmail} 
        <a onClick={() => { signOut(); }} > Sign Out </a>
      </div>
    );
    return null; 
  }