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 (
<div className="row">
<form>
<div className="form-group">
<label htmlFor="Username"
>
Username
</label>
<input
className=""
id="username"
key="Username"
name="Username"
onChange={this.handleInputChange}
type="text"
placeholder="Username"
/>
</div>
<div className="form-group">
<label htmlFor="email"
>
Email
</label>
<input
className=""
key="email"
name="email"
onChange={this.handleInputChange}
type="text"
placeholder="Email"
/>
</div>
<div className="form-group">
<label htmlFor="password"
>
Password
</label>
<input
className=""
key="password"
name="password"
onChange={this.handleInputChange}
type="password"
placeholder="Password"
/>
</div>
<div className="form-group">
<label htmlFor="phone_number"
>
Phone Number
</label>
<input
className=""
key="phone_number"
name="phone_number"
onChange={this.handleInputChange}
type="text"
placeholder="phone_number"
/>
</div>
<div className="form-group">
<label
>
</label>
<input
className=""
name="phone_number"
onClick={super.signUp}
type="button"
value="Register"
/>
</div>
</form>
</div>
<div className="row">
<div className="col-12"
<p>Go Back to
<Link to="#" onClick={() => super.changeState("signIn")}>Login</Link>
</p>
</div>
</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….
I hope you already have WSL2 installed and enabled. So, setting up Apache2 on WSL2…
Install NVM on Windows Node Js is a JavaScript runtime environment used widely in today’s…
You can easily reset WSL 2 users' password, by just following the following steps. Open…
DreamHost a web hosting company, founded in 1997. It is offering sort of hosting services,…
Menus in WordPress are highly versatile and can be easily modified to change in your…
Laravel is famous and robust PHP framework, widely used in different type of projects. While…