AWS Amplify React UI Component - How to dispatch auth state change event?

Question

My application uses AWS Amplify React UI Components (@aws-amplify/ui-react) to handle user flows and I needs to know when a user successfully signs in.

I have added the handleAuthStateChange prop below. This works and I can receive the new state, however it prevents the app from navigating to other AmplifyAuthenticator slots like sign-up and forgotpassword.

<AmplifySignIn
    slot="sign-in"
    handleAuthStateChange={(state, data) => {
        // handle state === 'signedin' but pass along other states
    }}
></AmplifySignIn>

Does anyone know how to get notified about changes in authentication state without breaking other AmplifyAuthenticator slots?

Answer 1

You can add it to the AmplifyAuthenticator component.

<AmplifyAuthenticator 
    handleAuthStateChange={(state, data) => {
        console.log(state)
        console.log(data)
        //add your logic
    }}
>
    <AmplifySignIn
         slot="sign-in"
    >
    </AmplifySignIn>
</AmplifyAuthenticator>

Or you can access Auth state changes in other components using

import { onAuthUIStateChange } from '@aws-amplify/ui-components'

useEffect(() => {
    return onAuthUIStateChange((state, data) => {
        console.log(state);
        console.log(data);
        //add your logic
    });
}, []);

Hope this helps