Guides & tutorials

Magic links with WordPress

Import this tutorial scenario in your workspace
Table of contents

Magic links are authenticated URLs you can use to authenticate users without passwords in your 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), without coding.

Passwordless forms in WordPress: Creating and sending magic links to authenticate users

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 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.

Passwordless forms for WordPress and WooCommerce

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 + button at the right side of the flow box to start creating an empty flow.

Passwordless forms for WordPress and WooCommerce

This is how the whole flow looks like. We'll show you how to build it and how to configure each action.

Form builder: Passwordless forms for WP

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.

Form builder: Passwordless forms for WordPress

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.

Form builder: Passwordless forms for WordPress
  • 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. 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.

Low code form builder: Passwordless forms for WordPress
  • Submit the form or Error message. These two final actions are executed at the end of this flow.
Low code form builder: Passwordless forms for WordPress

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.

Implementing passwordless forms in WordPress

4. Embed and start onboarding users!

Arengu allows you to embed your form wherever you want. Go to Forms > Embed 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.

Embedding passwordless forms in WordPress

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!

You might like to read

See more tutorials

Getting started with Arengu

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.