Signup with AWS Cognito

Now let’s go ahead and implement the handleSubmit and handleConfirmationSubmit methods and connect it up with our AWS Cognito setup.

Replace our handleSubmit and handleConfirmationSubmit methods in src/containers/Signup.js with the following.

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

  this.setState({ isLoading: true });

  try {
    const newUser = await this.signup(this.state.username, this.state.password);
    this.setState({
      newUser: newUser
    });
  }
  catch(e) {
    alert(e);
  }

  this.setState({ isLoading: false });
}

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

  this.setState({ isLoading: true });

  try {
    await this.confirm(this.state.newUser, this.state.confirmationCode);
    const userToken = await this.authenticate(
      this.state.newUser,
      this.state.username,
      this.state.password
    );

    this.props.updateUserToken(userToken);
    this.props.history.push('/');
  }
  catch(e) {
    alert(e);
    this.setState({ isLoading: false });
  }
}

signup(username, password) {
  const userPool = new CognitoUserPool({
    UserPoolId: config.cognito.USER_POOL_ID,
    ClientId: config.cognito.APP_CLIENT_ID
  });
  const attributeEmail = new CognitoUserAttribute({ Name : 'email', Value : username });

  return new Promise((resolve, reject) => (
    userPool.signUp(username, password, [attributeEmail], null, (err, result) => {
      if (err) {
        reject(err);
        return;
      }

      resolve(result.user);
    })
  ));
}

confirm(user, confirmationCode) {
  return new Promise((resolve, reject) => (
    user.confirmRegistration(confirmationCode, true, function(err, result) {
      if (err) {
        reject(err);
        return;
      }
      resolve(result);
    })
  ));
}

authenticate(user, username, password) {
  const authenticationData = {
    Username: username,
    Password: password
  };
  const authenticationDetails = new AuthenticationDetails(authenticationData);

  return new Promise((resolve, reject) => (
    user.authenticateUser(authenticationDetails, {
      onSuccess: (result) => resolve(result.getIdToken().getJwtToken()),
      onFailure: (err) => reject(err),
    })
  ));
}

Also, include the following in our header.

import {
  AuthenticationDetails,
  CognitoUserPool,
  CognitoUserAttribute,
} from 'amazon-cognito-identity-js';
import config from '../config.js';

The flow here is pretty simple:

In handleSubmit we make a call to signup a user. This creates a new user object.
Save that user object to the state as newUser.
In handleConfirmationSubmit use the confirmation code to confirm the user.
With the user now confirmed, Cognito now knows that we have a new user that can login to our app.
Use the username and password to authenticate the newly created user. We use the newUser object that we had previously saved in the state. The authenticate call returns the user token of our new user.
Save the userToken to the app’s state using the updateUserToken call. This is the same call we made back in our Login component.
Finally, redirect to the homepage.

Now if you were to switch over to your browser and try signing up for a new account it should redirect you to the homepage after sign up successfully completes.

Redirect home after signup screenshot

A quick note on the signup flow here. If the user refreshes their page at the confirm step, they won’t be able to get back and confirm that account. It forces them to create a new account instead. We are keeping things intentionally simple here but you can fix this by creating a separate page that handles the confirm step based on the email address. Here is some sample code that you can use to confirm an unauthenticated user.

However, while developing you might run into cases where you need to manually confirm an unauthenticated user. You can do that with the AWS CLI using the following command.

aws cognito-idp admin-confirm-sign-up \
   --region us-east-1 \
   --user-pool-id YOUR_USER_POOL_ID \
   --username YOUR_USER_EMAIL

Just be sure to use your Cognito User Pool Id and the email you used to create the account.

Next up, we are going to create our first note.