Exploring the Example Repo

In this section, we'll explain the key elements of the example repository.

We'll explore how we use the SDK to:

Connect the user's wallet to the site using MetaMask
Verify the user owns the wallet by asking them to sign a message using Auth
Check if the user has an NFT from our smart contract
Allow them to claim a new NFT from our smart contract

Restricting Access to the Homepage

When the user tries to visit the homepage /, we check on the server-side to see if they are authenticated:

index.js
// This gets called on every request
export async function getServerSideProps(context) {
  const user = await getUser(context.req);

  if (!user) {
    return {
      redirect: {
        destination: "/login",
        permanent: false,
      },
    };
  }

  // ...
}

If they don't, we redirect them to the login page.

However, if they are authenticated, we then also check to see if they hold an NFT from our collection, and redirect them to the login page if they don't.

index.js
const hasNft = await checkBalance(sdk, address);

// If they don't have an NFT, redirect them to the login page
if (!hasNft) {
  return {
    redirect: {
      destination: "/login",
      permanent: false,
    },
  };
}

Here, the checkBalance function is a helper function that we use to check if the user has an NFT from our collection.

checkBalance.js
import { contractAddress } from "../const/yourDetails";

export default async function checkBalance(sdk, address) {
  const editionDrop = sdk.getEditionDrop(
    contractAddress, // replace this with your contract address
  );

  // Here, "0" is checking the balance of token ID 0.
  const balance = await editionDrop.balanceOf(address, 0);

  // gt = greater than
  return balance.gt(0);
}

On the /login route, we have a button that users can press to call the login function that we import from the React SDK:

login.js
const login = useLogin();

// ...

{
  address ? (
    <>
      <button onClick={signIn}>Sign In</button>
    </>
  ) : (
    <>
      <button onClick={() => connectWithMetamask()}>Connect Wallet</button>
    </>
  );
}

Inside the _app.jsx file, we configured the redirect users to the / route after they successfully sign in:

function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        domain: domainName,
        authUrl: "/api/auth",
        loginRedirect: "/", // redirect users to the home page after they successfully sign in
      }}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Inside the _app.jsx file, we configured the redirect users to the / route after they successfully sign in, meaning once the user has authenticated (signed the message), they are redirected to the home page /, and the getServersideProps logic runs again; checking to see if they have an NFT balance greater than 0.

index.js
function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        domain: domainName,
        authUrl: "/api/auth",
        loginRedirect: "/", // redirect users to the home page after they successfully sign in
      }}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

Finally, on the home page, we have a Sign Out button for the user, which calls the logout function that we imported from the Auth SDK, and sends the user back to the /login route.

const logout = useLogout();

// ...

<button onClick={logout}>Logout</button>;

Exploring the Example Repo

Restricting Access to the Homepage​

The Login Page​

Restricting Access to the Homepage

The Login Page