Authentication in Next.js with Magic Links: A Comprehensive Guide

In today's fast-paced digital landscape, providing seamless authentication experiences is paramount for any web application. Next.js, a popular React framework, offers a robust platform for building efficient and performant web applications.

When it comes to authentication, integrating Magic Links can significantly enhance user experience by eliminating passwords and reducing friction in the login process.

Why Choose Magic Links for Authentication?

Magic Links authentication simplifies the login experience by sending users a secure, one-time login link via email or other channels. Users simply click on the link to authenticate, eliminating the need to remember passwords and enhancing security.

This approach is not only user-friendly but also reduces the risk of security vulnerabilities associated with traditional password-based authentication.

Setting Up Next.js with Magic Links

Install Dependencies: Begin by installing the necessary packages using npm or yarn.

npm install magic-sdk  
  

Initialize Magic SDK: Initialize the Magic SDK in your Next.js application. You can do this in your pages/_app.js file.

import { Magic } from 'magic-sdk';

const magic = new Magic(process.env.NEXT_PUBLIC_MAGIC_API_KEY);  
  

Implement Magic Link Authentication: Create a login page where users can enter their email address to receive a Magic Link.

import { useState } from 'react';

const LoginPage = () => {
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await magic.auth.loginWithMagicLink({ email });
      // Redirect to dashboard or desired page upon successful login
    } catch (error) {
      console.error('Error logging in:', error);
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Enter your email"
        />
        <button type="submit">Send Magic Link</button>
      </form>
    </div>
  );
};

export default LoginPage;  
  

Handle Authentication Callback: After users click the Magic Link and return to your application, handle the authentication callback to complete the login process.

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const CallbackPage = () => {
  const router = useRouter();

  useEffect(() => {
    async function handleAuthCallback() {
      try {
        await magic.auth.loginWithCredential();
        // Redirect to dashboard or desired page upon successful login
        router.push('/dashboard');
      } catch (error) {
        console.error('Error logging in:', error);
      }
    }

    handleAuthCallback();
  }, []);

  return <div>Logging in...</div>;
};

export default CallbackPage;  
  

Conclusion

Integrating Magic Links authentication into your Next.js application offers a streamlined and secure login experience for your users. By eliminating passwords and simplifying the authentication process, you can enhance user satisfaction and improve the overall security of your application.

With the provided code examples, you can quickly implement Magic Links authentication and take your Next.js application to the next level.