How to Add Passwordless Login in WordPress with Magic Links

Understanding Passwordless Login and Magic Links

Passwordless login is an authentication method that eliminates the need for users to remember and enter passwords. Instead, it relies on alternative verification methods such as one-time passwords (OTPs) sent via email or SMS, biometric authentication (fingerprint or facial recognition), or magic links.

Magic links, specifically, are unique, time-sensitive URLs sent to a user’s email address. Clicking the link automatically logs the user into the application without requiring them to enter a password. They provide a smoother and more secure user experience compared to traditional password-based systems.

• Improved User Experience: Users don’t have to remember passwords, reducing friction and frustration.
• Enhanced Security: Eliminates the risk of password-related vulnerabilities like weak passwords, password reuse, and phishing attacks.
• Simplified Account Recovery: Easier to handle forgotten passwords as it relies on verified email addresses.
• Reduced Administrative Overhead: Fewer password reset requests for administrators.

Benefits of Using Magic Links in WordPress

Integrating passwordless login with magic links into your WordPress website offers several advantages:

• Increased User Engagement: A seamless login process encourages users to interact more with your website.
• Reduced Abandonment Rates: Fewer users will abandon the login process due to forgotten passwords or login difficulties.
• Enhanced Brand Reputation: Provides a modern and user-friendly login experience, improving brand perception.
• Improved Security Posture: Mitigates password-related security risks, safeguarding user accounts and your website.

Planning Your Passwordless Login Implementation

Before diving into the implementation, consider the following factors:

• User Roles: Determine if passwordless login should be enabled for all user roles or specific ones.
• Email Service Provider: Choose a reliable email service provider for sending magic links (e.g., SendGrid, Mailgun, AWS SES).
• Customization: Decide on the level of customization required for the login form, email templates, and user experience.
• Security Considerations: Implement security measures to prevent abuse, such as rate limiting and link expiration.
• Backup Plan: Have a fallback mechanism in case the magic link system malfunctions (e.g., offering traditional password login as an alternative).

Choosing a WordPress Plugin

Several WordPress plugins simplify the integration of passwordless login with magic links. Some popular options include:

• Magic Login
• Passwordless Login
• MiniOrange Passwordless Login
• Auth0 (requires an Auth0 account)

For this guide, we’ll focus on a generalized approach adaptable to most of these plugins or even custom implementation. We’ll outline the steps involved in integrating magic link login functionality without relying on one specific plugin’s interface. The core principles remain the same.

Step-by-Step Implementation Guide

1. Install and Activate a Passwordless Login Plugin or Prepare Custom Code

If you’re using a plugin, install and activate it from the WordPress plugin repository. If you’re opting for a custom implementation, you’ll need to create a new WordPress plugin or modify your theme’s `functions.php` file (though creating a dedicated plugin is highly recommended for maintainability).

2. Create a Custom Login Form (Optional)

If your chosen plugin doesn’t provide a suitable login form, or if you’re building a custom solution, you’ll need to create a form where users can enter their email address. This form will trigger the magic link generation process.

“`html

Email Address:


Send Magic Link

“`

3. Implement the Magic Link Generation Logic

This is the core of the passwordless login system. When a user submits their email address, the following steps should occur:

• Validate the Email Address: Ensure the email address is valid and exists in the WordPress user database.
• Generate a Unique Token: Create a unique, random token (e.g., using `wp_generate_password()`).
• Store the Token: Store the token in the WordPress database associated with the user’s ID, along with an expiration timestamp. A custom database table is preferable to using user meta for scalability, but user meta is viable for smaller sites.
• Create the Magic Link: Construct the magic link URL, including the token as a query parameter (e.g., `https://yourwebsite.com/magic-login?token=UNIQUE_TOKEN`).
• Send the Email: Send an email to the user’s email address containing the magic link.

Here’s an example using WordPress hooks and functions:

“`php
// This is code for a custom plugin. Do not paste this directly into your theme’s functions.php
add_action( ‘wp_ajax_send_magic_link’, ‘send_magic_link_callback’ );
add_action( ‘wp_ajax_nopriv_send_magic_link’, ‘send_magic_link_callback’ ); // Allow for non-logged in users

function send_magic_link_callback() {
$email = sanitize_email( $_POST[’email’] );

if ( ! is_email( $email ) ) {
wp_send_json_error( array( ‘message’ => ‘Invalid email address.’ ) );
}

$user = get_user_by( ’email’, $email );

if ( ! $user ) {
wp_send_json_error( array( ‘message’ => ‘No user found with that email address.’ ) );
}

$user_id = $user->ID;
$token = wp_generate_password( 32, true, true ); // Generate a strong token
$expiration = time() + ( 60 * 15 ); // Token expires in 15 minutes

// Store the token in user meta (or custom database table – preferred for larger sites)
update_user_meta( $user_id, ‘magic_link_token’, $token );
update_user_meta( $user_id, ‘magic_link_expiration’, $expiration );

$magic_link = home_url( ‘/magic-login/?token=’ . $token );

$subject = ‘Your Magic Login Link’;
$message = ‘Click the following link to log in: ‘ . $magic_link;
$headers = array(‘Content-Type: text/html; charset=UTF-8’);

wp_mail( $email, $subject, $message, $headers );

wp_send_json_success( array( ‘message’ => ‘A magic link has been sent to your email address.’ ) );

wp_die(); // Required for proper AJAX handling
}
“`

**Important Considerations for the PHP code:**

* **AJAX Endpoint:** The code uses `wp_ajax_*` hooks to create an AJAX endpoint. This allows the form to be submitted without a page reload. Remember to enqueue appropriate JavaScript to handle the AJAX submission and display messages to the user.
* **Security:** Sanitize the email address using `sanitize_email()` to prevent code injection. Also, always escape the output when displaying data to the user.
* **Error Handling:** Include error handling to gracefully handle cases where the email is invalid or the user is not found.
* **Token Generation:** Use a strong token generation function like `wp_generate_password()` to ensure the token is unpredictable.
* **Token Storage:** Consider storing the token and expiration timestamp in a separate database table for better performance and scalability, especially for larger websites. User meta becomes inefficient with a large number of users. If using user meta, be mindful of potential performance implications.
* **Email Sending:** Use `wp_mail()` to send the email. You might need to configure your WordPress website to use an SMTP server for reliable email delivery. Consider using a plugin for SMTP configuration for better email delivery rates.
* **Token Expiration:** Ensure that the token has an expiration time to prevent abuse.
* **AJAX Response:** Use `wp_send_json_success()` and `wp_send_json_error()` for standardized AJAX responses, making it easier to handle them in JavaScript.
* **Nonce:** Implement a nonce to verify the authenticity of the AJAX request and prevent Cross-Site Request Forgery (CSRF) attacks.

“`javascript
// Example JavaScript for handling the AJAX request (requires jQuery)
jQuery(document).ready(function($) {
$(‘#magic-link-form’).submit(function(e) {
e.preventDefault();

var email = $(‘#email’).val();

$.ajax({
url: ajaxurl, // WordPress AJAX URL
type: ‘POST’,
data: {
action: ‘send_magic_link’,
email: email
},
dataType: ‘json’,
success: function(response) {
if (response.success) {
alert(response.data.message); // Display success message
// Optionally redirect to a “check your email” page
} else {
alert(response.data.message); // Display error message
}
},
error: function(error) {
console.error(‘Error:’, error);
alert(‘An error occurred. Please try again later.’);
}
});
});
});
“`

4. Implement the Magic Link Verification Logic

When a user clicks the magic link, the following steps should occur:

• Retrieve the Token: Extract the token from the URL query parameter.
• Validate the Token: Check if the token exists in the database and has not expired.
• Authenticate the User: If the token is valid, retrieve the associated user ID and log the user in using `wp_set_auth_cookie()` and `wp_set_current_user()`.
• Redirect the User: Redirect the user to their profile page or another desired destination.
• Invalidate the Token: Delete the token from the database to prevent reuse.

Here’s an example implementation:

“`php
add_action( ‘template_redirect’, ‘verify_magic_link’ );

function verify_magic_link() {
if ( isset( $_GET[‘token’] ) ) {
$token = sanitize_text_field( $_GET[‘token’] );

// Query the database (or user meta) for the user with the matching token
global $wpdb;
$user_id = $wpdb->get_var( $wpdb->prepare(
“SELECT user_id FROM {$wpdb->usermeta} WHERE meta_key = ‘magic_link_token’ AND meta_value = %s”,
$token
));

if ( $user_id ) {
$expiration = get_user_meta( $user_id, ‘magic_link_expiration’, true );
if ( time() < $expiration ) { // Token is valid and not expired wp_set_auth_cookie( $user_id ); wp_set_current_user( $user_id ); do_action( 'wp_login', $user->user_login, $user );

// Delete the token and expiration
delete_user_meta( $user_id, ‘magic_link_token’ );
delete_user_meta( $user_id, ‘magic_link_expiration’ );

wp_safe_redirect( home_url( ‘/wp-admin/’ ) ); // Redirect to admin dashboard or profile
exit;
} else {
// Token expired
echo ‘Magic link has expired.’;
}
} else {
// Invalid token
echo ‘Invalid magic link.’;
}
}
}
“`

**Key Considerations for the Verification Logic:**

* **Security:** Always sanitize the token retrieved from the URL to prevent code injection.
* **Database Query:** Use parameterized queries (e.g., `$wpdb->prepare()`) to prevent SQL injection vulnerabilities.
* **Token Expiration Check:** Ensure the token hasn’t expired before authenticating the user.
* **Authentication:** Use `wp_set_auth_cookie()` and `wp_set_current_user()` to properly authenticate the user.
* **Redirection:** Redirect the user to a relevant page after successful login. Use `wp_safe_redirect()` to prevent malicious redirects.
* **Token Deletion:** Delete the token after successful authentication to prevent reuse.
* **Error Handling:** Provide informative error messages to the user if the token is invalid or expired.

5. Customize Email Templates

Customize the email template used to send the magic link to match your website’s branding and messaging. You can use HTML and CSS to style the email and include your logo. Most email service providers offer visual email builders to simplify this process. If coding your own, use inline CSS for best compatibility across different email clients.

6. Test Thoroughly

Test the passwordless login functionality thoroughly to ensure it works correctly and securely. Test different scenarios, such as:

• Successful login with a valid token.
• Login with an expired token.
• Login with an invalid token.
• Submitting the login form with an invalid email address.
• Handling rate limiting to prevent abuse.

7. Implement Security Measures

Implement security measures to protect your passwordless login system from abuse:

• Rate Limiting: Limit the number of magic links that can be requested from the same IP address within a given time period.
• Token Expiration: Set a reasonable expiration time for magic links (e.g., 15 minutes).
• IP Address Tracking: Optionally track the IP address associated with each token to detect suspicious activity.
• Nonce Verification: Implement nonce verification on the AJAX form submission.
• Two-Factor Authentication (Optional): Consider adding two-factor authentication as an extra layer of security. While contradicting the passwordless aspect, it can be added as an extra optional layer.

Troubleshooting Common Issues

• Magic Link Not Received: Check the user’s spam folder, verify the email address is correct, and ensure your email service provider is properly configured.
• Invalid or Expired Token: Verify the token in the URL matches the token stored in the database and that it hasn’t expired. Ensure your server’s time is synchronized.
• Login Loop: Clear your browser’s cookies and cache and try again. Check for plugin conflicts.
• AJAX Errors: Inspect the browser’s console for JavaScript errors and ensure the AJAX request is configured correctly. Verify that `ajaxurl` is correctly defined in your JavaScript code.

Conclusion

Implementing passwordless login with magic links can significantly improve the user experience and security of your WordPress website. By following the steps outlined in this guide and carefully considering the security implications, you can create a seamless and secure login system for your users. Remember to choose a reliable email service provider, customize the email templates, and thoroughly test the functionality before deploying it to a live environment.