FR (Authenticator): Ability to pass customState via Federated Auth

[kevoj7]

Could you please add the option to pass a custom ouath state for the buttons clicked?

[kevoj7]

How can I pass the customState to the provider with Authenticator Amplify UI?

export default function AuthLogin() {
console.log("AuthLogin Client Component Rendered")

const [customState, setCustomState] = useState<AuthStateTypes>({
    authFlow: 'Signin',
    authType: 'GoogleSignin',
    userType: null
});

return (
    <div className="flex flex-col justify-center items-center min-h-screen">
        <button
            onClick={() => signInWithRedirect({
                provider: 'Google',
                customState: JSON.stringify(customState)
            })}>
            Sign in with Google
        </button>

    </div>
);

}

[reesscot]

Hi @kevoj7,
This is not currently possible using the Authenticator UI component, you would need to use the JS signInWithRedirect API directly as you mentioned above. It's not ideal, but as a workaround you could put your button using signInWithRedirect in the customizable footer slot. See: https://ui.docs.amplify.aws/react/connected-components/authenticator/customization#headers--footers

[sakaal]

Indeed, would be very much needed. Specifically, <Authenticator customState="we need this">