AWS Cognito React UI Package

Downloads in past


401.0.03 years ago3 years agoMinified + gzip package size for aws-cognito-react-ui in KB


AWS Cognito React UI
AWS Cognito React UI is a react (web) package that allows designers to customize the UX to work with AWS Cognito. Build upon aws-cognito-core-ui.


npm install aws-cognito-react-ui # or yarn add aws-cognito-react-ui


Import Package
import AuthProvider from 'aws-cognito-react-ui';
Wrap your App with AuthProvider
Pass in your awsconfig, and wrap with AuthProvider.
const awsconfig = {
    Auth: {
        region: 'us-east-1',
        userPoolId: 'us-east-1_ABC',
        userPoolWebClientId: 'ABCDEFGHIJKL'

<AuthProvider awsconfig={awsconfig}>
    <MyApp />

That's it! Works out the box!
Customize the UX
Look at the the source code or look at aws-cognito-core-ui Basic Usage.
Design Component Object for each screen
The object keys end in C, (leave alone), the value on the right should point to your UX screen. In this case we are creating the LoadingUI.
Example for HTML (web):
const LoadingUI = () => (
Link Component to your UX
Reference the aws-cognito-core-ui docs on what is needed to contruct each component.
const MyScreenComponents = {
    signInC: SignInUI,
    errorMsgC: ErrorMsgUI,
    forgotPasswordC: ForgotPasswordUI,
    forgotPasswordSubmitC: ForgotPasswordSubmitUI,
    signOutC: SignOutUI,
    signUpC: SignUpUI,
    confirmSignUpC: ConfirmSignUpUI,
    confirmSignInC: ConfirmSignInUI,
    newPasswordRequiredC: NewPasswordRequiredUI,
    mfaSetupC: MfaSetupUI,
    changePasswordC: ChangePasswordUI,
    changePasswordSuccessC: ChangePasswordSuccessUI,
    loadingC: LoadingUI,

Feeling lazy and want to just customize the signInC components.
import { defaultComponentObject } from 'aws-cognito-react-ui';
const MyScreenComponents = {
    signInC: YourSignInUI,
Wrap your App with AuthProvider
Pass in your awsconfig, along with your screens to ComponentObject.
<AuthProvider awsconfig={awsconfig} ComponentObject={MyScreenComponents}>
    <MyApp />

Create your own Package with your own Design.


Feedback / Questions / Thoughts / Hire me?