2 min read · July 15, 2018

Ant Design Amplify Components

What is amplify?

Amplify is an Aws library which makes it easy for you to manage authentication, storage, api, analytics and more in browser on client side. They provide a React components library aws-amplify-react for Authentication which includes all comoponents like SiginIn, SignOut, ConfirmSignUp etc.

Limitations

It allows us to pass style object in standard format to style different compnents. This works great but if you are using Ant Deisgn then matching theme with your application is not that easy and you have to pass all that css rules in form of javascript object and still there will be some missing styles like hover effect, loading state, disabled button on submit . I was facing same issues so I created my own components library using Ant Design components and Aws Amplify.

antd-amplify-react

This library provides Authentication components (AuthFlow, SignIn, SignOut, ConfirmSignUp, ResetPassword and RequireNewPassword) for React applications using Ant Design.

You can use default style/theme or your can simply override Ant Design styles using css/less/scss and if you still think that you need more controll, copy the components’ code and modify the container components or buttons whatever you want and you are good to go.

AuthFlow

This is a humble effort to contribute in React and Ant Design echosystem. I hope you like this. Feel free to share your thought and issues on github.

You can do 50 👏 👏 👏 so don’t forget to 👏 and⭐ ⭐️ ⭐️ on Github https://github.com/mzohaibqc/antd-amplify-react

Stay Happy :)