Building a Seamless Sign-In Form with Email and Magic Links

byCodepen.tech -
0

 

Introduction

Building a Seamless Sign-In Form with Email and Magic Links

As online security becomes increasingly important, many platforms are adopting passwordless authentication methods like magic links. A magic link allows users to sign in by simply clicking a link sent to their email, eliminating the need to remember complex passwords. This creates a seamless, secure, and user-friendly experience that simplifies the login process. In this step-by-step guide, we’ll show you how to build a seamless sign-in form using email and magic links with HTML, CSS, and JavaScript, along with the best practices for implementing this method.

What is a Magic Link?

A magic link is a one-time-use link sent to the user’s email address for authentication. When the user clicks the link, they are automatically signed in to the platform without needing to enter a password. Magic links provide a more secure and convenient alternative to traditional passwords, as they reduce the risk of password reuse, hacking, or phishing.

Step-by-Step Guide to Building a Sign-In Form with Magic Links

1. Basic HTML Structure for the Sign-In Form

We’ll start by building the HTML structure for a sign-in form that uses email and magic links. Users will enter their email address, and a magic link will be sent to their inbox for login.



<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign-In with Magic Link</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="form-container">
    <form id="magic-link-form">
      <h2>Sign In</h2>

      <!-- Email Input -->
      <div class="input-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" required>
      </div>

      <!-- Submit Button -->
      <button type="submit">Send Magic Link</button>

      <!-- Success Message -->
      <small id="success-message"></small>
    </form>
  </div>

  <script src="scripts.js"></script>
</body>
</html>

Explanation of the HTML Structure:

  1. Form Layout:

    • A simple form where users enter their email address to request a magic link.
    • A button labeled “Send Magic Link” submits the form, and a small message area (#success-message) will display confirmation once the link is sent.

  2. Email Field:

    • The email input field is required (type="email" required) to ensure that only valid email addresses are entered before sending the magic link.

2. CSS for Styling the Magic Link Sign-In Form

We’ll add some CSS to style the sign-in form, giving it a clean, modern appearance while maintaining responsiveness across devices.


/* General Styling */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
}

.form-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

h2 {
  margin-bottom: 20px;
  text-align: center;
}

.input-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

input {
  width: 90%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #008000;
}

#success-message {
  display: none;
  margin-top: 15px;
  font-size: 14px;
  color: green;
}

Explanation of the CSS:

  1. Form Styling:

    • The .form-container uses a white background, rounded corners, and shadow for a clean and modern card-style layout.
    • The input fields and button are styled for ease of use, and the button has a hover effect to improve interactivity.

  2. Success Message:

    • The success message (#success-message) is hidden by default. It will be displayed when the magic link has been successfully sent, providing feedback to the user.

3. JavaScript for Sending the Magic Link and Handling Form Submission

In this step, we’ll use JavaScript to handle form submission. When the user submits their email address, we’ll simulate sending a magic link and display a success message.


// scripts.js

document.getElementById('magic-link-form').addEventListener('submit', function(e) {
  e.preventDefault(); // Prevent default form submission

  const email = document.getElementById('email').value;
  const successMessage = document.getElementById('success-message');

  if (validateEmail(email)) {
    // Simulate sending the magic link
    sendMagicLink(email);

    // Display success message
    successMessage.textContent = `A magic link has been sent to ${email}. Please check your inbox.`;
    successMessage.style.display = 'block';
  } else {
    alert('Please enter a valid email address.');
  }
});

// Function to Validate Email Address
function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
}

// Simulate sending the magic link (replace with real API call)
function sendMagicLink(email) {
  console.log(`Magic link sent to: ${email}`);
  // In a real-world scenario, this would involve an API call to send the email
}

Explanation of the JavaScript:

  1. Form Submission Handling:

    • The script prevents the default form submission behavior (e.preventDefault()) and retrieves the email value from the input field.

  2. Email Validation:

    • The validateEmail function checks if the email format is valid using a regular expression. If the email is invalid, the user is prompted to enter a correct email.

  3. Sending Magic Link:

    • The sendMagicLink function simulates the process of sending the magic link by logging the email to the console. In a real-world scenario, this would be replaced by an API call to your backend to generate and send the magic link.
    • Once the magic link is “sent,” a success message is displayed to the user, confirming that the link has been sent.

Best Practices for Implementing Magic Link Authentication

To ensure a secure and seamless user experience, follow these best practices when implementing magic links for authentication.

1. Use Short-Lived, One-Time Links

Magic links should be time-limited and one-time-use for security purposes. Typically, these links should expire within 10-15 minutes. This ensures that even if someone intercepts the link, they won’t be able to use it after it expires.

2. Send Links Over Secure Channels

Always use HTTPS for sending and receiving magic links to ensure that communication is encrypted. This prevents man-in-the-middle attacks where malicious actors might intercept the magic link.

3. Generate Unique, Non-Guessable Tokens

When generating magic links, ensure that the token included in the link is long, random, and cryptographically secure. Avoid using sequential or easily guessable tokens, as they could be vulnerable to brute-force attacks.





https://yourwebsite.com/magic-login?token=abcdef123456

The token should be securely generated on the server side and linked to the user's email address for validation.

4. Notify Users of Successful Login

Once a user clicks on the magic link and successfully logs in, send them an email notifying them of the login. This will alert users in case someone else tries to access their account using a magic link without their permission.

5. Handle Expired or Invalid Links Gracefully

If a user tries to use an expired or invalid magic link, show a clear error message and allow them to request a new link. Don’t simply redirect them back to the sign-in page without context.



if (isMagicLinkExpired(token)) {
  alert('This link has expired. Please request a new one.');
}

See the Pen Building a Seamless Sign-In Form with Email and Magic Links by codepen (@codepen-the-selector) on CodePen.

Conclusion

Building a sign-in form with magic links provides a more user-friendly and secure way for users to log into your platform without passwords. By sending a one-time-use link to the user’s email, you reduce the risks associated with password reuse and phishing attacks, while offering a seamless login experience. This guide has shown you how to implement a magic link sign-in form using HTML, CSS, and JavaScript, along with best practices for maintaining security.

Tags

You may like these posts

Previous Post Next Post

نموذج الاتصال