about gallery street 📸

Customize Amazon Cognito UI


Running App Example

Example of running App with customized Amazon Cognito: This App front-end is based on GatsbyJS/React components.

You can try to Sign Up and Sign In, it will need valid Phone Number and E-Mail Address.

![](images/Screen Shot 2020-05-16 at 12.50.19 PM.png)


Add Cognito

Add Amazon Cognito support to your App by using Amplify CLI from your App directory as follow:

prompt$ cd app-directory

prompt$ amplify add auth 
(just try default options for now)

prompt$ amplify push 
(pushing your Cognito configuration to AWS back-end using CloudFormation. Cognito User Pools and configuration will be created)

:root {
  --themeColor: darkslateblue;
  --hoverColor: rgb(105, 95, 171); 
  --amplify-primary-color: darkslateblue;
  --amplify-primary-tint: rgb(39, 39, 151); 
  --amplify-primary-shade: rgb(105, 95, 171);

The three CSS custom variables above (--amplify-primary-color, --amplify-primary-tint, and --amplify-primary-shade) overrides default (orange) colors from Amplify/Cognito libraries. Check this page for complete list of customizable CSS variables:


import "../components/layout.css"
import { AmplifyAuthenticator, AmplifySignOut, AmplifySignIn, AmplifySignUp } from '@aws-amplify/ui-react'

return (
  {/* <AmplifySignIn headerText="Customize Sign-In Text Here" slot="sign-in" />
  <AmplifySignUp headerText="Customize Sign-Up Text Here" slot="sign-up" /> */}
  <form id="postblogform" onSubmit={handleSubmit(onSubmit)}>
  <input type="text" placeholder="Post Title" name="posttitle" ref={register({required: "POST TITLE REQUIRED", minLength: {value: 5, message: "TOO SHORT"}})}/><br/>{errors.posttitle && <p>{errors.posttitle.message}</p>}

	<textarea placeholder="Post Content" name="postcontent" rows="10" cols="100" ref={register({required: "POST CONTENT REQUIRED", minLength: {value: 10, message: "TOO SHORT"}})}/> <br/>{errors.postcontent && <p>{errors.postcontent.message}</p>}

	<button style={{"float": "left"}} type="submit" className="btn">Submit <MdSend className="btn-icon"/></button><br/>

Import the CSS file where we define the customization colors earlier with import "../components/layout.css". Also import Amazon Cognito UI components from @aws-amplify/ui-react: import { AmplifyAuthenticator, AmplifySignOut, AmplifySignIn, AmplifySignUp } from '@aws-amplify/ui-react'.

We can then call the Amplify UI Components from the return statement of the application: <AmplifyAuthenticator>, <AmplifySignIn>, <AmplifySignUp>, and <AmplifySignOut>.

We can also customize the headerText for both <AmplifySignIn>, and <AmplifySignUp> components.


As you can see, adding Authentication, Sign Up, Sign In, and Sign Out is very easy with Amazon Cognito. AWS handles the backend heavy-lifting to store your user information, SMS/E-Mail based verification, Passwords policy and much more, Happy Coding!

Discuss on