How to use Magic Link in Next.js?

How to use Magic Link in Next.js?

Published 8th, November, 2022

2 min read

Next.js, with its advanced features like page-base routing methods, support for Hot Module Development and auto code splitting, has revolutionised front-end development, thus making React.js, its parent programming language a popular technology.

And then it brings Magic feature to the market. ‘Magic’ is a no-password authentication sdk for Next.js that allows you to integrate various authentication methods in your application. This includes allowing a user to carry out password-less email login with magic link feature, besides also providing you with social application login and WebAuth (web authentication for authenticating a hardware device with fingerprint feature or with YubiKey).

One of the most common gripe of many developers is the time and efforts it takes to build an auth functionality in their application. This is where Magic chimes in an helps you create login based on email links, which are now being used very commonly by online information platforms and apps such as Medium. The best thing about Magic Link is that it doesn’t take much effort to integrate it into your application and yet provides robust security.

A simple guide for those who seek

The discussion is incomplete without a small demo of how to integrate the code into your application.

The below snippets of code are referred from Vercel’s official website (the community behind Next.js).

// pages/index.js
import Link from "next/link";

export default function HomePage() {
  return (
    <Link href="/login">
      <a> Login </a>
    </Link>
  );
}

In the above snippet, we import link from next and use it in the HomePage function by returning it in the form of an HTML <Link>. Thanks to the ‘file system routing’ functionality of Next.js, our code to generate a link is so compact.

The next step is to add a login page.

// appPages/login.js
import { useRouter } from "next/router";

export default function usrLogin() {
  const router = useRouter();
  const Submit = async (appEvent) => {
    appEvent.preventDefault();

    const { elements } = appEvent.target;

    // Add the Magic code here. Once we have the token from magic, update our own database
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email"> Email </label> <input name="email" type="email" />
      <button> Log in </button>
    </form>
  );
}

Inside the above snippet where we have put a comment, you can add code that is best explained by the following pseudo code.

const authRequest = await fetch();
if (authRequest.ok) {
  // We successfully logged in, our API
  // set authorization cookies and now we
  // can redirect to the dashboard!
  router.push("/dashboard");
} else {
  /* handle errors */
}

A constant variable authRequest gets the value of the inbuilt fetch() function being called with await. If the authentication request passes, we login to our dashboard with router.push(‘/dashboard’) doing the job, and if not, our errors are handled.

Wrapping it up!

Magic certainly does its magic by easing your task as a developer, to simplify embedding no-password authentication in your application, thus helping you create a next-generation application.

Whether you are a newbie or a seasoned player, learning and implementing this tool is going to be very beneficial for you to deliver quality and get noticed.

So long and happy Java-Scripting!

References:

  1. Magic
  2. Dev