Signup and auto login with Cognito and Arengu

Learn how to integrate Arengu with your own Cognito user pool, leveraging their user management APIs and creating a full authentication flow in a few steps.

Previous requirements

• An existing Cognito user pool. If you don't have one, you can create it for free in the AWS console.
• An existing web app, where you will be embedding the Arengu form.

1. Prepare your AWS project

As we have to consume the Cognito API, we recommend you to create a new isolated user with the required permissions. For it, log into your AWS account, go to the Users module and click on the Add user button. This will open a popup where you have to set the username and make sure you check the Programmatic access checkbox.

The next step will ask you which permissions you want to add to this new user. We recommend you to create a new group and add the user to it, but you can attach an existing policy directly to the user.

Regardless of your choice, the policy you have to grant is AmazonCognitoPowerUser.

Continue through the remaining steps of the wizard to create the new user. Once created, in the last step, you will get both the Access key ID and Secret access key associated with that new user. Copy those settings because we will need them later.

2. Connect your Arengu workspace with your AWS project

In Arengu, click on your profile button in the lower left corner and then on the "Vault" option.

Click on the "Add connection" button and choose "Amazon Cognito". Then, configure the 3 fields required to create the connection:

• Region: the identifier of the region where your user pool is configured.
• Access Key ID: the identifier of the user we use to consume the Amazon Cognito API.
• Secret Access Key: the secret to prove we are the user consuming the API.
  

The two latter values are the keys we have obtained creating the user in step 1.

Click on "Continue" and give the connection a meaningful name. Finally, complete the connection by clicking on the "Add connection" button. Now you can use all the Amazon Cognito actions on your project from all Arengu flows.

3. Build the signup form

In the forms module, create a new form to your liking. We'll be needing only one step, containing at least:

• An email field:

• ID: email
• Required: enable this checkbox to make it mandatory

• A password field, with the ID password:

• ID: password
• Required: enable this checkbox to make it mandatory
• Min. length: Amazon Cognito requires the passwords to be at least 6 characters, so it's a good idea to enforce this at this moment instead of failing later in a less user-friendly way

• A next button
• An HTML block

For the last item, the HTML block, we'll have to fill it with some code in order to detect the successful form submission and log the user in. You can use the following script:

<script>
  document.addEventListener('af-submitForm-success', (event) {
    const formData = event.detail.formData;
  
    Auth.signIn(formData.email, formData.password)
      .then(() => {
        window.location.href = '/my-home-page';
      })
      .catch((err) => {
        console.error(err);
        alert('Something failed');
      });
  });
</script>

This code will wait for the "form submitted successfully" event, log the user in, and finally redirect the browser to a URL of your choosing. For example, your home page.

Your form should look like something like this:

4. Add form logic with a flow

Now we need to handle the data the user will submit in the form and create the account in Cognito if it doesn't exist.

Add a new before submission flow to the form we just created and set it up this way:

4.1 Trying to get a user with that email

This action tries to get the user from your user pool using either the email, the phone or the username depending on the configuration of your pool.

• ID: "cognitoLookup"
• Field: "Email"
• Value: {{input.body.email}}

4.2 Checking the result of the lookup

If the previous lookup was successful (i.e. its result had a value), that means the user is already registered and we we'll stop with an error message. We can check this with an if/then condition configured this way:

• Condition: {{cognitoLookup.success}} and "is true"

4.3 Creating the user

If the user did not exist, create the user in Cognito with the sign up action, passing the email and password specified in the form. Configure the "Sign up" action with:

• ID: cognitoSignup
• Enable the "Save email" checkbox
• Email: {{input.body.email}}
• Password: {{input.body.password}}
  

What about the "Mark email as verified" checkbox? Note that because we want to keep this tutorial short, we're skipping a very important step, which is verifying that the email address actually exists. But don't worry, you can do that easily in Arengu too, just head over to our guide about email OTP flows.

6. Embed the form into your web app

In the form you created in step 2, click on the "Embed" tab at the top, choose the type of web app you're integrating Arengu with, and follow the instructions there, which are most often just copying a couple of lines of HTML.