DEV Community

Cover image for How to add web3 sign-in with thirdweb ✨
Avneesh Agarwal
Avneesh Agarwal

Posted on • Updated on • Originally published at blog.avneesh.tech

How to add web3 sign-in with thirdweb ✨

Introduction

Why use web3 sign-in?

Sign-in with Ethereum allows you to securely log in using a wallet and verify the wallet on the backend! We are going to use Thirdweb Auth which uses the very popular JWT standard! JSON Web Token (JWT) is an open standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.

Setup

Creating Next.js App

I am going to use the Next typescript starter template for this guide.

If you are following along with the guide, you can create a project with the
Next TypeScript template using the thirdweb CLI:

npx thirdweb create --next --ts
Enter fullscreen mode Exit fullscreen mode

If you already have a Next.js app you can simply follow these steps to get started:

  • Install @thirdweb-dev/react and @thirdweb-dev/sdk and ethers
  • Add MetaMask authentication to the site. You can follow this guide to do this.

Setting up thirdweb auth

Firstly, we need to install the thirdweb auth package:

npm i @thirdweb-dev/auth # npm

yarn add @thirdweb-dev/auth # yarn
Enter fullscreen mode Exit fullscreen mode

Now, create a file called auth.config.ts and the following:

import { ThirdwebAuth } from "@thirdweb-dev/auth/next";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
  privateKey: process.env.PRIVATE_KEY as string,
  domain: "example.org",
});
Enter fullscreen mode Exit fullscreen mode

Update the domain with your website url and for the private key, create a new .env.local file and add a new variable named PRIVATE_KEY. Learn how to export your private key from your wallet.

To configure the auth api, create a new folder inside pages/api called auth and [...thirdweb].ts file inside it! Here we need to export the thirdwebHandler that we created!

import { ThirdwebAuthHandler } from "../../../auth.config";

export default ThirdwebAuthHandler();
Enter fullscreen mode Exit fullscreen mode

Finally, inside the _app.tsx file, add the authConfig prop to ThirdwebProvider:

  <ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        authUrl: "/api/auth",
        domain: "example.org",
        loginRedirect: "/",
      }}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
Enter fullscreen mode Exit fullscreen mode

Building the frontend

Inside pages/index.tsx update the return statement with the following:

return (
    <div>
      {address ? (
        <button onClick={() => login()}>
          Sign in with Ethereum
        </button>
      ) : (
        <ConnectWallet />
      )}
    </div>
  );
Enter fullscreen mode Exit fullscreen mode

We are going to use the useAddress and useLogin hooks to get the login function and user address:

  const address = useAddress();
  const login = useLogin();
Enter fullscreen mode Exit fullscreen mode

This will add a sign-in with Ethereum to our site! Now we need to check if a user exists, so for that get the user from the useUser hook like this:

  const user = useUser();
Enter fullscreen mode Exit fullscreen mode

And we will check if the user exists and if it exists we will return this:

if (user.user) {
  return (
    <div>
      <p>You are signed in as {user.user.address}</p>
      <button>Validate user</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Creating api for validation

Let's now create an api to get the user details (address) on the backend! So, create a new file called validate.ts inside pages/api and add the following:

import type { NextApiRequest, NextApiResponse } from "next";
import { getUser } from "../../auth.config";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "POST") {
    const thirdwebUser = await getUser(req);

    if (thirdwebUser?.address) {
      return res.status(200).json({
        message: `You are signed in as ${thirdwebUser.address}`,
      });
    }
    return res.status(401).json({ message: "Account not validated" });
  }
  return res.status(405).json({ message: "Method not allowed" });
};

export default handler;
Enter fullscreen mode Exit fullscreen mode

Here, we are using the getUser method from thirdweb to get the user's address and if it exists we send a message that "you are signed in as address".

Calling the API on frontend

Create a new function called handleClick in pages/index.tsx like this:

  const handleClick = async () => {
    try {
      const response = await fetch("/api/validate", {
        method: "POST",
      });

      const data = await response.json();
      alert(data.message);
    } catch (error) {
      console.log(error);
    }
  };
Enter fullscreen mode Exit fullscreen mode

And attach this function to onClick of the validate button:

<button onClick={handleClick}>Validate user</button>
Enter fullscreen mode Exit fullscreen mode

Conclusion

Hope you learnt how to add web3 sign-in to your amazing Dapps via this guide!

Useful links

GitHub repo

Thirdweb Auth

Top comments (0)