How to call Auth.currentAuthenticatedUser() after login is made in another component?

I have AppBar component which I want to show currently logged in user. On the same page I have Profile component, which triggers login form. The problem is that they are not synched, obviously currentAuthenticatedUser inside AppBar is called before login is made and not called after, unless page is refreshed:

function AppBar() {
  const [user, setUser] = useState();
  useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then((u) => {
        setUser(u.username);
      });
  }, []);

  return <div>AppBar: {user}</div>
}

function Profile(props: any) {
    return <Authenticator>
      {({ user, signOut }: any) => {
        return <>
          <div>Profile: { user.username }</div>
          <button onClick={() => signOut()}>Sign Out</button>
          </>
      }}
    </Authenticator>
}

function App() {
  return <b><AppBar /><Profile /></b>
}

After login:

After page refresh:

How to display username in AppBar right after login without the need to refresh the page? Thanks!

You can achieve that functionality by either using local state or context

1. Local state:

setup your const [user, setUser] = useState(); hook on top of AppBar and Profile components. Then pass down user as prop on the AppBar component and pass down setUser on the Profile component, you would need to create an internal component inside Profile that would take this prop and then be rendered inside the Authenticator component.

2. Context:

It is a similar process as above but you need to use the React.createContext(<<context_data_here>>) syntax. I would suggest using this approach if your app need access to user on many components. If that is not the case using local state is recommended.

If you are not familiar with context I'd suggest watching this video

Solution borrowed from here

function AppBar() {
  const [signedUser, setSignedUser] = useState<{username: string}>();
  useEffect(() => {
    authListener();
  }, []);

  async function authListener() {
    Hub.listen("auth", (data) => {
      switch (data.payload.event) {
        case "signIn":
          return setSignedUser(data.payload.data);
        case "signOut":
          return setSignedUser(undefined);
      }
    });

    try {
      const user = await Auth.currentAuthenticatedUser();
      setSignedUser(user);
    } catch (err) {}
  }

  return <div>AppBar: {signedUser?.username}</div>
}