fitbytesov: A JavaScript repository from Junaid-Bashir-Kernel

Sign in Button

Here we implement the login with wallet flow using the ConnectWallet button.

Setup

To run the project, first clone this repository, and then run one of the following commands to install the dependencies:

npm install
# or
yarn install

Next, you need to create a .env.local file and add the PRIVATE_KEY variable to it with the private key of the wallet you want to use as the admin wallet to generate and verify payloads. Your file should use something like the following:

PRIVATE_KEY=...

Finally, you can run the project with one of the following commands:

npm run dev
# or
yarn dev

Now, you can navigate to http://localhost:3000 to visit the client side page where you can connect a wallet, sign-in with eth and view the payload, and use the payload to authenticate with the backend.

How It Works

Using Auth, we ask users to sign in using their web3 wallet.

We need to create a configuration file that contains our wallet's private key (used to generate messages for users to sign) and our site's domain name:

This file is called auth.config.js and is at the root of the project.

import { ThirdwebAuth } from "@thirdweb-dev/auth/next";
import { domainName } from "./const/yourDetails";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
  privateKey: process.env.PRIVATE_KEY,
  domain: domainName,
});

Finally, we have a catch-all API route called pages/api/auth/[...thirdweb].js, which exports the ThirdwebAuthHandler to manage all of the required auth endpoints like login and logout.

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

export default ThirdwebAuthHandler();

Setting Up the Auth SDK

Inside the _app.jsx file, we configure the Auth SDK in the ThirdwebProvider component that wraps our application, allowing us to use the hooks of the SDK throughout our application:

  <ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        domain: "example.org",
        authUrl: "/api/auth",
        loginRedirect: "/",
      }}
    >

Passing auth prop into the ConnectWallet component

We pass in the auth prop in the ConnectWallet which is an object. I am just passing the loginOptional parameter but you can customize it however you want. You can see the parameters here

<ConnectWallet
  auth={{
    loginOptional: false,
  }}
/>

Join our Discord!