Passwordless forms are a popular alternative to passwords as a security system. Given the weakness of passwords —tendency to forget them, predictable combinations, data breaches—, magic links arise as a useful method to secure access to a certain webpage.
Magic links aren't the only method to build passwordless forms, but they are a secure and frictionless alternative to authenticate users. You can easily sign users in by handing them an authenticated URL, either via email or SMS.
Today, we're showing you how to build your own passwordless form with a magic link for a PrestaShop site. In only some minutes, you can create a personalized, flexible and secure signup or login system.
How to authenticate users with magic links in PrestaShop step by step
Sending magic links to your users with Arengu is easier than ever and it requires no coding skills. Simply follow these 4 steps and you will have an advanced and secure signup or login system in your PrestaShop site.
Then go to your PrestaShop dashboard and add the Arengu module under Modules > Upload a module. Drag and upload the file you have previously downloaded.
2. Build a form
The first step when building your passwordless form is to build the form itself. Afterwards, you can continue to add the logic and your own personal details, like third-party integrations.
To build your form, you simply need to go to the Forms editor. There, you can choose a template or start your form from scratch. In this case, we will build a passwordless form with a magic link, but you can also use magic links for two-factor authentication processes.
3. Build the flow
Now, we will proceed to create the server-side logic for our passwordless form. To do so, we will link a flow that will be executed after the user completes the first step:
This flow will have the following actions:
Check email in PrestaShop. This action checks if the email already exists in your PrestaShop database. This way, users who are already registered won't be signed up again, but reminded to log in instead.
To configure it, you must fill in the base URL, the API key from your PrestaShop account and the email you'd like to check. You can find the base URL and your API key in your PrestaShop account settings. To fill the email field, click on the drop-down menu, select the form you're using, and then the field you'd like to check.
If/then condition. This action triggers different actions depending on the result of the Check email action.
Signup in PrestaShop. This action automatically generates a magic link for a passwordless signup or login in PrestaShop.
To configure it, go to your PrestaShop panel and copy both the base URL and your API key. Paste them in Arengu under Base URL and API Key.
To fill in the email field, use the drop-down menu to select your user's email.
Please note you only need to fill in the Password field if you're using a form with email and password. If you're using a passwordless form, you can leave this field empty.
If there is a particular URL you'd like to redirect your users to, add it under Redirect URL. When not filled, users will be automatically redirected to their account page by default.
Lastly, you can configure the expiration time of the token in the magic link. We recommend you to keep it as short as possible for security reasons. The default time is 5 minutes.
Send email with SendGrid. With Arengu, you can send emails to your users thanks to the native integrations with SendGrid and MailJet. In this case, we will use the SendGrid native action, but keep in mind you can use any other email provider as long as it has an API.
To configure this action, you only need to fill in the mandatory fields: API key, sender, recipient, type of email, subject line and body.
To fill in the API key, go to your SendGrid account and copy the secret API key to then paste it in Arengu, under API key.
To fill in the recipient, choose the user's email like we have done in the precedent actions.
Keep in mind you must reference the magic link in the body of the email so your users can click it and access your site.
If you wish to add a corporate look to your email or if you simply want to personalize its looks, you can add an HTML template and paste it under Message.
Submit theform or Error message. These are the final actions of the flow. The Submit the form action will be executed if no error is found. Simply write down a success message or an error message in each action, to let your users know about the status of the signup process.
4. Embed in PrestaShop
After this, your form with magic link will be ready to embed in your PrestaShop page. Go to Forms > Embed and select the ideal way of embedding your form. Copy and paste the lines of code of your preferred method and embed it directly in your PS page.
Keep in mind you can use magic links either to implement multi-factor authentication in your forms or simply to go passwordless! Would you like to give it a try already? Try Arengu for free and start exploring any kind of advanced form!
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.