https://github.com/thirdweb-example/sign-in-button
Simple starter kit for Auth and the ConnectWallet button
https://github.com/thirdweb-example/sign-in-button
Last synced: 9 months ago
JSON representation
Simple starter kit for Auth and the ConnectWallet button
- Host: GitHub
- URL: https://github.com/thirdweb-example/sign-in-button
- Owner: thirdweb-example
- License: apache-2.0
- Created: 2022-10-18T03:16:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T00:36:03.000Z (almost 2 years ago)
- Last Synced: 2024-04-12T07:13:33.109Z (almost 2 years ago)
- Language: JavaScript
- Homepage: sign-in-button.vercel.app
- Size: 101 KB
- Stars: 3
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
> [!Important]
> This repository is referencing the `mumbai` chain.
>
> `Mumbai` [is deprecated since 08/04/2024](https://blog.thirdweb.com/deprecation-of-mumbai-testnet/), meaning the code in this repository will no longer work out of the box.
>
> You can still use this repository, however you will have to switch any references to `mumbai` to another chain.
## 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:
```bash
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:
```.env
PRIVATE_KEY=...
```
Finally, you can run the project with one of the following commands:
```bash
npm run dev
# or
yarn dev
```
Now, you can navigate to [http://localhost:3000](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](https://portal.thirdweb.com/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.
```jsx
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](https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes) called `pages/api/auth/[...thirdweb].js`, which exports the `ThirdwebAuthHandler` to manage all of the required auth endpoints like `login` and `logout`.
```jsx
import { ThirdwebAuthHandler } from "../../../auth.config";
export default ThirdwebAuthHandler();
```
### Setting Up the Auth SDK
Inside the [\_app.jsx](./pages/_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:
```jsx
```
### 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](https://portal.thirdweb.com/ui-components/connectwalletbutton#with-auth)
```jsx
```
## Join our Discord!
For any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).