Signup with AWS Cognito

Sorry, It’s my typo. I mean the error that is thrown from Auth.currentSession() is a string type. Is it the Amplify creators’ intention?

I’m not sure if it is but the errors aren’t really standardized. :frowning:

Can I refactor the code to make the confirmation code form be shared with the sign in page? because the user might not verify the account on sign up,(he might of refreshed the page on confirmation page and lost the page), and when he try to sign in, if the account is not confirmed yet he will be able to submit the code again.

Another issue would be how to handle the refresh part on the confirmation page, i did not get that?

We briefly talk about that in the chapter.

  1. Check for the UsernameExistsException in the handleSubmit method’s catch block.
  2. Use the Auth.resendSignUp() method to resend the code if the user has not been previously confirmed. Here is a link to the Amplify API docs.
  3. Confirm the code just as we did before.

So basically let it fail and then resend the code from before.

How about the form that user is suppose to fill? Its disappearing if a refresh happens, so i want the user to be able to fill once they tried to sign in, i understand how to resend the code, but its where to fill the next time?

Kind regards,

It’s pretty much the same flow as before, after you call resendSignUp() you show the form to input the code.

Great tutorial. I am working on creating an admin area that includes a user sign-up page that admins fill out. What I’d like to do is have the user presented with confirmation form on first login. From the other comments and feedback I have restructured my “handleSubmit” function on the login page to look like this:

handleSubmit = async e => {
    const { email, password } = this.state;

    this.setState({ isLoading: true });

    try {
      await Auth.signIn(email, password);
    } catch (e) {
      if (e.message === 'User is not confirmed.') {
        **// I'm stuck on what to put here** 
      // alert(e.message);
      this.setState({ isLoading: false });

Note the if statement I am stuck on what to do there. I want to render a confirmation form but I have tried


This redirected to a page that has the following code:

import React, { Component } from 'react';
import { Auth } from 'aws-amplify';  
import { Form } from 'react-bootstrap';
import LoaderButton from '../components/LoaderButton';

export default class ConfirmationPage extends Component {
  constructor(props) {

    this.state = {
      isLoading: false,
      email: '',
      password: '',
      confirmationCode: ''

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

  handleChange = e => {

  handleConfirmationSubmit = async e => {
    const { email, password, confirmationCode } = this.state;

    this.setState({ isLoading: true });

    try {
      await Auth.confirmSignUp(email, confirmationCode);
      await Auth.signIn(email, password);
    } catch (e) {
      this.setState({ isLoading: false });

  render() {
    const { confirmationCode, isLoading } = this.state;
    return (
      <form onSubmit={this.handleConfirmationSubmit}>
        <Form.Group controlId="confirmationCode">
          <Form.Label>Confirmation Code</Form.Label>
          <Form.Text>Please check your email for the code.</Form.Text>

Thanks for any guidance.

If you just want to render a confirmation form in place, the best way would be to create a a state variable and set it this.setState({ showConfirmationForm: true });.

Then in your render() method, display the confirmation form if that variable is set.

But your redirect should be fine as well right? Whats the issue you are running into?

What is the best way to allow created users to create new users? The typical use case is in a multi-tenancy environment where a user registers his/her organisation and then add users with different roles inside the organisation.

One option could be to call adminCreateUser using the AWS SDK from a lambda. I have attempted this but without success.

Any thoughts/examples will be appreciated.

The adminCreateUser needs to be called inside a Lambda function, so it can use your credentials as opposed to the logged in user

@christensen143 did you resolve this? I am trying to figure out how to best allow a user to verify their email address if they abandoned the first time they were prompted. So I need to figure out how to get them back to the prompt.

Has anyone implemented a sign-up page like the one outlined in this tutorial but with OAuth options as well (e.g. Google, Facebook)? If so I would love help in doing so.

We do have an extra credit chapter on Facebook logins -

But we don’t have one for Google. Let me know if you want to help contribute for that!

Oh great! I completely overlooked that extra credit chapter. I’ll follow that tutorial and then try to set up Google afterward. I’ll be sure to send over my steps if I’m successful in getting it to work!

1 Like

Has anyone figured out a way to incorporate MFA into this signup flow?

I have got the sign up and verify working, but looking at adding MFA to both the sign up and login, but have not been able to work it out yet. Would appreciate any guidance.


Have you tried the MFA portion in the Amplify docs - We’ve used it internally and it works.

We might add this to the guide at some point.

Thanks, I couldn’t get amplify to do everything for MFA enforced registration. In the end I ended up using Amplify and qrcode.react to generate the QR, then a lambda function to validate the submitted TOTP code. This validation function is reused for login. That way the MFA validation is handled ‘server’(less)-side in the Lambda, rather than by the front-end.

For the purposes of the registration I was also hoping that I would be able to use the code quick enough to both confirm MFA and log the user in. But the TOTP is single use, so there is no way around that.

Yeah that makes sense. We did something similar but did the validation on the frontend.

Why use useFormFields hook here to store email, pwd, confirmPwd, confirmCode instead of storing them in the state?

Because code reuse! don’t repeat, reuse code applied useFormFileds(Custom Hook)

1 Like