RFC: Authenticator render props

[imranolas]

Thanks for the great project!

I wondered whether you might be open to reconsidering the authenticator API for React. The customization options on offer thus far are either partial in terms of styles or all in through component inheritance. I would propose the fashionable render props pattern as a flexible alternative. This would allow the renderProp to expose only the public interface for the authenticator API, whilst providing the necessary props to build custom components.

Like so:

<Authenticator renderSignin={({onUsernameChange, onPasswordChange, onSubmit, ...otherProps}) => {
 /* Render custom signin UI */   
}/>

For a good example and justification of this pattern see https://github.com/paypal/downshift.

[mbahar]

Hey @imranolas , you can selectively use components with withAuthenticator: (https://aws.github.io/aws-amplify/media/authentication_guide#customize-withauthenticator)

This is similar what you have offered. I like to know if that works out for you?

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

#3279

[ericclemmons]

This issue has been open for a while, but it seems worth closing since aws-amplify-react has been replaced by @aws-amplify/ui-react (via #3279). As a result, there is a new onAuthStateChange export for keying into UI-specific events (that we use internally).

Otherwise, there may be a need for a "headless component", but https://github.com/aws-amplify/amplify-js/discussions is the best place to have that conversation & have the community vote. (I'd also like to have see a headless component for managing Auth flow complexity!)

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.