Check that you meet at least the first two requirements before starting:
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:
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:
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!
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:
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:
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:
Now we have our first flow built, don’t forget to click on ´Publish´.
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:
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:
Add an ´If/then condition´ action:
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”.
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:
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:
Fields in `Data`:
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:
On the other path, the ´false´ path will show an error message, the one received from Supabase:
The last action in this flow before submitting the form is to store the “magic link” as a state variable. Data fields:
And then, add the action to ´Submit the form´.
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´:
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.
Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.