If you are struggling with the idea how to design AWS Cognito custom signin UI and not able to change your login screen with your own ideas or requirements, then this blog is for you. In this blog, you get the solution to customise the AWS sign-in view of your app. Recently, while working on one of the projects of our client we came up with the issue to not able to change the UI of the login screen. It was quite challenging for us too. We struggled a lot and did too many research on google but the result was disappointing. Somewhere we found that cloning the SignInActivity will help, but it did not. Lastly, we started to work ourselves and after long efforts, we came up with a solution and guess what?– it worked :-).
The default activity of Amazon Cognito user sign-in is not very attractive and surprisingly hard to use. To customise the view you need to do customise in 4 classes of the AWS Mobile Auth Userpools and they are SignInActivity, SignInView, AuthUIConfiguration and UserPoolSignInView, also need to use some feature of CognitoUserPoolsSignInProvider. These all classes are inter-related to each other and so to access all components of the sign-in view every class need changes. Below are some more details of the changes that you need to do in these classes.
Compone AWS Cognito Custom SignIn UI
SigInActivity – This file is the duplicate of the AWS Mobile Auth UI SigInActivity. In this, you need to put your own AuthUIConfiguration class.
SignInView – This is the most important class that you need to modify. This also the clone of the SignInView of the AWS Mobile Auth UI and in this class you have to use your AuthUIConfiguration and SignInActivity references rather than default classes of the same provided by the AWS Mobile Auth UI. You need to give a complete reference to your UserPoolSignInView class in the variable USER_POOL_SIGN_IN_VIEW so that your signin activity use your UserPoolSignInView rather than default one. Here you can set your logo, background image/color to be used on the signin screen.
UserPoolSignInView – Here you can change your sign-in button design like – size, color, and style.
AuthUIConfiguration – This class stores Configuration information related to the SignIn UI screen. You just need to copy the default AuthUIConfiguration class of the AWS mobile Auth UI.
CustomCognitoUserPoolsSignInProvider – This class extends the CognitoUserPoolsSignInProvider and implements all the necessary classes need to manage sign-in using Cognito User Pools. So wherever the CognitoUserPoolsSignInProvider reference has been used in your application, you need to use this class. Here you can also implement the feature of progress-bar according to your signin results.
Some of the more classes that you need to add or change are – activity_sign_in (your sign-in layout), horizontal_or_sign_in_divider, horizontal_sign_in_divider.
Sample
For sample App click here
Conclusion
That all and finally you will get the desired UI of your sign-in view. Though there are many limitations to the changes in the UI, you can change your sign-in view to a more beautiful view as compare to default view provided by the Amazon Cognito. Above is the small sample to demonstrate the changes that are needed to be changed. For more information, you can contact us through our website. Enjoy Coding…
References
AWS-SDK-Android – It provides a library and documentation for developers to build connected mobile applications using AWS.
