Signup form with email verification and custom API

In this tutorial we will learn how to create and set up a custom signup form for your API, with two registration options. The first one is the social signup with Google and, the second one, an email and password option that also asks for a one-time password (OTP).

A really common use case on any type of website, especially on SaaS platforms, which you can now easily create with the Arengu template.

Previous requirements

• Your own API to authenticate and register the users.
• An Arengu account to create the form and the server-side logic.

What are we going to build?

This use case consists of a registration form with 2 options: 

• Sign-up with email and password,
• or using Google as a social provider. 

In both options, the email will be checked to know if it is already registered in the API. In case the user chooses to sign up with email and password, a one-time password (OTP) will be generated and sent to that email to verify that the user really has access to it.

In the case of choosing the registration option with a Google account, this platform will be in charge of its verification.

Use the template or start from scratch

Go to the form editor in Arengu, and choose the signup with email OTP verification template or build it from scratch simply by dragging and dropping the proper fields.

Note that if you choose the template, everything will be created and configured automatically: the form, its fields, the flows linked to it and every action. 

Now let’s see, step by step, how to create it from scratch.

Create a two-step form

First, create a form with two steps and, on the first one, add an Email field, a Password field with the following settings:

• ID: change them to ‘email’ and ‘password’ in order to make them easier to reference.
• Required: enable this option in both fields to make them mandatory.

Include a Signup with Google button too. To configure it, keep in mind your social app needs to be configured. Then, add the client ID (to be found in your own social account) and the scopes you want to gather. 

This use case features a social signup with Google, but other social providers are available. Learn more about setting up your social login in Arengu

On the second step of the form, add a Text field to ask the user for the OTP:

• ID: change them to ‘code’ to simplify it.
• Required: enable this option.
• Min. & Max. value: define the maximum and minimum length of the code.

Go to the Flows tab in the light grey menu and create two flows. One linked to form step 1 and another one linked to form step 2.

To create them, click on the plus button and give each one a name. If you have chosen the template to create this use case, you will see that they are already created and linked. Finally, publish the changes.

Flow 1: Signup with Google or generate OTP

The flow connected to the first step of the form will have this structure:

This flow will:

1. Check if the input email is already registered. If it is, a custom message will be displayed in the form inviting the user to log in instead. 
2. If the user has chosen the Signup with Google option, the flow will register the user in our API and make a redirect with the session initialized. 
3. If the user has chosen the email and password option, a one-time password will be generated and sent by email.

1. Check if the email is already registered

First, include an HTTP request action calling your API in order to check if the input email is already registered.

To configure this action:

• ID: change it to ‘checkEmail’ to make it easier to reference.
• URL: paste the registration URL of your API.
• Method: choose POST.
• Content type: choose application/json.
• Body: 

{
  "sub": "{{input.body.email ?? input.body.social.profile.email}}"
}

If needed, add the Authorization header and the secret API key of your API in the Headers section. Remember that these settings may vary depending on how your API is configured.

Then, add an If/then condition action to create two branches and trigger different actions based on whether the mail is already registered or not. 

To configure this action:

• Condition: reference the {{checkEmail.body.error_code}} variable from the outputs of the previous action, set ‘is equal to’ as the condition and write the error string ‘unknown_sub’ in the second input. You can get the variable by simply clicking on the plus button after an execution of the flow.

In the False branch, include a Show error message action. Just personalize the text to invite the user to log in instead.

2. Check the chosen sign-up option

In the True branch, add another If then condition action to determine what signup option the user has chosen and create two branches to trigger different actions based on it.

To configure this action:

• Condition: reference the {{input.body.social}} variable from the form and set ‘exists’ as the condition. This way, we can check if the user has input the email field in the form. If not, it is assumed that the user has chosen the social signup.

3. Sign up with Google

In the True branch of this second If/then condition action of the flow, include an HTTP request to run the Sign up with Google option. 

To configure this action:

• ID: change it to ‘signup’ in order to simplify it.
• URL: add the registration URL of your API.
• Method: choose POST.
• Content type: choose application/json.
• Body: 

{
  "sub": "{{input.body.email ?? input.body.social.profile.email}}",
  "password": "{{input.body.password ?? undefined}}"
}

Under the Headers section, you can add the Authentication header and your API key, if needed.

Then add an If/then condition action to check if the social sign up was successful or not, and configure it as follows:

• Condition: reference the {{signupSocialRequest.success}} variable from the outputs of the previous action and choose ‘is true’ as condition. Again, you can get the variable by clicking on the plus button after an execution of the flow.

In the False branch of this third condition, include a Show error message action to display a custom error message on the form in case the Google authentication process fails.

In the True branch, add a Submit the form action with the following settings:

• Success message: write the message that the user will see just before the redirection.
• Redirect to URL: enable this option and reference the {{signupSocialRequest.body.claim_url}} from the outputs of the previous HTTP Request action. This way, the action will get the destination URL that your API returns to automatically redirect the user.

4. Generate and send a OTP

In the False branch of the second condition action of the flow, include a Generate one-time password action configured as follows:

• Reference value: reference the {{input.body.email}} variable from the form.
• Code length: it is set as 4 digits by default, but you can personalize it.

Then add a Send email action to send the OTP to the user. Native actions with email providers such as MailJet or SendGrid are provided, but you can use Arengu’s action for testing purposes. 

To set this action up:

• Recipient email: reference the {{input.body.email}} variable from the form.
• Subject: write a custom subject for the email.
• Content: build the content of the email with HTML and include the {{generateOneTimePassword.code}} variable from the outputs of the previous action. You can get it by clicking on the plus button after an execution of the form.

Next, include another If/then condition action with these settings:

• Condition: reference the {{sendEmail.success}} variable from the outputs of the previous action, after a flow execution and choose ‘is true’ as the condition.

In the False branch of this forth condition of the flow, add a Show error message and personalize the message for the user.

In the True branch, include a Go to the next form step action, which does not need configuration. After this action is executed, the flow will display the second step of the form, where the user can enter the OTP. Finally, publish the changes.

Flow 2: Verify OTP + Signup with email and password

The flow connected to the second step of the form will have this structure:

This flow will:

• Check if the code entered by the user is correct. 
• Display an error message if it is not. 
• If it is correct, register the user and redirect with the session automatically initialized. 

1. Verify one-time password

First, include a Verify one-time password action to check if the code entered by the user matches the one previously generated and sent, and configure it as follows:

• ID: change it to ‘verifyOtp’ to simplify it.
• Reference value: reference the {{input.body.email}} variable from form step 1.
• Code value: reference the {{input.body.code}} variable from form step 2.

Next, add an If/then condition action to check if the code is valid and create two branches, with the following settings:

• Condition: reference the {{verifyOtp.valid}} variable from the outputs of the previous action, after an execution of the flow, and select ‘is true’ as the condition.

In the False branch, include a Show error message action and write a custom error message for the user saying the OTP is not correct.

2. Signup with email and password

In the True branch, the flow will continue executing the signup action by adding an HTTP Request action configured as follows:

• ID: change it to ‘signup’ to simplify it.
• URL: add the registration URL of your API.
• Method: choose POST.
• Content type: choose application/json.
• Body: 

{
  "sub": "{{input.body.email}}",	
  "password": "{{input.body.password}}",
}

If needed, add the Authorization header and the secret API key of your API under Headers section. 

Then include another If/then condition action with the following configuration to determine whether the signup was successful or not:

• Condition: reference the {{signup.success}} variable from the outputs of the previous actions, after an execution of the flow, and select ‘is true’ as the condition.

In the False branch, add a Show error message action and customize the message that will be displayed on the form in case the registration fails. 

3. Submit the form and redirect the user

In the True branch, include a Submit the form action and configure it as follows:

• Success message: write the message that the user will see just before the redirection.
• Redirect to URL: enable this option and reference the {{signup.body.claim_url}} from the outputs of the previous HTTP Request action. As in the previous flow, the action will get the destination URL that your API returns to automatically redirect the user.

Again, publish the changes.

Preview, test and debug it

Go back to the form editor and click on the Preview button to test it. You can check if everything has worked correctly in the Executions tab of each of the flows.

Here you can check the inputs, outputs and errors of each action in each execution to fix any possible bugs.

Do you want to try it by yourself? Sign up free or book a demo with our team. Still not sure about it? Take a look at the most common use cases.