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:
// 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.
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.
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);
}
The Login Page
On the /login
route, we have a button that users can press to call the login
function that we import from the React SDK:
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: "example.com",
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
.
function MyApp({ Component, pageProps }) {
return (
<ThirdwebProvider
desiredChainId={activeChainId}
authConfig={{
domain: "example.com",
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>;