Building an OTP passwordless login form in Prestashop

Introduction
Building an OTP passwordless login form in Prestashop

Easily reinforce your eCommerce's security with Arengu, creating and embedding this 2-step form, and reduce also users' friction during the login process.

In this tutorial you will learn how to build a OTP passwordless login form to grant easy access to your users, without remembering their passwords, without giving up security.

Install the module in your account

If you have not already done it, the first step is to install Arengu's module in your PrestaShop account. We assume that you have already done it, but if not, you can check on this post how to install it, and get here the file.

Build your form in Arengu

Go to 'Forms' > 'Create a form' and choose the 'Email Verification Form' template to save time, and use the dragons -and-drop editor to completely customize it. You will be able to change texts, labels, colors... and edit every detail to make it fit perfectly!

In this use case, we need a 2-step form to build the OTP passwordless process, in which step 1 will ask for an email, and step 2 will include a number field to paste the temporary code. Just remember to set the fields as 'Required'.

Set up a flow for each form step

If you have chosen a template, the proper flows will be automatically created and connected to your form, and you will only have to edit them as we explain below. The action of sending temporary code will vary depending on whether you have chosen email or SMS, but it's just as easy and fast in both cases ;)

If you have created the form from scratch, you will need to create the flows from scratch too, that's why we recommend templates! If this is your case, you can learn more in this post about adding server-side logic without coding.

Flow 1: Check email & send temporary code

To execute these actions, we just need to edit flow 1, following the steps below. It will have the structure that you can see in this image:

1. Add and configure the 'Check email' action

Add the 'Check email' action and configure it by adding the base URL, the API key and the email you want to check.

Copy the base URL and the API key from your PrestaShop account, go back to the flow in Arengu, and paste them under 'Base URL' and 'API key'. Remember to keep it secret!

Add an 'If/then condition' action to display different action, if the email entered is new or not, like you can see in the image below:

2. Customize the error message

Go to the 'Show error message' action, and edit the message to show the user
the result. Just remember to clearly explain it!

3. Set up the OTP and the email sending options

As you can see in the flow, if email is registered it will automatically generate a temporary code, whose length you can configure in the action.

Regardless of the option you have chosen - by SMS using Twilio, or by email with SendGrid or MailJet - you will simply have to copy and paste the API key and the secret key in the sending action, getting them from your account in that service.

Just remember to keep these keys secret, and to custom the message with the one-time password variable! You can get it from any of the drop-downs.

Flow 2: Verify the code & Redirect the user

The second flow is needed to verify if the temporary code that the user pasted is correct, and complete the login process. To set up this, we just need to edit this flow:

It will automatically check if the temporary code is correct, just follow these steps:

1. Configure the 'Passwordless login' action

You just need to replicate the configuration of this action of flow 1, to verify again that the email is registered, and proceed to login. That easy!

3. Submit the form

Click on the 'Submit form' action, and get the authenticated URL variable from drop-down. As you can see on the image below, you can also edit the message that the user will see while being redirected.

Finally, remember to click on the 'Publish' button in the upper right corner so your form starts working right away. Now, all we need is to embed it in your e-commerce.

Embed your form anywhere!

Copy the 'Inline embed' piece of code from the 'Share' tab, on your form edition page, and paste it in as many pages as you want.

Now your form is ready to use! Just remember to test it before! If you need it, you can learn more about testing and debugging mode in this post.

Do you want to try it by yourself? Sign up for free, schedule a demo or, if you prefer to continue reading about the new native actions, we recommend you take a look at how to build a social login form for PrestaShop. Hope to see you!

Author

Andrea L. Lozano

Social Media & Content Specialist.

View Comments
Next Post

Magic links: The future of online authentication

Previous Post

Create a custom login form in PrestaShop, in minutes