{"_id":"@alexandria-labs/wagmi-magic-connector","_rev":"8-a1e956f59e95286828baedb8457a16df","name":"@alexandria-labs/wagmi-magic-connector","dist-tags":{"latest":"2.1.1-alexandria.0"},"versions":{"2.1.0":{"name":"@alexandria-labs/wagmi-magic-connector","version":"2.1.0","keywords":["wagmi","extension","magic"],"license":"MIT","_id":"@alexandria-labs/wagmi-magic-connector@2.1.0","maintainers":[{"name":"robyn3choi","email":"robyn3choi@gmail.com"}],"homepage":"https://github.com/Alexandria-Labs/wagmi-magic-connector#readme","bugs":{"url":"https://github.com/Alexandria-Labs/wagmi-magic-connector/issues"},"dist":{"shasum":"82776a52dbbe10efa3e5c1f2654a26aaf5b6d93f","tarball":"https://registry.npmjs.org/@alexandria-labs/wagmi-magic-connector/-/wagmi-magic-connector-2.1.0.tgz","fileCount":20,"integrity":"sha512-urumNSSU4xpcGf3biEzq+P5L1R6/4cbj3GzfhuqB7RTjx8mXUcCSyuA3RL/OuSc5NbdRxbyaDia10hfaG+Vu/g==","signatures":[{"sig":"MEYCIQCZKIcSZtTMsR9ONWuoGuU6mR43tbc8Lf8Qo3nU+iLe/wIhAOQYzyi4N/+Ea1uKzQrsVkvCtwUo8f53+/O7ODorjzgu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":298804},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=10"},"gitHead":"6bb9656f5485bdbff70588d6fbb1a48bbe797f2b","scripts":{"lint":"rome check .","build":"tsc -p tsconfig.json && tsc-esm-fix --target='dist' --ext='.js'","format":"rome format . --write","release":"yarn build && changeset publish","lint:fix":"yarn lint --apply","watch:build":"tsc -p tsconfig.json -w"},"_npmUser":{"name":"robyn3choi","email":"robyn3choi@gmail.com"},"repository":{"url":"git+https://github.com/Alexandria-Labs/wagmi-magic-connector.git","type":"git"},"_npmVersion":"10.5.0","description":"wagmi connector to connect with Magic SDK","directories":{},"_nodeVersion":"20.12.2","dependencies":{"magic-sdk":"^28.0.3","@wagmi/core":"^2.10.4","tsc-esm-fix":"^2.20.27","@changesets/cli":"^2.24.0","@magic-ext/oauth":"^22.0.3","@wagmi/connectors":"^5.0.6","@magic-sdk/provider":"^28.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rome":"12.0.0","viem":"2.x","changeset":"^0.2.6","typescript":"^5.0.4","@types/node":"^20.11.24"},"peerDependencies":{"viem":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/wagmi-magic-connector_2.1.0_1717806246460_0.9577291582801934","host":"s3://npm-registry-packages"},"deprecated":"This package has been merged upstream into @magiclabs/wagmi-connector. Please use the official @magiclabs/wagmi-connector package instead. All functionality from this fork is now available in the upstream package."},"2.1.1-alexandria.0":{"name":"@alexandria-labs/wagmi-magic-connector","version":"2.1.1-alexandria.0","keywords":["wagmi","extension","magic"],"license":"MIT","_id":"@alexandria-labs/wagmi-magic-connector@2.1.1-alexandria.0","maintainers":[{"name":"ameliealexandria","email":"amelie@alexandrialabs.xyz"},{"name":"gary-alexandria","email":"gary@alexandrialabs.xyz"},{"name":"alexandrialabs","email":"tech@alexandrialabs.xyz"},{"name":"carolalexandria","email":"carol@alexandrialabs.xyz"}],"homepage":"https://github.com/Alexandria-Labs/wagmi-magic-connector#readme","bugs":{"url":"https://github.com/Alexandria-Labs/wagmi-magic-connector/issues"},"dist":{"shasum":"f6de8cd7d47cf8ef07414d33d7034d84f0d363a5","tarball":"https://registry.npmjs.org/@alexandria-labs/wagmi-magic-connector/-/wagmi-magic-connector-2.1.1-alexandria.0.tgz","fileCount":20,"integrity":"sha512-PDQBQLKuvsA13tcWFEnDomiF7C67dC0qxKlisjoBmydHT9m9FsbyetP+nj1GQTt4Jmb+k5LPgWsuB5SnbFFZnQ==","signatures":[{"sig":"MEYCIQDqAYwDL8mHPG+gTZzSjO+jv4fFTPGgKIkpQtHWEsBhCQIhAIbyzuqDGiK4eDlyqDjEIWbX4XifxCwGsaV7OPys3pGS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":555302},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","engines":{"node":">=10"},"gitHead":"8fe0ce2d15fe99b8efc4bcaa5ab8eec987c5a114","scripts":{"lint":"rome check .","build":"tsc -p tsconfig.json && tsc-esm-fix --target='dist' --ext='.js'","format":"rome format . --write","release":"yarn build && changeset publish","lint:fix":"yarn lint --apply","changeset":"changeset","watch:build":"tsc -p tsconfig.json -w","prepublishOnly":"yarn build"},"_npmUser":{"name":"alexandrialabs","email":"tech@alexandrialabs.xyz"},"repository":{"url":"git+https://github.com/Alexandria-Labs/wagmi-magic-connector.git","type":"git"},"_npmVersion":"10.5.0","description":"wagmi connector to connect with Magic SDK","directories":{},"_nodeVersion":"20.12.2","dependencies":{"magic-sdk":"^28.6.0","@wagmi/core":"^2.10.4","tsc-esm-fix":"^2.20.27","@changesets/cli":"^2.24.0","@magic-ext/oauth":"^22.0.3","@wagmi/connectors":"^5.0.6","@magic-sdk/provider":"^28.6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rome":"12.0.0","viem":"2.x","changeset":"^0.2.6","typescript":"^5.0.4","@types/node":"^20.11.24","localforage":"^1.10.0"},"peerDependencies":{"viem":"2.x","localforage":">=1.7.4"},"_npmOperationalInternal":{"tmp":"tmp/wagmi-magic-connector_2.1.1-alexandria.0_1738116985459_0.380462609237193","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has been merged upstream into @magiclabs/wagmi-connector. Please use the official @magiclabs/wagmi-connector package instead. All functionality from this fork is now available in the upstream package."}},"time":{"created":"2024-06-08T00:24:06.362Z","modified":"2025-06-19T20:57:19.858Z","2.1.0":"2024-06-08T00:24:06.679Z","2.1.1-alexandria.0":"2025-01-29T02:16:25.662Z"},"bugs":{"url":"https://github.com/Alexandria-Labs/wagmi-magic-connector/issues"},"license":"MIT","homepage":"https://github.com/Alexandria-Labs/wagmi-magic-connector#readme","keywords":["wagmi","extension","magic"],"repository":{"url":"git+https://github.com/Alexandria-Labs/wagmi-magic-connector.git","type":"git"},"description":"wagmi connector to connect with Magic SDK","maintainers":[{"name":"alexandrialabs","email":"tech@alexandrialabs.xyz"},{"name":"ameliealexandria","email":"amelie@alexandrialabs.xyz"},{"name":"carolalexandria","email":"carol@alexandrialabs.xyz"},{"name":"gary-alexandria","email":"gary@alexandrialabs.xyz"}],"readme":"# WAGMI Magic Connector\n\n[WAGMI](https://wagmi.sh/) Connector to connect with [Magic](https://magic.link/). Magic is a developer SDK that you can integrate into your application to enable passwordless authentication using magic links, OTPs, OAuth from third-party services, and more for your web3 App.\n\nSpecial thanks to the [Everipedia](https://github.com/EveripediaNetwork) team for creating the connector and working with us for ongoing support and maintenance.\n\n![Frame 184 (4)](https://user-images.githubusercontent.com/52039218/174133833-fc63f237-63bf-4134-a22b-ce77ae0f2a9b.png)\n\n# Table of Contents\n\n- [WAGMI Magic Connector](#wagmi-magic-connector)\n- [Table of Contents](#table-of-contents)\n- [⬇️ Install](#️-install)\n- [🔎 Package TL;DR](#-package-tldr)\n- [⭐ Usage](#-usage)\n- [📖 API](#-api)\n - [`options`](#options)\n - [`options.OAuthOptions`](#optionsoauthoptions)\n - [Providers](#providers)\n - [Callback URL](#callback-url)\n- [🍀 Supported Logins](#-supported-logins)\n- [🔆 Examples](#-examples)\n - [🌟 Enable Login by Socials (OAuth)](#-enable-login-by-socials-oauth)\n - [📲 Enable SMS Authentication](#-enable-sms-authentication)\n - [📧 Disable Email Authentication](#-disable-email-authentication)\n - [🎨 Modal Customization](#-modal-customization)\n- [📚 Additional Resources](#-additional-resources)\n - [Usage with RainbowKit](#usage-with-rainbowkit)\n - [**Example repositories:**](#example-repositories)\n\n# ⬇️ Install\nTwo versions of the `wagmi-magic-connector` are available, each designed to support different WAGMI versions. \n\nNote: **It is crucial not to mix up these versions to ensure compatibility and functionality.**\n\n**V1**\nThis version utilizes WAGMI version 1. To install, use the following command:\n\n`npm install @magiclabs/wagmi-connector@1.1.5`\nor\n`yarn install @magiclabs/wagmi-connector@1.1.5`\n\n**V2 (Beta)**\nThis version utilizes and includes the latest WAGMI v2 features.\n\nTo install, use the following command:\n\n`npm install @magiclabs/wagmi-connector`\nor\n`yarn install @magiclabs/wagmi-connector`\n\nWe actively encourage the community to participate in testing the versions of `wagmi-magic-connector` and to report [any issues or suggestions](https://github.com/magiclabs/wagmi-magic-connector/issues/new/choose) for improvement. Your feedback is invaluable in helping us enhance the quality and stability of the connector.\n\n# 🔎 Package TL;DR\n\nThe package contains two main connector classes: `DedicatedWalletConnector` & `UniversalWalletConnector`\n\n`DedicatedWalletConnector` is a connector integrated to the [Dedicated Wallet](https://magic.link/docs/dedicated/overview)\nproduct. It is useful if you need to assign an address to your user. \n\n`UniversalWalletConnector` is a connector integrated to the [Universal Wallet](https://magic.link/docs/universal/overview)\nproduct. It can be used to assign a read-write wallet to your user.\n\nDEPRECATED: `MagicAuthConnector` and `MagicConnectConnector` have been replaced by `DedicatedWalletConnector` and `UniversalWalletConnector` in order to line up with Magic's [product names changes](https://magic.link/docs/universal/resources/faqs#why-were-magic-product-names-changed-from-magic-connect-and-magic-auth). However, they are still usable and will function as they did before.\n\n# ⭐ Usage\n\n```javascript\nimport { dedicatedWalletConnector, universalWalletConnector } from '@magiclabs/wagmi-connector';\n\n// Dedicated Wallet integration\nconst connector = dedicatedWalletConnector({\n options: {\n apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required\n //...Other options\n },\n});\n\n// Universal Wallet integration \nconst connector = universalWalletConnector({\n options: {\n apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required\n //...Other options\n },\n});\n```\n\n# 📖 API\n\n## `options`\n\nThe following can be passed to connector options object:\n\n| Key | Value | `DedicatedWalletConnector` support | `UniversalWalletConnector` support | Description |\n|-----------------------|----------------------------|------------------------------|---------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| accentColor | css color (hex/rgb/etc...) | ✔️\t | ✔️ | 🎨 (Optional) Makes modal to use the custom accentColor instead of default purple |\n| isDarkMode | true / false | ✔️\t | ✔️ | 🎨 (Optional) Makes modal dark mode if true. Default value is false |\n| customLogo | path_to_logo / url | ✔️\t | ✔️ | 🎨 (Optional) Makes modal to use the custom logo instead of default magic logo |\n| customHeaderText | string | ✔️\t | ✔️ | 🎨 (Optional) Makes modal to use the custom header text instead of default text at the bottom of logo |\n| enableSMSLogin | true / false | ✔️\t | ❌ | 🌟 (Optional) Makes modal to enable SMS login if true. Default value is false |\n| enableEmailLogin | true / false | ✔️\t | ❌ | 🌟 (Optional) Makes modal to disable Email login if false. Default value is true |\n| OAuthOptions | object | ✔️\t | ❌ | 🌟 (Optional) Makes modal to enable OAuth login according to configuration passed. |\n| magicSdkConfiguration | object | ✔️\t | ✔️ | 🛠️ (Optional) Pass additional options to Magic constructor (refer [Magic API documentation](https://magic.link/docs/api-reference/client-side-sdks/web#constructor) for more) |\n| networks | array of EthNetworkConfiguration | ❌ | ✔️ | 🛠️ (Optional) Pass the list of network compatible to switch networks |\n\n## `options.OAuthOptions`\n\nThe following can be passed to options.OAuthOptions object to configure OAuth login:\n\n| Key | Value | Description |\n|-------------|------------------|-----------------------------------------------------------------------------------------------------------|\n| providers | array of strings | 🌟 (Required) List of providers to enable. check out all possible providers in OAuthOptions section above |\n| callbackUrl | string | 🌟 (Optional) Callback URL to redirect to after authentication. Default value is current URL. |\n\n### Providers\n\nHere are all the possible providers:\n\n- google\n- facebook\n- apple\n- github\n- bitbucket\n- gitlab\n- linkedin\n- twitter\n- discord\n- twitch\n- microsoft\n\n### Callback URL\n\nYou can provide a callback URL to redirect the user to after authentication. the default callback URL is set to the current URL.\n\n# 🍀 Supported Logins\n\n| Key | `DedicatedWalletConnector` support | `UniversalWalletConnector` support |\n|----------------------------|------------------------------|---------------------------------|\n| Email | ✔️\t | ✔️\t |\n| SMS | ✔️\t | ❌ |\n| Social Logins | ✔️\t | ❌ |\n| WebAuthn | ❌ | ❌ |\n| Multifactor Authentication | ❌ | ❌ |\n\n# 🔆 Examples\n\n## 🌟 Enable Login by Socials (OAuth)\n\nYou configure OAuth with magic by adding the following options to the connector:\n\n```javascript\nconst connector = dedicatedWalletConnector({\n options: {\n apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required\n oauthOptions : {\n providers: ['facebook', 'google', 'twitter'],\n callbackUrl: 'https://your-callback-url.com', //optional\n }\n },\n})\n```\n\nTo retrieve the Magic redirect result when a user is authenticated and logged in, use `JSON.parse(localStorage.getItem(\"magicRedirectResult\"))`. This will give you access to the redirect result object. The object will be removed from localStorage once the user disconnects.\n\n\n## 📲 Enable SMS Authentication\n\nYou can enable SMS authentication by adding the following options to the connector:\n\n```javascript\nconst connector = dedicatedWalletConnector({\n options: {\n apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required\n enableSMSLogin: true, //optional (default: false)\n //...Other options\n },\n});\n```\n\nYou have to enable SMS authentication in your [Magic dashboard](https://dashboard.magic.link) first to make it work.\n\n## 📧 Disable Email Authentication\n\nBy default Email is set to true as default. if you wish to remove Email OTP, pass `enableEmailLogin: false` in options object as follows :\n\n```javascript\nconst connector = dedicatedWalletConnector({\n options: {\n apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY, //required\n enableEmailLogin: false, //optional (default: true)\n //...Other options\n },\n});\n```\n \n\n## 🎨 Modal Customization\n\nYou can customize the modal's theme, default accent color, logo and header text.\n\n```javascript\nimport { dedicatedWalletConnector } from '@magiclabs/wagmi-connector';\n\nconst connector = dedicatedWalletConnector({\n options: {\n apiKey: YOUR_MAGIC_PUBLISHABLE_API_KEY,\n accentColor: '#ff0000',\n customLogo: 'https://example.com/logo.png',\n headerText: 'Login to your account',\n isDarkMode: true,\n },\n});\n```\n\ncheck out the [API Section](#-api) for more information.\nfor complete styling, you can override styles of the modal with ```! important```.\n\n# 📚 Additional Resources\n\n## Usage with RainbowKit\n\nTo use the connector with Rainbow kit, create a new file `RainbowMagicConnector.ts` with following contents:\n\n```javascript\n// RainbowMagicConnector.ts\n\nimport { universalWalletConnector } from '@magiclabs/wagmi-connector';\n\nexport const rainbowMagicConnector = ({ chains }: any) => ({\n id: 'magic',\n name: 'Magic',\n iconUrl: 'https://svgshare.com/i/iJK.svg',\n iconBackground: '#fff',\n createConnector: () => {\n const connector = universalWalletConnector({\n chains: chains,\n options: {\n apiKey: 'YOUR_MAGIC_CONNECT_API_KEY',\n magicSdkConfiguration: {\n network: {\n rpcUrl: 'https://polygon-rpc.com', // your ethereum, polygon, or optimism mainnet/testnet rpc URL\n chainId: 137,\n },\n },\n //...Other options (check out full API below)\n },\n });\n return {\n connector,\n };\n },\n});\n```\n\n> Note: `options.magicSdkConfiguration.network.chainId` is mandatory for the integration with RainbowKit\n> to properly work.\n\nImport the above file to your application root where you wrap your application with `WagmiConfig` component.\npass the ```client``` prop with ```createClient``` instance to the `WagmiConfig` component as shown below:\n\n```javascript\n// App.tsx\n\n// ...\nconst { chains, publicClient, webSocketPublicClient } =\n configureChains(YOUR_CHAIN_CONFIG);\nconst connectors = connectorsForWallets([\n {\n groupName: 'Recommended',\n wallets: [\n //... other wallets connectors\n rainbowMagicConnector({ chains }),\n ],\n },\n]);\nconst wagmiConfig = createConfig({\n\tautoConnect: false,\n\tconnectors,\n\tpublicClient,\n\twebSocketPublicClient\n});\nfunction MyApp({ Component, pageProps }: AppProps) {\n return (\n \n \n \n \n \n );\n}\nexport default MyApp;\n```\n\nThis procedure might change depending on the version of Rainbow kit you are using so please check the documentation of the Rainbow kit if it is not working.\n\n## **Example repositories:** \n- https://github.com/Royal-lobster/vanilla-magic-example\n- https://github.com/Royal-lobster/rainbow-magic-example (With Rainbowkit 🌈)\n","readmeFilename":"README.md"}