Magic Authentication in React Next.js

Magic Authentication in React Next.js

In today's digital world, security is of utmost importance. With the increasing number of cyber attacks, it is essential to ensure that our applications are secure and protected from unauthorized access. One of the most common ways to secure an application is through authentication. Authentication is the process of verifying the identity of a user or system. In this tutorial, we will explore how to implement magic authentication in a React Next.js application.

Magic authentication is a passwordless authentication method that uses email as the primary identifier. It allows users to log in to an application without the need for a password. Instead, users receive a magic link via email that grants them access to the application. Magic authentication is a secure and user-friendly way to authenticate users, as it eliminates the need for users to remember passwords and reduces the risk of password-related security breaches. In this tutorial, we will learn how to implement magic authentication in a React Next.js application using the Magic SDK. We will cover the entire process, from setting up the Magic SDK to integrating it into our application and testing the authentication flow. By the end of this tutorial, you will have a solid understanding of how to implement magic authentication in your React Next.js applications.

What is Magic?

Magic Authentication is a passwordless authentication method that uses email as the primary identifier. It allows users to log in to an application without the need for a password. Instead, users receive a magic link via email that grants them access to the application. Magic Authentication is a secure and user-friendly way to authenticate users, as it eliminates the need for users to remember passwords and reduces the risk of password-related security breaches. Magic Authentication is based on the concept of email-based authentication, which is a secure and convenient way to authenticate users. With Magic Authentication, users can log in to an application with just one click, without the need to remember complex passwords. Magic Authentication is easy to implement and can be integrated into any web application, making it an ideal choice for developers who want to provide a secure and user-friendly authentication experience for their users.

Why use Magic for Authentication in React Next.js application?

There are several reasons why one should use Magic for authentication. First, Magic provides a secure and user-friendly way to authenticate users without the need for passwords. This eliminates the risk of password-related security breaches, such as phishing attacks and password leaks. Magic Authentication is based on the concept of email-based authentication, which is a secure and convenient way to authenticate users. With Magic Authentication, users can log in to an application with just one click, without the need to remember complex passwords.

Second, Magic is easy to implement and can be integrated into any web application. Magic provides a simple and intuitive API that allows developers to easily integrate Magic Authentication into their applications. Magic also provides a range of SDKs and plugins for popular web frameworks, such as React, Angular, and Vue.js, making it easy to get started with Magic Authentication.

• Eliminates the need for passwords, reducing the risk of password-related security breaches
• Provides a secure and user-friendly way to authenticate users
• Easy to implement and can be integrated into any web application
• Provides a simple and intuitive API
• Offers a range of SDKs and plugins for popular web frameworks

Prerequisites

To complete the "Magic Authentication in React Next.js" tutorial, you will need to have the following prerequisites:

• Basic knowledge of React and Next.js
• Node.js and npm installed on your machine
• A Magic account and API keys
• A basic understanding of authentication concepts, such as tokens and sessions
• A code editor, such as Visual Studio Code or Sublime Text
• A web browser, such as Google Chrome or Mozilla Firefox

It is recommended that you have some experience with web development and JavaScript before starting this tutorial. If you are new to React and Next.js, it is recommended that you complete some basic tutorials before attempting this tutorial. Additionally, you will need to sign up for a Magic account and obtain API keys to follow along with the tutorial.

React Next.js Magic step by step setup and configuration

To integrate Magic into a React Next.js project, we first need to install the Magic SDK. We can do this by running the following command in our project directory:

npm install magic-sdk

Once the Magic SDK is installed, we can import it into our React Next.js application and initialize it with our Magic API key. We can do this by creating a new file called magic.js in our project directory and adding the following code:

import { Magic } from 'magic-sdk';

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

export default magic;

In this code, we import the Magic class from the magic-sdk package and create a new instance of it with our Magic API key. We then export this instance so that we can use it throughout our application.

Next, we need to create a login page that allows users to authenticate with Magic. We can do this by creating a new file called login.js in our pages directory and adding the following code:

import { useState } from 'react';
import magic from '../lib/magic';

export default function Login() {
  const [email, setEmail] = useState('');

  async function handleSubmit(event) {
    event.preventDefault();
    const didToken = await magic.auth.loginWithMagicLink({ email });
    console.log(didToken);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
      </label>
      <button type="submit">Log in with Magic</button>
    </form>
  );
}

In this code, we import the useState hook from React and the magic instance that we created earlier. We then create a new component called Login that renders a form with an email input and a submit button. When the form is submitted, we call the loginWithMagicLink method on the magic.auth object with the user's email. This method sends a magic link to the user's email, which they can click to authenticate with Magic. Once the user clicks the magic link, they will be redirected back to our application with a didToken, which we can use to authenticate the user.

Finally, we need to protect our routes by checking if the user is authenticated with Magic. We can do this by creating a higher-order component (HOC) that wraps our protected routes. We can create a new file called withAuth.js in our lib directory and add the following code:

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

export default function withAuth(Component) {
  return function WithAuth(props) {
    const router = useRouter();

    useEffect(() => {
      async function checkUser() {
        try {
          await magic.user.isLoggedIn();
        } catch (error) {
          router.push('/login');
        }
      }

      checkUser();
    }, []);

    return <Component {...props} />;
  };
}

In this code, we import the useEffect hook from React, the useRouter hook from Next.js, and the magic instance that we created earlier. We then create a new HOC called withAuth that takes a component as an argument and returns a new component that checks if the user is authenticated with Magic. If the user is not authenticated, the HOC redirects them to the login page. If the user is authenticated, the HOC renders the protected component. We can use this HOC to protect our routes by wrapping our protected components with it, like this:

import withAuth from '../lib/withAuth';

function ProtectedPage() {
  return <h1>Protected Page</h1>;
}

export default withAuth(ProtectedPage);

In this code, we import the withAuth HOC from our lib directory and create a new component called ProtectedPage. We then export this component wrapped with the withAuth HOC, which protects the ProtectedPage route by checking if the user is authenticated with Magic.

Magic configuration options in React Next.js

Here are the Magic configuration options for React Next.js integration:

• apiKey: The API key for your Magic application.
• endpoint: The endpoint for the Magic API. Defaults to https://api.magic.link.
• network: The Ethereum network to use for blockchain-related operations. Defaults to mainnet.
• rpcProvider: The RPC provider to use for blockchain-related operations. Defaults to https://eth-mainnet.alchemyapi.io/v2/<your-api-key>.
• didNamespace: The DID namespace to use for decentralized identifiers. Defaults to magic.
• cookieDomain: The domain to use for cookies. Defaults to the current domain.
• cookieSecure: Whether to use secure cookies. Defaults to true.
• cookieMaxAge: The maximum age of cookies, in seconds. Defaults to 60 * 60 * 24 * 365 (1 year).
• cookieName: The name of the cookie to use for session management. Defaults to magic.
• redirectURI: The URI to redirect to after authentication. Defaults to the current URI.
• defaultEmailFrom: The default email address to use for Magic emails. Defaults to no-reply@magic.link.
• emailLogoUrl: The URL of the logo to use in Magic emails. Defaults to https://cdn.magic.link/assets/images/logo.png.
• emailFontUrl: The URL of the font to use in Magic emails. Defaults to https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap.
• emailTheme: The theme to use for Magic emails. Defaults to light.
• emailAppearance: The appearance to use for Magic emails. Defaults to solid.
• emailCustomization: Customization options for Magic emails, such as the email subject and body.

These configuration options allow you to customize the behavior and appearance of Magic in your React Next.js application. You can set these options when initializing the Magic SDK, like this:

import { Magic } from 'magic-sdk';

const magic = new Magic('YOUR_API_KEY', {
  endpoint: 'https://api.magic.link',
  network: 'mainnet',
  rpcProvider: 'https://eth-mainnet.alchemyapi.io/v2/<your-api-key>',
  cookieDomain: 'example.com',
  cookieSecure: true,
  cookieMaxAge: 60 * 60 * 24 * 365,
  cookieName: 'magic',
  redirectURI: 'https://example.com/auth/callback',
  defaultEmailFrom: 'no-reply@example.com',
  emailLogoUrl: 'https://example.com/logo.png',
  emailFontUrl: 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap',
  emailTheme: 'dark',
  emailAppearance: 'outline',
  emailCustomization: {
    subject: 'Welcome to Example App!',
    body: 'Click the button below to log in to Example App:',
    buttonText: 'Log in to Example App',
  },
});

export default magic;

Conclusion

In conclusion, we have learned how to implement Magic Authentication in a React Next.js application. Magic Authentication is a secure and user-friendly way to authenticate users without the need for passwords. With Magic Authentication, users can log in to an application with just one click, without the need to remember complex passwords. Magic Authentication is easy to implement and can be integrated into any web application, making it an ideal choice for developers who want to provide a secure and user-friendly authentication experience for their users.

In this tutorial, we covered the entire process of implementing Magic Authentication in a React Next.js application, from setting up the Magic SDK to integrating it into our application and testing the authentication flow. We learned how to create a login page that allows users to authenticate with Magic, how to protect our routes by checking if the user is authenticated with Magic, and how to customize the appearance and behavior of Magic in our application.

By following this tutorial, you should now have a solid understanding of how to implement Magic Authentication in your React Next.js applications. Magic Authentication is a powerful tool that can help you provide a secure and user-friendly authentication experience for your users, and it is definitely worth considering for your next web application project.