How to create custom UIs

[nnurmano]

This is a clarification on approach. I have an existing ReactJS based project, which has custom UIs, which in turn leverage aws-cognito js libraries. Now I would like to use aws-amplify library and need to clarify how to approach the migration.
The documentation here suggests to extending the existing aws-amplify UIs
(Option#1) https://github.com/aws/aws-amplify#3-override-default-authentication-screens,
the sample provided here
(Option#2) https://github.com/awslabs/aws-mobile-react-sample, uses custom UIs. I would like to understand what is the preferred way of building custom UIs, could I still use Option#1 and achieve a completely different UIs? Or this approach has some limitations?

[richardzcode]

Hi @nomadus Yes Option #1 is recommended way. Here is another example: https://aws.github.io/aws-amplify/media/authentication_guide.html#5-write-your-own-auth-ui

Thanks,
Richard

[nnurmano]

The example you referred does not clarify on how to use Option#1. Namely, how to call AUTH methods when I have custom buttons etc. I shall come back when there is a good example, I am sticking to Option #2, compared to old Cognito approach amplify reduces quantity of code, fo sure. So this is great!

[richardzcode]

@nomadus maybe this link helps: https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial/tree/master/step-03#2-turn-loginform-into-authpiece

For example this is how to make call to sign in:

    Auth.signIn(username, password)
        .then(user => console.log('sign in success', user))
        .catch(err => console.log('sign in error', err));

[nnurmano]

Hi @richardzcode ,
Thanks for the link, It helps a lot. I guess this issue could be closed now. Before closing the issue, I would like to ask another question. I shall need to know if the user is logged in or not. I believe this info is stored in authState. To access to this info, could I extend AuthPiece component in my custom Header component and then be able to access to authState object?

[powerful23]

@nomadus I think you can access it through this.props.authState if you component is the children of Authenticator

[mlabieniec]

@nomadus please feel free to re-open this if you think there is anything we should add for this.

[francisngo]

It looks like the link in OP is not anchored to the desired instructions anymore. I am running into an issue where I am trying to create my own custom UI and need to retrieve the response code but it looks like I can only retrieve it from Amplify's UI. Please provide any sample code, if any. Thanks!

[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.