Misc.

How to change AWS Amplify Authentication UI?

In this article, I will show you how you can change AWS Amplify Auth UI for SignUp. AWS Amplify makes it easy to develop mobile and web applications. Its framework which manages and easily integrate backend with Android, iOS, Web and ReactJs frontend.

Now days, I am doing cloud-enabled projects using AWS Amplify. I have get chance to integrate Amplify Auth with AWS Cognito in ReactJs application.

Here I am supposing that you already have AWS Amplify configured application in ReactJs as frontend. After configuring Auth, we will create our own Components in application and extend them with Amplify Components. Following is the code for CustomSignUp.

import React from "react";
import { SignUp } from "aws-amplify-react";

export class CustomSignUp extends SignUp {
  constructor(props) {
        super(props);
        this._validAuthStates = ["signUp"];
  }

  showComponent(theme) {
    return (
      &lt;div className="row">
        &lt;form>
          &lt;div className="form-group">
            &lt;label htmlFor="Username"
            >
              Username
            &lt;/label>
            &lt;input
              className=""
              id="username"
              key="Username"
              name="Username"
              onChange={this.handleInputChange}
              type="text"
              placeholder="Username"
            />
          &lt;/div>
    &lt;div className="form-group">
            &lt;label htmlFor="email"
            >
              Email
            &lt;/label>
            &lt;input
              className=""
              key="email"
              name="email"
              onChange={this.handleInputChange}
              type="text"
              placeholder="Email"
            />
          &lt;/div>
          &lt;div className="form-group">
            &lt;label htmlFor="password"
            >
              Password
            &lt;/label>
            &lt;input
              className=""
              key="password"
              name="password"
              onChange={this.handleInputChange}
              type="password"
              placeholder="Password"
            />
          &lt;/div>
          &lt;div className="form-group">
            &lt;label htmlFor="phone_number"
            >
              Phone Number
            &lt;/label>
            &lt;input
              className=""
              key="phone_number"
              name="phone_number"
              onChange={this.handleInputChange}
              type="text"
              placeholder="phone_number"
            />
          &lt;/div>
    &lt;div className="form-group">
            &lt;label
            >
            &lt;/label>
            &lt;input
              className=""
              name="phone_number"
              onClick={super.signUp}
              type="button"
     value="Register"
            />
          &lt;/div>
        &lt;/form>  
      &lt;/div>
   &lt;div className="row">
  &lt;div className="col-12"
   &lt;p>Go Back to 
    &lt;Link to="#" onClick={() => super.changeState("signIn")}>Login&lt;/Link>
   &lt;/p>
  &lt;/div>
 &lt;/div>
    );
  }
}

CustomSignUp is extending with SignUp component from aws-amplify-react. This is how we override the showComponent method, we are not overriding the render method because UI defined in showCompomnent method.

This is how we can override showComponent methods for other component too like ConfimSignUp, SignIn, Forgot Password.

I hope this will help….

websourceblog

ReactJs, NodeJs, Amazon Web Services, Symfony, Laravel, CodeIgniter, Zend Framework, WordPress, Drupal, Magento, Angular