Running App Example
Example of running App with customized Amazon Cognito: https://master.d1dp3i9zp6cblx.amplifyapp.com/postblog. 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.
Code
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)
CSS
https://github.com/sigitp-git/gatsby-appsync-amplify-pub/blob/master/src/components/layout.css
: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: https://docs.amplify.aws/ui/customization/theming/q/framework/react.
JavaScript/React
https://github.com/sigitp-git/gatsby-appsync-amplify-pub/blob/master/src/pages/postblog.js
import "../components/layout.css"
import { AmplifyAuthenticator, AmplifySignOut, AmplifySignIn, AmplifySignUp } from '@aws-amplify/ui-react'
return (
<Layout>
<AmplifyAuthenticator>
{/* <AmplifySignIn headerText="Customize Sign-In Text Here" slot="sign-in" />
<AmplifySignUp headerText="Customize Sign-Up Text Here" slot="sign-up" /> */}
<div>
<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/>
</form>
</div>
<div>
<AmplifySignOut/>
</div>
</AmplifyAuthenticator>
</Layout>
)
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.
Summary
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!
Top comments (0)