{"id":20974215,"url":"https://github.com/thirdweb-example/sign-in-button","last_synced_at":"2025-05-14T12:31:12.499Z","repository":{"id":107808504,"uuid":"553317708","full_name":"thirdweb-example/sign-in-button","owner":"thirdweb-example","description":"Simple starter kit for Auth and the ConnectWallet button","archived":false,"fork":false,"pushed_at":"2024-04-12T00:36:03.000Z","size":103,"stargazers_count":3,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-12T07:13:33.109Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"sign-in-button.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdweb-example.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-10-18T03:16:26.000Z","updated_at":"2024-04-10T01:05:05.000Z","dependencies_parsed_at":"2023-05-19T14:46:02.866Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/sign-in-button","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fsign-in-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fsign-in-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fsign-in-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fsign-in-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/sign-in-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225294239,"owners_count":17451498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T04:27:14.324Z","updated_at":"2024-11-19T04:27:17.019Z","avatar_url":"https://github.com/thirdweb-example.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!Important]  \n\u003e This repository is referencing the `mumbai` chain.\n\u003e \n\u003e `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.\n\u003e\n\u003e You can still use this repository, however you will have to switch any references to `mumbai` to another chain.\n\n\n## Sign in Button\n\nHere we implement the login with wallet flow using the ConnectWallet button.\n\n## Setup\n\nTo run the project, first clone this repository, and then run one of the following commands to install the dependencies:\n\n```bash\nnpm install\n# or\nyarn install\n```\n\nNext, 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:\n\n```.env\nPRIVATE_KEY=...\n```\n\nFinally, you can run the project with one of the following commands:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nNow, 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.\n\n## How It Works\n\nUsing [Auth](https://portal.thirdweb.com/auth), we ask users to sign in using their web3 wallet.\n\nWe 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:\n\nThis file is called `auth.config.js` and is at the root of the project.\n\n```jsx\nimport { ThirdwebAuth } from \"@thirdweb-dev/auth/next\";\nimport { domainName } from \"./const/yourDetails\";\n\nexport const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({\n  privateKey: process.env.PRIVATE_KEY,\n  domain: domainName,\n});\n```\n\nFinally, 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`.\n\n```jsx\nimport { ThirdwebAuthHandler } from \"../../../auth.config\";\n\nexport default ThirdwebAuthHandler();\n```\n\n### Setting Up the Auth SDK\n\nInside 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:\n\n```jsx\n  \u003cThirdwebProvider\n      activeChain={activeChain}\n      authConfig={{\n        domain: \"example.org\",\n        authUrl: \"/api/auth\",\n        loginRedirect: \"/\",\n      }}\n    \u003e\n```\n\n### Passing auth prop into the ConnectWallet component\n\nWe 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)\n\n```jsx\n\u003cConnectWallet\n  auth={{\n    loginOptional: false,\n  }}\n/\u003e\n```\n\n## Join our Discord!\n\nFor any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fsign-in-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fsign-in-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fsign-in-button/lists"}