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.

Install

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

Usage

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 />
</AuthProvider>

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 = () => (
    <div>
        <h1>Loading</h1>
    </div>
);

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 = {
    ...defaultComponentObject,
    signInC: YourSignInUI,
};

Wrap your App with AuthProvider

Pass in your awsconfig, along with your screens to ComponentObject.

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

Create your own Package with your own Design.

FAQs

Support

Feedback / Questions / Thoughts / Hire me?

Discord