Props passed to the enclosed component of withAuthenticator HOC is empty

Question

I am expecting props.onStateChange but props is empty object.

Props passed to the enclosed component of withAuthenticator HOC is empty.

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


export const App = withAuthenticator((props) => {
  console.log('props',props) // {}
  return (
    <BrowserRouter>
      ......
    </BrowserRouter>
  );
});

The thing I want to accomplish is sign-out functionality. I tried Auth.signOut() .But this is just clearing the localStorage but redirecting to sign-in page is not happening.

I searched for such issue and found out that

When using the Auth.signOut from within the withAuthenticator it will not sign out because it is only updating the session locally in LocalStorage. You need to have a way to rerender the actual withAuthenticator component.

https://github.com/aws-amplify/amplify-js/issues/1529

https://github.com/aws-amplify/amplify-js/issues/4643

Solution that provide includes using props.onStateChange but the props in my case is empty.

Where am I wrong?

Answer 1

After some R&D I found that

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

Here withAuthenticator HOC doesn't provide any props.

And this approach is used to use pre-built UI components

import { withAuthenticator } from "aws-amplify-react";

Here withAuthenticator HOC provides props

• authState
• authData
• onStateChange.

And this approach is used to customize (create) our own UI.