Create a token-gated website with Whal3s and NextJS

npx create-next-app your-app-name
cd your-app-name

npm install @whal3s/whal3s.js iron-session swr

WHAL3S_UTILITY_ID=your-whal3s-utility-id
SECRET_COOKIE_PASSWORD=your-cookie-password

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    WHAL3S_UTILITY_ID: 'your-whal3s-utility-id'
  }
}

module.exports = nextConfig

export default async function fetchJson<JSON = unknown>(
    input: RequestInfo,
    init?: RequestInit,
): Promise<JSON> {
    const response = await fetch(input, init);

    // if the server replies, there's always some data in json
    // if there's a network error, it will throw at the previous line
    const data = await response.json();

    // response.ok is true when res.status is 2xx
    // https://developer.mozilla.org/en-US/docs/Web/API/Response/ok
    if (response.ok) {
        return data;
    }

    throw new FetchError({
        message: response.statusText,
        response,
        data,
    });
}

export class FetchError extends Error {
    response: Response;
    data: {
        message: string;
    };
    constructor({
                    message,
                    response,
                    data,
                }: {
        message: string;
        response: Response;
        data: {
            message: string;
        };
    }) {
        // Pass remaining arguments (including vendor specific ones) to parent constructor
        super(message);

        // Maintains proper stack trace for where our error was thrown (only available on V8)
        if (Error.captureStackTrace) {
            Error.captureStackTrace(this, FetchError);
        }

        this.name = "FetchError";
        this.response = response;
        this.data = data ?? { message: message };
    }
}

// this file is a wrapper with defaults to be used in both API routes and `getServerSideProps` functions
import type { IronSessionOptions } from "iron-session";
import type { User } from "@/pages/api/user";

export const sessionOptions: IronSessionOptions = {
    password: process.env.SECRET_COOKIE_PASSWORD as string,
    cookieName: "iron-session/examples/next.js",
    cookieOptions: {
        secure: process.env.NODE_ENV === "production",
    },
};

// This is where we specify the typings of req.session.*
declare module "iron-session" {
    interface IronSessionData {
        user?: User;
    }
}

import { useEffect } from "react";
import Router from "next/router";
import useSWR from "swr";
import { User } from "@/pages/api/user";

export default function useUser({redirectTo = "", redirectIfFound = false,} = {}) {
    const { data: user, mutate: mutateUser } = useSWR<User>("/api/user");

    useEffect(() => {

        // if no redirect needed, just return (example: already on /)
        // if user data not yet there (fetch in progress, logged in or not) then don't do anything yet
        if (!redirectTo || !user) return;

        if (
            // If redirectTo is set, redirect if the user was not found.
            (redirectTo && !redirectIfFound && !user?.isLoggedIn) ||
            // If redirectIfFound is also set, redirect if the user was found
            (redirectIfFound && user?.isLoggedIn)
        ) {
            Router.push(redirectTo);
        }
    }, [user, redirectIfFound, redirectTo]);

    return { user, mutateUser };
}

npm i @headlessui/react @heroicons/react react-icons
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        whal3s: {
          '50': '#edf0ff',
          '100': '#dee5ff',
          '200': '#c4cdff',
          '300': '#a0acff',
          '400': '#7a80ff',
          '500': '#5d5afa',
          '600': '#503eef',
          '700': '#422fd3',
          '800': '#3729aa',
          '900': '#302986',
        },
      },
    },
  },
}

@tailwind base;
@tailwind components;
@tailwind utilities;

import '@/styles/globals.css'
import type {AppProps} from 'next/app'
import {Toaster} from "react-hot-toast";

export default function App({Component, pageProps}: AppProps) {
    return (
        <>
            <div>
                <Toaster
                    position="top-right"
                    reverseOrder={false}
                />
            </div>
            <Component {...pageProps} />
        </>
    )
}

import React, {Fragment} from 'react';
import {Disclosure, Menu, Transition} from "@headlessui/react";
import {Bars3Icon, XMarkIcon, UserIcon} from "@heroicons/react/24/outline";
import fetchJson from "@/lib/fetchJson";
import Router, {useRouter} from "next/router";

const navigation = [
    {name: 'Login', href: '/'},
    {name: 'Gated', href: '/gated/video'},
]


function classNames(...classes: string[]) {
    return classes.filter(Boolean).join(' ')
}

const Navbar = () => {

    const router = useRouter();
    const logout = async () => {

        // Call logout API route to end session
        await fetchJson("/api/logout", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
        })
        Router.push('/');

    }

    return (
        <Disclosure as="nav" className="border-b border-gray-200 bg-white">
            {({open}) => (
                <>
                    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                        <div className="flex h-16 justify-between">
                            <div className="flex">
                                <a className="flex flex-shrink-0 items-center" href={'/'}>
                                    <img
                                        className="block h-8 w-auto lg:hidden"
                                        src="https://whal3s-assets.s3.eu-central-1.amazonaws.com/logos/Whal3s_black.png"
                                        alt="Whal3s"
                                    />
                                    <img
                                        className="hidden h-8 w-auto lg:block"
                                        src="https://whal3s-assets.s3.eu-central-1.amazonaws.com/logos/Whal3s_black.png"
                                        alt="Whal3s"
                                    />
                                </a>
                                <div className="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
                                    {navigation.map((item) => (
                                        <a
                                            key={item.name}
                                            href={item.href}
                                            className={classNames(
                                                router.pathname === item.href
                                                    ? 'border-whal3s-500 text-gray-900'
                                                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
                                                'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium'
                                            )}
                                            aria-current={router.pathname === item.href ? 'page' : undefined}
                                        >
                                            {item.name}
                                        </a>
                                    ))}
                                </div>
                            </div>
                            <div className="hidden sm:ml-6 sm:flex sm:items-center">

                                {/* Profile dropdown */}
                                <Menu as="div" className="relative ml-3">
                                    <div>
                                        <Menu.Button
                                            className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-whal3s-500 focus:ring-offset-2 bg-gray-200 p-1">
                                            <span className="sr-only">Open user menu</span>
                                            <UserIcon className="h-8 w-8 rounded-full"/>
                                        </Menu.Button>
                                    </div>
                                    <Transition
                                        as={Fragment}
                                        enter="transition ease-out duration-200"
                                        enterFrom="transform opacity-0 scale-95"
                                        enterTo="transform opacity-100 scale-100"
                                        leave="transition ease-in duration-75"
                                        leaveFrom="transform opacity-100 scale-100"
                                        leaveTo="transform opacity-0 scale-95"
                                    >
                                        <Menu.Items
                                            className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                            <Menu.Item>
                                                {({active}) => (
                                                    <a
                                                        href={'#'}
                                                        onClick={logout}
                                                        className={classNames(
                                                            active ? 'bg-gray-100' : '',
                                                            'block px-4 py-2 text-sm text-gray-700'
                                                        )}
                                                    >
                                                        Logout
                                                    </a>
                                                )}
                                            </Menu.Item>
                                        </Menu.Items>
                                    </Transition>
                                </Menu>
                            </div>
                            <div className="-mr-2 flex items-center sm:hidden">
                                {/* Mobile menu button */}
                                <Disclosure.Button
                                    className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-whal3s-500 focus:ring-offset-2">
                                    <span className="sr-only">Open main menu</span>
                                    {open ? (
                                        <XMarkIcon className="block h-6 w-6" aria-hidden="true"/>
                                    ) : (
                                        <Bars3Icon className="block h-6 w-6" aria-hidden="true"/>
                                    )}
                                </Disclosure.Button>
                            </div>
                        </div>
                    </div>

                    <Disclosure.Panel className="sm:hidden">
                        <div className="space-y-1 pt-2 pb-3">
                            {navigation.map((item) => (
                                <Disclosure.Button
                                    key={item.name}
                                    as="a"
                                    href={item.href}
                                    className={classNames(
                                        router.pathname === item.href
                                            ? 'border-whal3s-500 bg-whal3s-50 text-whal3s-700'
                                            : 'border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800',
                                        'block border-l-4 py-2 pl-3 pr-4 text-base font-medium'
                                    )}
                                    aria-current={router.pathname === item.href ? 'page' : undefined}
                                >
                                    {item.name}
                                </Disclosure.Button>
                            ))}
                        </div>
                        <div className="border-t border-gray-200 pt-4 pb-3">
                            <div className="flex items-center px-4">
                                <div className="flex-shrink-0">
                                    <UserIcon className="h-10 w-10 rounded-full "/>
                                </div>
                            </div>
                            <div className="mt-3 space-y-1">
                                <Disclosure.Button
                                    as="a"
                                    href={'#'}
                                    onClick={logout}
                                    className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
                                >
                                    Logout
                                </Disclosure.Button>
                            </div>
                        </div>
                    </Disclosure.Panel>
                </>
            )}
        </Disclosure>
    );
};

export default Navbar;

import React from 'react';
import Navbar from "@/components/Navbar";
const Layout = (props:any) => {
    return (
        <div className="min-h-full">
            <Navbar/>
            <div className="py-10">
                {props.header && <header>
                    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                        <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">{props.header}</h1>
                    </div>
                </header>}

                <main>
                    <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                        {props.children}
                    </div>
                </main>
            </div>
        </div>
    );
};


export default Layout;

import '@/styles/globals.css'
import type {AppProps} from 'next/app'
import Layout from "@/components/Layout";
import {Toaster} from "react-hot-toast";

export default function App({Component, pageProps}: AppProps) {
    return (
        <>
            <div>
                <Toaster
                    position="top-right"
                    reverseOrder={false}
                />
            </div>
            <Layout>

                <Component {...pageProps} />
            </Layout>
        </>
    )
}

import React from 'react';
import {ImSpinner2} from "react-icons/im";

type Props = {
    onClick?: React.MouseEventHandler<HTMLButtonElement>,
    className?: string,
    children: React.ReactNode,
    disabled?: boolean,
    isLoading?: boolean
}
const Button = ({onClick, children, className = '', disabled = false, isLoading = false} : Props) => {
    if (isLoading)
        disabled = true;
    return (
        <button
            disabled={disabled}
            type="button"
                onClick={onClick}
                className={`${className} inline-flex justify-center items-center rounded-md border border-transparent bg-whal3s-600 disabled:bg-whal3s-500 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-whal3s-700 focus:outline-none focus:ring-2 focus:ring-whal3s-500 focus:ring-offset-2`}>
            {isLoading &&  <ImSpinner2 className="-ml-1 mr-2 h-5 w-5 animate-spin" aria-hidden="true" /> }
            {children}
        </button>

    );
};

export default Button;

import React from 'react';
import Button from "@/components/Button";

const Uninitialized = () => {

    //Nothing to do here, utility initializes itself
    return (
        <Button
            isLoading={true}
            className=""
            onClick={() => {}}
           >Initializing</Button>
    );
};

export default Uninitialized;

import React, {useState} from 'react';
import Button from "../Button";
import {NftValidationUtility} from "@whal3s/whal3s.js";
import toast from "react-hot-toast";

type Props = {
    utility: NftValidationUtility
}
const ConnectWalletButton = ({utility}: Props) => {
    const [loading, setLoading] = useState(false);
    const connectWallet = () => {
        setLoading(true)
        utility.connectWallet()
            .catch((e: any) => {
                toast.error( e.message)
            })
            .finally(() => {
                setLoading(false)
            })
    }

    return (
        <Button
            isLoading={loading}
            className=""
            onClick={() => {
                connectWallet()
            }}>Connect Wallet</Button>
    );
};

export default ConnectWalletButton;

import React, {useState} from 'react';
import Button from "../Button";
import {NftValidationUtility} from "@whal3s/whal3s.js";
import toast from "react-hot-toast";

type Props = {
    utility: NftValidationUtility
}
const SignMessageButton = ({utility}: Props) => {
    const [loading, setLoading] = useState(false);
    const sign = () => {
        setLoading(true)
        utility.sign()
            .catch((e: any) => {
                toast.error(e.message)
            })
            .finally(() => {
                setLoading(false)
            })
    }
    return (

        <Button
            isLoading={loading}
            className=""
            onClick={() => {
                sign()
            }}>Sign Message</Button>

    );
};

export default SignMessageButton;

import React, {useEffect, useState} from 'react';
import Whal3s, {NftValidationUtility} from '@whal3s/whal3s.js'
import Button from "@/components/Button";
import Uninitialized from "@/components/login/Uninitialized";
import ConnectWalletButton from "@/components/login/ConnectWalletButton";
import SignMessageButton from "@/components/login/SignMessageButton";
import fetchJson from "@/lib/fetchJson";
import useUser from "@/lib/useUser";
import toast from "react-hot-toast";

const Login = () => {

    const {mutateUser} = useUser({
        redirectTo: "/gated/content", // redirect to /gated/video after login
        redirectIfFound: true,
    });

    const [utility, setUtility] = useState<NftValidationUtility | undefined>(undefined); // utility instance

    const [step, setStep] = useState<number>(0); // current step of the utility

    const [loading, setLoading] = useState(false); // loading state

    // initialize the utility
    const init = async () => {
        // initialize the Whal3s object and set the account center to bottom right
        const whal3s = new Whal3s({
            accountCenter: {
                mobile: {
                    enabled: true, // enable the account center on mobile
                    position: 'bottomRight', // position the account center to bottom right
                },
                desktop: {
                    enabled: true, // enable the account center on desktop
                    position: 'bottomRight', // position the account center to bottom right
                },
            }
        });
        // create the validation utility based on the utility id you saved to .env.local
        const _utility = await whal3s.createValidationUtility(process.env.WHAL3S_UTILITY_ID ?? '')
        // add event listeners to the utility to update the state whenever the utility goes over to the next step
        _utility.addEventListener('stepChanged', (event) => {
            setUtility(_utility)
            setStep(_utility.step)
        })
        // add event listener to the utility to login the user when the signature is signed by the user
        _utility.addEventListener('signed', () => {
            setUtility(_utility)
            login(_utility)
        })
        setStep(_utility.step)
        setUtility(_utility)
    }

    // login the user
    const login = async (utility: NftValidationUtility) => {
        setLoading(true)
        try {
            // call the login endpoint with the signature and wallet address and set the user according to the response
            const response = await mutateUser(
                await fetchJson("/api/login", {
                    method: "POST",
                    headers: {"Content-Type": "application/json"},
                    body: JSON.stringify({
                        signature: utility?.signature,
                        walletAddress: utility?.wallet?.address,

                    }),
                }),
                false,
            );
            if (!response?.isLoggedIn)
                toast.error( 'Login failed, Wallet not eligible')


        } catch (e: any) {
            toast.error( 'Wallet not eligible')
        }

        setLoading(false)
    }

    useEffect(() => {
        // initialize the utility on component mount
        init()
    }, [])


    return (
        <div>
            {step === NftValidationUtility.STEP_UNINITIALIZED && <Uninitialized/>}
            {step === NftValidationUtility.STEP_INITIALIZED && utility && <ConnectWalletButton utility={utility}/>}
            {step >= NftValidationUtility.STEP_WALLET_CONNECTED && utility && !utility?.signature &&
                <SignMessageButton utility={utility}/>}
            {utility?.signature && <Button
                onClick={() => {
                    login(utility)
                }}
                disabled={loading}
                isLoading={loading}
            >{loading ? 'Logging in' : 'Log in'}</Button>}
        </div>
    );
};

export default Login;

import { withIronSessionApiRoute } from "iron-session/next";
import { sessionOptions } from "@/lib/session";

// User definition
export type User = {
    isLoggedIn: boolean;
    walletAddress: string;
    signature: string;
};

export default withIronSessionApiRoute(
    function userRoute(req, res) {

        if (req.session.user) {
            // in a real world application you might read the user id from the session and then do a database request
            // to get more information on the user if needed
            res.json({
                ...req.session.user,
                isLoggedIn: true,
            });
        } else {
            res.json({
                isLoggedIn: false,
                walletAddress: "",
                signature: "",
            });
        }
    },
    sessionOptions
);

import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";

export default withIronSessionApiRoute(
    async function loginRoute(req, res) {

        const {walletAddress, signature} = req.body; // extract the wallet address and signature from the request body

        const options = {method: 'GET', headers: {accept: 'application/json'}};

        try {
            // validate the signature
            const signatureValidationResponse = await fetch(`https://app.whal3s.xyz/api/v0/signature-messages?utility_id=${process.env.WHAL3S_UTILITY_ID}&wallet_address=${walletAddress}&signature=${signature}`, options)
            if (signatureValidationResponse.status !== 200)
                throw 'Invalid signature'

            // validate the wallet address, check if wallet matched utility conditions
            const eligibilityResponse = await fetch(`https://app.whal3s.xyz/api/v0/nft-validation-utilities/${process.env.WHAL3S_UTILITY_ID}/wallet/${walletAddress}`)
            const eligibilityResponseJson = await eligibilityResponse.json()

            if (eligibilityResponse.status !== 200 || !eligibilityResponseJson.valid)
                throw 'Wallet not eligible'

            // if the signature and wallet address are valid, create a user object and save it to the session
            const user = {
                isLoggedIn: true,
                walletAddress: walletAddress,
                signature: signature,
            };
            req.session.user = user;
            await req.session.save();
            res.json(user);

        } catch (error){
            // if there is an error, set the user object to an empty object - kill the session
            req.session.user = {
                isLoggedIn: false,
                walletAddress: '',
                signature: '',
            };
            await req.session.save();
            res.status(403).json({message: (error as Error).message});
        }

    },
    sessionOptions
);

import { withIronSessionApiRoute } from "iron-session/next";
import {sessionOptions} from "@/lib/session";

export default withIronSessionApiRoute(
    function logoutRoute(req, res) {
        // destroy the session
        req.session.destroy();
        res.json({
            isLoggedIn: false,
            walletAddress: "",
            signature: "",
        });
    },
    sessionOptions
);

import Head from 'next/head'
import dynamic from "next/dynamic";
import Button from "@/components/Button";
import React from "react";

const DynamicLogin = dynamic(() => import('@/components/Login'), {
    ssr: false,
    loading: () => <Button
        isLoading={true}
        className=""
        onClick={() => {
        }}
    >Initializing</Button>,
})

export default function Home() {
  return (
    <>
      <Head>
        <title>Next.js x Whal3s</title>
        <meta name="description" content="Next.js token gating with Whal3s" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main >
          <DynamicLogin/>
      </main>
    </>
  )
}

import React from 'react';

const Content = () => {
    return (
        <div>
            <p>You can only see this content if you are logged in.</p>
        </div>
    );
};

export default Content;

// /middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { getIronSession } from "iron-session/edge";
import {sessionOptions} from "@/lib/session";

export const middleware = async (req: NextRequest) => {
    const res = NextResponse.next();
    const session = await getIronSession(req, res, sessionOptions);
    const { user } = session;
    
    //If the user is not logged in and is trying to access a gated page, redirect to /unauthorized
    if (req.nextUrl.pathname.startsWith('/gated') && !user?.isLoggedIn) {
        return NextResponse.redirect(new URL('/unauthorized', req.url)) // redirect to /unauthorized page
    }

    return res;
};