# Create the Signup Form

**URL:** <https://discourse.sst.dev/t/create-the-signup-form/52>\
**Category:** Chapter Comments\
**Created:** [May 9, 2018, 6:39pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52 "2018-05-09T18:39:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 6:39pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52/1 "2018-05-09T18:39:12Z")

</div>

_From @jayair on Mon Apr 10 2017 01:05:04 GMT+0000 (UTC)_  
  
Link to chapter - [http://serverless-stack.com/chapters/create-the-signup-form.html](http://serverless-stack.com/chapters/create-the-signup-form.html)  
  
_Copied from original issue: [https://github.com/AnomalyInnovations/serverless-stack-com/issues/45](https://github.com/AnomalyInnovations/serverless-stack-com/issues/45)_

---

<div class="post-metadata">

**Author:** ![peetss](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/peetss/32/546_2.png) [@peetss](https://discourse.sst.dev/u/peetss)\
**Post date:** [October 3, 2019, 2:08am UTC](https://discourse.sst.dev/t/create-the-signup-form/52/2 "2019-10-03T02:08:52Z")

</div>

First of all, absolutely delighted by what you’ve put together here. This is like Wikipedia, or Khan Academy, but for software development (on the cloud). Anyone who reads this has a blank canvas to build ever they want. The value of the _blank canvas_ however, is exceptionally underrated.

I had a problem where users would interrupt the sign-in flow, and thus no longer be able to confirm their account. I needed to re-use the confirmation view and logic from the `Login` page. I decided to build a `ConfirmationCode` component that could be used for this purpose.

The `ConfirmationCode` component:

```auto
import React, { Component } from "react";
import { Auth } from "aws-amplify";
import {
  HelpBlock,
  FormGroup,
  FormControl,
  ControlLabel,
} from "react-bootstrap";
import LoaderButton from "../components/LoaderButton";

export default class ConfirmationCode extends Component {
  constructor(props) {
    super(props);

    this.state = {
        isLoading: false,
        confirmationCode: ""
    };
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  validateConfirmationForm() {
    return this.state.confirmationCode.length > 0;
  }

  handleConfirmationSubmit = async event => {
    event.preventDefault();

    this.setState({ isLoading: true });

    try {
      await Auth.confirmSignUp(this.props.email, this.state.confirmationCode);
      await Auth.signIn(this.props.email, this.props.password);

      this.props.confirmSuccess();
    } catch (e) {
        // TODO: Improve
      alert(e.message);
      this.setState({ isLoading: false });
    }
  }

  render() {
    console.log(this.props);
    return (
        <form onSubmit={this.handleConfirmationSubmit} id="registration">
          <FormGroup controlId="confirmationCode" bsSize="large">
            <ControlLabel>Confirmation Code</ControlLabel>
            <FormControl
              autoFocus
              type="tel"
              value={this.state.confirmationCode}
              onChange={this.handleChange}
            />
            <HelpBlock>Please check your email for the code.</HelpBlock>
          </FormGroup>
          <LoaderButton
            block
            bsSize="large"
            disabled={!this.validateConfirmationForm()}
            type="submit"
            isLoading={this.state.isLoading}
            text="Verify"
            loadingText="Verifying…"
          />
        </form>
    );
  }
}

```

Exactly as it exists in `Signup`, only we changed the `password` and `email` references to use `props` instead of `this`. It needs to be this way because we are now passing in those variables when we call the component. The only other alteration is the call to `confirmSuccess()`, also passed in as a property. This allows the calling function an ability to pass a callback.

On the `Login` page, first we have to add the component.

```auto
<ConfirmationCode email={this.state.email} password={this.state.password} confirmSuccess={this.confirmSuccess} />

```

We’ll also need to modify our `catch (e)` block to check for the right exception that is thrown from `signIn`. Let’s also add a state variable `showConfirmation` to control the rendering of the component.

```auto
if (e.code === "UserNotConfirmedException") {
        this.setState({ showConfirmation: true});
      }

```

Our `confirmSuccess` callback simply executes the existing logic, before we made it a component.

```auto
confirmSuccess = async event => {
  this.props.userHasAuthenticated(true);
  this.props.history.push("/");      
}

```

Lastly, you can incorporate it in your `render` method like:

```auto
render() {
    return (
      <div className="Login">
      {this.state.showConfirmation
          ? this.renderConfirmation()
          : this.renderLogin()}
        
      </div>
    );
  }

```

Works great!

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 9, 2019, 8:05pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52/3 "2019-10-09T20:05:29Z")

</div>

> [@peetss](#):
>
> Anyone who reads this has a blank canvas to build ever they want. The value of the _blank canvas_ however, is exceptionally underrated.

Thank you for the kind words! I’m glad you see the value in what’ve put together!

Also, thank you for sharing the code you used to fix the issue. It ends up being very helpful for anybody searching for ways to build on top of what we have.

---

<div class="post-metadata">

**Author:** ![FallicoFunctions](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/fallicofunctions/32/1060_2.png) [@FallicoFunctions](https://discourse.sst.dev/u/FallicoFunctions)\
**Post date:** [January 1, 2021, 9:04pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52/5 "2021-01-01T21:04:53Z")

</div>

I finished the project and have mine hosted on netlify. Thank you very much for this. I sent the link to someone to get one input and they told me I should have the password requirements listed on the signup page. I completely agree as most, if not all, websites have this. I have tried to add the wording in for the password requirements on Signup.js but no luck. Any advice? This tutorial is my first exposure to all of the stuff we used: js, node, react, etc.

---

<div class="post-metadata">

**Author:** ![FallicoFunctions](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/fallicofunctions/32/1060_2.png) [@FallicoFunctions](https://discourse.sst.dev/u/FallicoFunctions)\
**Post date:** [January 1, 2021, 9:22pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52/6 "2021-01-01T21:22:56Z")

</div>

I figured this out. I’l leave up the question and answer for others to see. I added the following Form Texts to **function renderForm()** on Signup.js. This was between the password and the confirm password \<Form.Group\>

```
    <Form.Group controlId="password" size="lg">
      <Form.Label>Password</Form.Label>
      <Form.Control
        type="password"
        value={fields.password}
        onChange={handleFieldChange}
      />
    </Form.Group>
    <Form.Text muted>Password must contain the following:</Form.Text>
    <Form.Text muted>8 characters</Form.Text>
    <Form.Text muted>One lowercase letter</Form.Text>
    <Form.Text muted>One uppercase letter</Form.Text>
    <Form.Text muted>One symbol</Form.Text>
    <br/>
    <Form.Group controlId="confirmPassword" size="lg">
      <Form.Label>Confirm Password</Form.Label>
      <Form.Control
        type="password"
        onChange={handleFieldChange}
        value={fields.confirmPassword}
      />
    </Form.Group>
```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [January 3, 2021, 1:17am UTC](https://discourse.sst.dev/t/create-the-signup-form/52/7 "2021-01-03T01:17:09Z")

</div>

Thank you for sharing! Appreciate it.

---

<div class="post-metadata">

**Author:** ![alexjederock](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/alexjederock/32/1125_2.png) [@alexjederock](https://discourse.sst.dev/u/alexjederock)\
**Post date:** [February 8, 2021, 2:50pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52/8 "2021-02-08T14:50:10Z")

</div>

Hello, Ive been skipping around a bit. Does anyone know at what point we built the LoaderButton component? I dont even have a components folder in this project. I’ve been calling them containers… Thanks…

---

<div class="post-metadata">

**Author:** ![alexjederock](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/alexjederock/32/1125_2.png) [@alexjederock](https://discourse.sst.dev/u/alexjederock)\
**Post date:** [February 8, 2021, 4:10pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52/9 "2021-02-08T16:10:57Z")

</div>

Nevermind I fugured it out. Just had to go back through and read a little.

---

<div class="post-metadata">

**Author:** ![heyysaiii](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/heyysaiii/32/1176_2.png) [@heyysaiii](https://discourse.sst.dev/u/heyysaiii)\
**Post date:** [November 1, 2021, 3:40pm UTC](https://discourse.sst.dev/t/create-the-signup-form/52/11 "2021-11-01T15:40:47Z")

</div>

I want to send the emailId from signup to dynamodb by using the /post api. Can you please describe how can i do it?