This content originally appeared on DEV Community 👩💻👨💻 and was authored by Avneesh Agarwal
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
If you already have a Next.js app you can simply follow these steps to get started:
- Install
@thirdweb-dev/reactand@thirdweb-dev/sdkandethers - 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
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",
});
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();
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>
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>
);
We are going to use the useAddress and useLogin hooks to get the login function and user address:
const address = useAddress();
const login = useLogin();
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();
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>
);
}
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;
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);
}
};
And attach this function to onClick of the validate button:
<button onClick={handleClick}>Validate user</button>
Conclusion
Hope you learnt how to add web3 sign-in to your amazing Dapps via this guide!
Useful links
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Avneesh Agarwal
Avneesh Agarwal | Sciencx (2022-09-07T00:28:38+00:00) How to add web3 sign-in with thirdweb ✨. Retrieved from https://www.scien.cx/2022/09/07/how-to-add-web3-sign-in-with-thirdweb-%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.