Building a Web3 Login Page with Next.js, React, and Moralis

·

Authentication is a foundational element of digital service delivery, ensuring that access is granted only to verified users. While traditional methods rely on passwords, smart cards, or biometrics, Web3 introduces a new paradigm using blockchain-based identity verification. This guide will walk you through creating a functional and visually appealing Web3 authentication page using Next.js, React, and the Moralis platform.

Understanding Moralis for Web3 Development

For those new to blockchain development, Moralis serves as a powerful backend-as-a-service platform specifically designed for the decentralized web. It provides a unified workflow to build and deploy high-performance dApps (decentralized applications) across multiple blockchains. Here’s why it stands out:

This infrastructure makes it an ideal choice for implementing secure and modern Web3 authentication.

Initial Project Setup with Next.js

Next.js is a robust React framework that provides essential building blocks for creating fast and scalable web applications. To begin, ensure you have Node.js installed on your system.

Open your terminal and run the following command to create a new Next.js project:

npx create-next-app@latest

You will be prompted to enter a project name. For this tutorial, you can use "Sign-In". The @latest flag ensures you install the most recent version of Next.js. Once the setup is complete, explore the project structure: the public folder holds static assets like icons, and the pages directory contains your application's routes.

Designing the User Interface

Our goal is to build a clean login interface that connects to a user's MetaMask wallet. Start by simplifying the main page. Navigate to pages/index.js and set up a basic component structure.

Next, update your global styles in styles/globals.css to establish a consistent baseline:

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Figtree, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  margin: 0px;
}

Create a new components directory to maintain a clean separation between pages and reusable components. Inside, create a Login.js file. You may also add an images folder for assets like the Moralis icon.

The index.js file should now import and render the Login component:

import Login from "../components/Login";

export default function Home() {
  return <Login />;
}

For the Login component, we'll use CSS Modules for styling. Create Login.module.css and define the styles for a centered card layout with a sign-in button.

The corresponding Login.js component utilizes these styles and an imported image:

import styles from "../styles/Login.module.css";
import Image from "next/image";
import icon from "./images/Moralis-Favicon.svg";

function Login() {
  return (
    <div className={styles.login_container}>
      <div className={styles.login_card}>
        <div className={styles.sign_in_container}>
          <Image src={icon} alt="Moralis Icon" width={50} height={50} />
          <button>Login with Moralis</button>
        </div>
      </div>
    </div>
  );
}

export default Login;

Run npm run dev to see a blue background with a white card containing the icon and button.

Configuring the Moralis Environment

To integrate Moralis, first install the necessary packages:

npm install moralis react-moralis

The next step is to create a Moralis server. Visit the Moralis website and sign up for an account. From your admin dashboard, create a new server, selecting "Local Devchain Server" for development purposes. Choose a name, select your region, and create the instance. Once the server is active, note the Application ID and Server URL from the server details.

Wrap your application with the Moralis provider in pages/_app.js to make Moralis functionality available throughout your app:

import "../styles/globals.css";
import { MoralisProvider } from "react-moralis";

function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider appId="YOUR_APP_ID" serverUrl="YOUR_SERVER_URL">
      <Component {...pageProps} />
    </MoralisProvider>
  );
}

export default MyApp;

Replace YOUR_APP_ID and YOUR_SERVER_URL with the values from your Moralis dashboard.

Implementing Authentication Logic

Now, enhance the Login component to handle authentication. The useMoralis hook provides the authenticate function and authError object for handling the MetaMask connection.

import { useMoralis } from "react-moralis";

function Login() {
  const { authenticate, authError } = useMoralis();

  return (
    <div className={styles.login_container}>
      <div className={styles.login_card}>
        <div className={styles.sign_in_container}>
          <Image src={icon} alt="Moralis Icon" width={50} height={50} />
          {authError && (
            <p className={styles.error}>
              {authError.name}: {authError.message}
            </p>
          )}
          <button onClick={() => authenticate()}>Login with Moralis</button>
        </div>
      </div>
    </div>
  );
}

For this to work, ensure the user has the MetaMask browser extension installed. The authenticate function will trigger MetaMask to request a connection, and any errors will be displayed courtesy of the added error handling CSS.

Managing User Logout

A complete auth system requires a logout option. Modify the index.js page to conditionally render either the login interface or a welcome message with a logout button for authenticated users.

import Login from "../components/Login";
import { useMoralis } from "react-moralis";

export default function Home() {
  const { isAuthenticated, logout } = useMoralis();

  return isAuthenticated ? (
    <div>
      <h1>You are logged in</h1>
      <button onClick={logout}>Sign Out</button>
    </div>
  ) : (
    <Login />
  );
}

This provides a seamless experience for users to both authenticate and end their session. 👉 Explore more authentication strategies

Frequently Asked Questions

What is the main advantage of using Web3 authentication?

Web3 authentication leverages blockchain technology, allowing users to sign in using their crypto wallet (like MetaMask) instead of traditional passwords. This method enhances security by giving users full control over their identity and eliminates the need for developers to manage sensitive user credentials.

Can I use this Moralis setup with any blockchain?

Yes, one of Moralis's core strengths is its cross-chain capability. The authentication system you build will work seamlessly across all major blockchains it supports, including Ethereum, Polygon, BSC, and Solana, without requiring any additional code changes.

Is it necessary to use Next.js for a Web3 project?

While not strictly necessary, Next.js is highly recommended. Its React-based framework offers server-side rendering, simplified routing, and excellent performance optimizations out-of-the-box, which are beneficial for building complex, production-ready dApps.

What happens if a user doesn't have MetaMask installed?

The authenticate() function from react-moralis will typically trigger a pop-up prompting the user to install MetaMask if it's not detected. Your error handling code will then catch and display this error, guiding the user to take the necessary action.

How secure is this authentication method?

This method is highly secure as it relies on the proven cryptographic security of the Ethereum blockchain. The private key never leaves the user's wallet, meaning Moralis or your application never handles or stores this sensitive information.

Can I customize the login UI to match my brand?

Absolutely. The provided CSS is a starting point. You can fully customize the styles in the Login.module.css file and the structure in the Login.js component to change colors, layouts, and fonts to align with your brand’s identity.