Sign In with WalletConnect

This tutorial will teach you how to add secure Web3 Moralis authentication to your NextJS application by walking you through the process of creating a full-stack Web3 authentication solution using the popular NextJS framework.


End Result of Using Web3 Moralis Authentication with WalletConnect

Before the Start

You can start this tutorial if you already have a NextJS dapp with MetaMask functionality.

Configuring the WalletConnect Connector

  1. Open thepages/signin.jsx file and add WalletConnectConnector as a connector to connectAsync():
import { signIn } from 'next-auth/react';
import { useAccount, useConnect, useSignMessage, useDisconnect } from 'wagmi';
import { useRouter } from 'next/router';
import axios from 'axios';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

function SignIn() {
    const { connectAsync } = useConnect();
    const { disconnectAsync } = useDisconnect();
    const { isConnected } = useAccount();
    const { signMessageAsync } = useSignMessage();
    const { push } = useRouter();

    const handleAuth = async () => {
        if (isConnected) {
            await disconnectAsync();
        // added WalletConnectConnector
        const { account, chain } = await connectAsync({
            connector: new WalletConnectConnector({
                options: {
                    qrcode: true,

        const userData = { address: account, chain:, network: 'evm' };

        const { data } = await'/api/auth/request-message', userData, {
            headers: {
                'content-type': 'application/json',

        const message = data.message;

        const signature = await signMessageAsync({ message });

        // redirect user after success authentication to '/user' page
        const { url } = await signIn('credentials', { message, signature, redirect: false, callbackUrl: '/user' });
         * instead of using signIn(..., redirect: "/user")
         * we get the url from callback and push it to the router to avoid page refreshing

    return (
            <h3>Web3 Authentication</h3>
            <button onClick={() => handleAuth()}>Authenticate via WalletConnect</button>

export default SignIn;

Testing the WalletConnect Connector

Visit http://localhost:3000/signin to test authentication.

  1. Click on Authenticate via WalletConnect:

Sign In Page

  1. Scan the QR code with your wallet:

WalletConnect Modal

  1. Connect your wallet:

TrustWallet Connect - Confirm

  1. Sign the message:

TrustWallet Message - Signing

  1. Visit http://localhost:3000/user to test the user session's functionality:
  • When a user is authenticated, we show the user's info on the page.
  • When a user is not authenticated, we redirect to the /signin page.
  • When a user is authenticated, we show the user's info on the page, even refreshing after the page. (Explanation: After Web3 wallet authentication, the next-auth library creates a session cookie with an encrypted JWT [JWE] stored inside. It contains session info [such as an address and signed message] in the user's browser.)

Did this page help you?