Sign-up form with OTP and auto login using Supabase

Previous requirements

Check that you meet at least the first two requirements before starting:

• An Arengu account to build the form and the flows. 
• A Supabase account: for this example, we’ll use a powerful open source alternative to Firebase.
• A redirection page: you can follow this tutorial without this requirement, but we’ve decided to use this example as a playground to demonstrate the sign up and the auto login have been successful in the last step.

What are we going to build?

This tutorial will cover how to create a sign-up form with OTP verification in Arengu linked to Supabase with autologin, which will act as our database. Overview of the process:

1. One user fills the first part of the form with, among other things, an email. 
2. OTP verification: the user receives a code by mail. 
3. Once all the data is provided and the OTP is confirmed, we’ll try to create the user in Supabase.
4. The user is redirected to a callback URL: the redirection page we’ll set at Supabase. The user will be logged in.

Supabase required information and configuration

Let’s start by locating all the data we’ll need while we build the form in Arengu. Go to your Supabase account and in Settings, API, you’ll find: 

• A “service_role” or “secret” key.
• The URL of the project.

Moreover, we can set our “Site URL”, where the user will be redirected after the signup in Arengu. In our case, we are running a local server with a page that will confirm that the user has not only registered but also signed in the page, that’s why we are using ´localhost:3000/profile´. Wait until the end to see the result! 

First step: basic data and OTP generation

Create a blank form in Arengu and add three form steps. In the first step we’ve added three fields, changed their ID in order to get the reference of each field easily during the next steps and, eventually, set all of them as required:

• Full name: is a text field with the ID changed to ´full_name´.
• Email: its ID is ´email´.
• Password: with the ID ´password´.

After the Step 1, add a step flow by clicking on the ‘plus’ button. Then click on “Create an empty flow”, give it a name, and preview it in a new tab. In this flow we want to generate a one-time password and send it by email, the result will be something like this:

But let’s go deeper into our flow. Firstly, add a “Generate one-time password” action and set these values:

• ID: generateOtp.
• Reference value: {{input.body.email}}. Remember in the first step we set all the IDs to more recognizable ones? This is the reason, now we can reference them from the flows. 
• Code length: 4.

We have associated the random code to the user’s email. To send the code to the user, add a “Send email” action and set the values:

• Recipient name: {{input.body.full_name}}.
• Recipient email: {{input.body.email}}.
• Subject: {{generateOtp.code}} is your verification code.
• Content: {{input.body.full_name}}, {{generateOtp.code}} is your verification code.

Now we have our first flow built, don’t forget to click on ´Publish´.

The verification step

The user will receive an email at the same time this screen is displayed.

To recreate exactly this step, we’ll take advantage of custom fields, one of our most powerful tools. In the form editor, add a ´Custom´ field in the second step and set:

• ID: verification_code.
• Required: checked.
• Params: only one parameter that will be used by our source code (see the next field). digits: 4. The value must be consistent with the ´Code length´ value set previously in the ´Generate one-time password´ action. Otherwise, this step won’t work.
• Source code: paste here the source code you’ll find in our resource repository.

Again, add a new step flow, which will be responsible for checking the OTP and allowing the user to go to the next step or display an error message. Let’s create this structure:

The first action will be the one called ´Verify one-time password´. Make sure you set the fields: 

• ID: verifyOtp.
• Reference value: {{input.body.email}}.
• Code value: {{input.body.verification_code}}.

Add an ´If/then condition´ action:

• Condition: reference the result of the OTP verification by typing {{verifyOtp.valid}}. We want to check if the result ´is true´.

Remember you can always look for the available variables using the ´plus´ button, after an execution of the flow.

The ´true´ path will take the user to the next step, add the ´Jump to a form step´ action with the corresponding Form and the next Step as shown in the image:

However, if the user fails the attempt, an error message will be displayed. Simply add a ´Show error message´ action with the Error message you want to show, in our case it is “Your OTP is not valid”.

Profiling the user

As we are interested in knowing more about the registered user and its company, in the step 3 of the form we’ve added 4 more fields, all of them set as required:

• Company name: is a ´Text´ field, its ID is ´company_name´.
• Country of the company: a dropdown field, which can be edited in bulk, just click on Advanced, Bulk edit. The ID is set as ´company_country´.
• Industry: another dropdown field. The ID is ´company_industry´.
• Your role: for this field we’ve chosen a ´Choice´ field with several options such as Engineering, Marketing, etc. 

Creating the user in Supabase

A third step flow after the third step will try to create the new user. When it’s been created, we’ll receive a “magic link” from Supabase that we’ll use in the last step to redirect the user and automatically log in our system. Nevertheless, in case the user isn’t registered in our database in Supabase, we’ll display the error message received from them.

First of all, the Supabase Sign up action, responsible for sending the data of the user to Supabase:

• ID: signUp.
• Connection: if you have used Supabase with Arengu previously, you’ll probably have a connection stored in the vault, so simply select it from the list. But if this is your first time building a form with Arengu and Supabase, you’ll need to add a new connection. When you are prompted for a Bearer token, just paste the “service_role” or “secret” key provided by Supabase. If you aren’t sure what we are talking about, simply go to the first step of this tutorial.
• Email: {{input.body.email}}
• Password: {{input.body.password}}

Fields in `Data`:

• full_name: {{input.body.full_name}}
• company_name: {{input.body.company_name}}
• company_industry: {{input.body.company_industry}}
• company_country: {{input.body.company_country}}
• role: {{input.body.role}}

It’s time to check if the user has been created successfully, with an ´If/then condition´ action. What we want to check is if {{generateLink.status}} is equal to 200, because it means that the operation has worked as expected in Supabase.

In the ´true´ path, we’ll create a magic link to log the user in. Add a Supabase “Generate link” action:

• Connection: we have set our Supabase connection previously, select it.
• Email: {{input.body.email}}
• Redirect URI: our test environment is http://www.localhost:3000/profile, but here you have to set your own.

On the other path, the ´false´ path will show an error message, the one received from Supabase: 

• Error message: {{signUp.body.msg}}.

The last action in this flow before submitting the form is to store the “magic link” as a state variable. Data fields:

• redirectUrl: {{generateLink.body.action_link}}

And then, add the action to ´Submit the form´. 

Auto login with Arengu and Supabase

The last step of our form isn’t the classic “Thank you”. Instead of that, we’ve set the redirection URL provided by Supabase and stored it as a state variable. So disable the ´Thank you block´ enabled by default and check ´Redirection´:

• Redirect URL: {{state.redirectURL}}.

Test and debug

Now all the steps and flows are ready, remember to click on ´Publish´ and ´Preview´ to test the form. If all has worked as expected and you are using this code from Supabase running on a local server as we are, you’ll see something like this: 

Look at the “user_metadata” field to make sure Supabase is receiving all the data properly. Remember that our “localhost” is but you can use whatever you want as a redirection page.

‍

If the user tries to sign up a second time, this error will be displayed. 

Apart from these empirical tests, you can check the ‘Users’ section of your Supabase’s account to confirm that the user has been created successfully. Ultimately, we truly recommend you to use our debugger, which can be found clicking on “Executions” in a flow builder. As you can see in this screenshot, in the debugger you can go action by action checking the input, output and errors occurred during the flow execution. 

Do you want to build your own form? Try to create your own complex flow with all the custom integrations you need. Also you can start checking out our native integrations. Sign up free or book a demo with our team.