{"id":20974313,"url":"https://github.com/thirdweb-example/magic-link","last_synced_at":"2025-05-14T12:31:42.431Z","repository":{"id":62923571,"uuid":"486082911","full_name":"thirdweb-example/magic-link","owner":"thirdweb-example","description":"Connect users to your dApp using just their email using thirdweb's useMagic hook!","archived":false,"fork":false,"pushed_at":"2023-05-23T03:13:18.000Z","size":280,"stargazers_count":19,"open_issues_count":3,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-05-23T04:23:39.337Z","etag":null,"topics":["nextjs","typescript","wallet-connection"],"latest_commit_sha":null,"homepage":"https://magic-link.thirdweb-example.com","language":"TypeScript","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}},"created_at":"2022-04-27T07:03:18.000Z","updated_at":"2023-04-29T03:48:09.000Z","dependencies_parsed_at":"2023-01-25T19:31:53.513Z","dependency_job_id":null,"html_url":"https://github.com/thirdweb-example/magic-link","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fmagic-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fmagic-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fmagic-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fmagic-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/magic-link/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225294590,"owners_count":17451535,"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":["nextjs","typescript","wallet-connection"],"created_at":"2024-11-19T04:28:01.059Z","updated_at":"2024-11-19T04:28:01.879Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","readme":"# Magic Link Wallet Connection\n\nThis project demonstrates how to use [Magic Link](https://magic.link/) with thirdweb using the [useMagic](https://docs.thirdweb.com/react/react.usemagic) hook from the [thirdweb React SDK](https://docs.thirdweb.com/react).\n\nMagic Link enables users to connect to your dApp using **email**, **phone number**, or **social login**.\n\n**Check out the Demo here**: https://magic-link.thirdweb-example.com\n\n## Tools:\n\n- [thirdweb React SDK](https://docs.thirdweb.com/react): We're using the [useAddress](https://docs.thirdweb.com/react/react.useaddress), [useMagic](https://docs.thirdweb.com/react/react.usemagic), and [useDisconnect](https://docs.thirdweb.com/react/react.usedisconnect) hooks from our React SDK to enable users to connect/disconnect to your dApp via their wallets, and to show information about their connected wallet.\n- [thirdweb TypeScript SDK](https://docs.thirdweb.com/typescript): We're using the [ThirdwebProvider](https://docs.thirdweb.com/react) to configure the Network we want our user's to be on, and to configure the Magic Link Wallet Connector with our API key.\n- [Magic Link](https://magic.link/): Under the hood, thirdweb's `useMagic` hook uses the Magic Link Web SDK to connect user's wallets to their email, phone number, or social media accounts.\n- [Next.JS](https://nextjs.org/): Next.JS isn't really necessary for this project, but it's nice to have if you want to build more advanced features in the future.\n\n## Using This Repo\n\n- Create an account at https://magic.link/\n\n- Copy your **Publishable API Key** from the Magic Link dashboard.\n\n- Create a `.env.local` file at the root of your project, and add your key in the format: `NEXT_PUBLIC_MAGIC_LINK_API_KEY=xxx`, like as it is in `.env.example`.\n\n- Clone this example project by running:\n\n```bash\nnpx thirdweb create --template magic-link\n```\n\n# Guide\n\n## Setting Up Magic Link WalletConnector\n\nOver in [_app.tsx](./pages/_app.tsx) we are wrapping our application with the [ThirdwebProvider](https://docs.thirdweb.com/react) component, which allows us to configure the Network we want our user's to be on, and to configure the Magic Link Wallet Connector with our API key.\n\n```ts\n\u003cThirdwebProvider desiredChainId={activeChainId} walletConnectors={connectors}\u003e\n  \u003cComponent {...pageProps} /\u003e\n\u003c/ThirdwebProvider\u003e\n```\n\n**Configuring the Network**\n\n```ts\nconst activeChain = \"mumbai\";\n```\n\n**Configuring the Magic Link Wallet Connector**\n\n```ts\nconst magicLinkWalletConnector: WalletConnector = {\n  name: \"magic\",\n  options: {\n    // Replace this with your own magic link api key\n    apiKey: process.env.NEXT_PUBLIC_MAGIC_LINK_API_KEY as string,\n    rpcUrls: {\n      [activeChain]: \"https://mumbai.magic.io/rpc\",\n    },\n  },\n};\n```\n\n## Logging Users In Via Email\n\nOn the [Home Page](./pages/index.tsx), we are using the `useMagic` hook to connect user's wallets' by submitting their email address.\n\nOnce the user enters their email and clicks the Login button, they will be connected to their wallet via a Magic Link (email with a link is sent to the user's email - they are signed in after they click this link).\n\n```ts\nconst connectWithMagic = useMagic();\n\n// ...\n\n\u003ca onClick={() =\u003e connectWithMagic({ email })}\u003eLogin\u003c/a\u003e;\n```\n\nOnce they're connected, we grab their address using the `useAddress` hook and hide the form!\n\n```ts\nconst address = useAddress();\n```\n\nIf the user wants to disconnect at any time, we allow them to, using the `useDisconnect` hook.\n\n```ts\nconst disconnectWallet = useDisconnect();\n```\n\n---\n\n## Join our Discord!\n\nFor any questions, suggestions, join our discord at [https://discord.gg/thirdweb](https://discord.gg/thirdweb).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fmagic-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fmagic-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fmagic-link/lists"}