Magic links for WordPress and WooCommerce: Go passwordless!

Introduction
Magic links for WordPress and WooCommerce: Go passwordless!

Magic links are authenticated URLs you can use to authenticate users without passwords in your auth forms. This solution present a robust layer of security, and it doesn't interfere with the user experience by adding friction. On the contrary, magic links present the minimum amount of friction!

If you run a WordPress site and you want to turn your forms into passwordless to your onboarding process, keep reading and learn how to create and send magic links in WordPress (and WooCommerce), in no time and with low code.

While most form-builder plugins don't allow creating complex flows, Arengu enables you to build sophisticated forms and flows for a modern and up-to-date website.

Today we'll show you how to build your signup form with magic links in 3 steps and with few coding skills.

1. Get the Arengu plugin for WordPress

You still don't have the Arengu plugin for WordPress? Download it for free and start exploring all its possibilities — signup or login forms, social login, passwordless forms, two-factor authentication... Build any form you can imagine and easily embed it in your WordPress site.

2. Create a personalized form

We'll start by creating a personalized form in the Forms editor. Here you will be able to add as many fields, blocks and steps as you need, simply by dragging and dropping the elements in the editor.

In this editor you will find all the options regarding your form: social login, hidden fields, design and theme of the form, data storage, etc.

In this example, we're going to create a one-step form with only one field — the email field. This will ensure a minimum level of friction for our users.

3. Create personalized logic

Now we can continue to add personalized server-side logic for our form, which includes creating and sending the magic link.

In the Forms editor, click on Flows on the left-side menu of your screen. Here you will see an overview of your form and the flows linked to it. This overview comes in handy to see the whole path at a glance, and it is particularly useful for complex multi-step forms.

Click on the + sign at the right side of the flow box to start creating an empty flow.

This is how the whole flow looks like. But we've got you covered! We'll show you how to build it and how to configure each action!

These are all the actions in the flow:

  • Signup in WordPress. Generates a magic link you can use for a passwordless signup or for a multi-factor authentication signup in Wordpress. In this example, this is the only authentication factor, so you don't have to fill in the Password field.

To set this action, you need the secret keys you can find in your WordPress account. Take the base URL and the secret API key and paste them in Arengu in the correspondent fields. Select the email by clicking on the drop-down menu: select the form you're using and then the email form.


The Redirect URL field helps you redirect the user to your desired URL. If it's empty, users will be redirected to the account page by default. You can also set the expiration time of the authentication token.

  • If/then condition. After setting a determined condition, it triggers different actions. In this case, it reads the result of the Signup action and triggers different responses.

In this case, the condition we have set is {{signup.success}} and is true.

  • Send email with SendGrid. Sends emails with SendGrid as the email provider.

Arengu provides different native actions to complement each action of the flow. In this case, the magic link will be sent to the user via email using SendGrid, but you can also create a form where the magic link is sent via SMS or via Telegram, among others. Keep in mind you can create your own action by using the HTTP Request action and calling the API you want.

To set the SendGrid action, fill in API key, sender, recipient, email type, subject and message. You can find the API key in your SendGrid account. To fill the rest of the fields, use again the drop-down menu and select the correspondent field. Remember to reference the magic link in the body of the email! In the image above, you can see we added the body of the email as HTML content and we added the reference {{signup.body.login_url}}, that will return the magic link to the user.

  • Submit the form or Error message. These two final actions are executed at the end of this flow.

If no error is produced, the form will be successfully submitted. In the action Submit the form, add a success message to let users know what's happening.

4. Embed and start onboarding users!

Arengu allows you to embed your form wherever you want. Go to Forms > Share to find all the sharing option for your form. To add in a WordPress site, simply select the shortcode in the WordPress section and paste it in your site where you like the most.

Any further changes will be automatically executed once you click the Publish button in Arengu! You don't need to deploy your page or update every WordPress page where you embedded the form. Keep in mind you can embed the same form in different websites too!

Give Arengu a try and start implementing passwordless in your WordPress page, in any other CMS or in your website. Try Arengu for free and learn all you can do!

View Comments
Next Post

Secure your WordPress admin with a 2FA login with OTP

Previous Post

4 common problems in signups and checkouts and how to solve them with Arengu