How to signOut in a child component

[utopianf]

I found the example code in the document and it works great.

<Authenticator>
  {({ signOut, user }) => (
    <main>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </main>
  )}
</Authenticator>

Next, I want to use signOut in a layout component, so I tried the code below, but nothing happened and the console.log(user) shows my account detail.

import { useAuthenticator } from "@aws-amplify/ui-react"

export const Navbar = () => {

  const { signOut, user } = useAuthenticator()
  console.log(user)

  return (
    <>
      ...
        <MenuItem>
          <ListItemIcon onClick={signOut}>
            <Logout fontSize="small" />
          </ListItemIcon>
          Logout
        </MenuItem>
      ...
    </>
  )
}

I would appreciate it a lot if someone can give a solution.

[wlee221]

Hi, this use case should now be possible with #1168, which allows useAuthenticator to be used outside Authenticator component.

Please wrap your App (or whichever parent that contains both your Authenticator and Layout component with Authenticator.Provider, then you should be able to use useAuthenticator to sign out users and trigger transitions.

Please see https://ui.docs.amplify.aws/components/authenticator#useauthenticator-hook for full instructions. Particularly, you need to pass a parameter to useAuthenticator as described in the docs.

[wlee221]

This is a fairly new use case we support, so we'd gladly appreciate any feedbacks!