Get Started
Get Started
You will first need to install our SDK and the connect extension via Yarn or NPM.
01# Yarn
02yarn add magic-sdk @magic-ext/connect
03
04# NPM
05npm install magic-sdk @magic-ext/connect
Integration should be similar to most other wallets. Create a client with the connect extension and then pass the client’s rpcProvider
to your choice of library.
#Web3.js
01// ⭐️Web3.js
02import Web3 from 'web3';
03import { Magic } from 'magic-sdk';
04import { ConnectExtension } from '@magic-ext/connect';
05
06const customNodeOptions = {
07 rpcUrl: 'https://polygon-rpc.com', // your ethereum, polygon, or optimism mainnet/testnet rpc URL
08 chainId: 137
09}
10
11const magic = new Magic('YOUR_API_KEY', {
12 extensions: [new ConnectExtension()],
13 network: customNodeOptions,
14});
15const web3 = new Web3(magic.rpcProvider);
16
17web3.eth.getAccounts().then(accounts => console.log(accounts[0]));
18
19// ⭐️Ethers.js
20import { Magic } from "magic-sdk"
21import { ConnectExtension } from "@magic-ext/connect";
22import { ethers } from "ethers";
23
24const customNodeOptions = {
25 rpcUrl: 'https://polygon-rpc.com', // your ethereum, polygon, or optimism mainnet/testnet rpc URL
26 chainId: 137
27}
28
29const magic = new Magic('YOUR_API_KEY', {
30 network: customNodeOptions,
31 extensions: [new ConnectExtension()]
32});
33
34const provider = new ethers.providers.Web3Provider(magic.rpcProvider);
35provider.listAccounts().then(accounts => console.log(accounts[0]));
You should now be setup to onboard new users simply by requesting an account.
#API Key Provisioning
You can access your Magic Connect API key via the Home tab of any Magic Connect app in Magic's developer dashboard.
#Network and chain
Each dApp controls what network and chain the user interacts with. To ensure a simple and accessible experience, users cannot manually switch between chains or networks.
Connecting to Ethereum mainnet using Magic's node infrastructure:
01const magic = new Magic('YOUR_API_KEY', {
02 extensions: [new ConnectExtension()],
03 network: "mainnet",
04});
05// Magic's node infrastructure maps 'mainnet' and 'testnet' to 2 unique set of addresses.
Connecting to Ethereum testnet using Magic's node infrastructure:
01const magic = new Magic('YOUR_API_KEY', {
02 extensions: [new ConnectExtension()],
03 network: "goerli",
04});
05// Magic's node infrastructure maps 'mainnet' and 'testnet' to 2 unique set of addresses.
Connecting to Polygon using a custom node URL:
01const customNodeOptions = {
02 rpcUrl: 'https://polygon-rpc.com/',
03 chainId: 137,
04}
05
06const magic = new Magic('YOUR_API_KEY', {
07 extensions: [new ConnectExtension()],
08 network: customNodeOptions
09});
Connecting to Optimism using a custom node URL:
01const customNodeOptions = {
02 rpcUrl: 'https://mainnet.optimism.io/', // or "https://goerli.optimism.io/
03 chainId: 10, // or 420 for goerli optimism testnet
04}
05
06const magic = new Magic('YOUR_API_KEY', {
07 extensions: [new ConnectExtension()],
08 network: customNodeOptions
09});
#Magic Connect SDK API
There are a few SDK methods which Magic Connect offers to enable a smooth end-user experience, such as triggering the wallet widget to appear or requesting contact information. These are located under the connect
namespace on the client. A detailed list of these methods can be found in the Connect SDK docs.
01const magic = new Magic('YOUR_API_KEY', {
02 extensions: [new ConnectExtension()],
03});
04
05magic.connect.showWallet(); // <==== supported method
#Unsupported Magic Auth SDK API
Magic Auth and all the SDK methods specific to Magic Auth such as loginWithMagicLink
are not supported when using Magic Connect. Only SDK methods under the connect
namespace are supported. Calling an unsupported SDK method will reject the RPC request with an error indicating the method is not supported with Magic Connect.
01const magic = new Magic('YOUR_API_KEY', {
02 extensions: [new ConnectExtension()],
03});
04magic.auth.authSdkMethod(); // <==== not supported (https://magic.link/docs/api-reference/client-side-sdks/web#auth-module)
05magic.user.userSdkMethod(); // <==== not supported (https://magic.link/docs/api-reference/client-side-sdks/web#user-module)
#Magic Connect Auth Options
Magic Connect supports two different authentication methods for a user to secure their wallet. This is handled completely by Magic with no lift from the integrating dApp. Magic supports the following login methods:
- Google One Tap
- Email one-time passcode
#Google Login
Google Login supports Google Accounts with a Gmail domain and non-Gmail Google Login accounts (e.g. G-Suite domains such as `[email protected]`).
Google Login is hidden within embedded webview browsers and mobile SDKs due to Google's security policy.
#Email One-Time Passcode
Email logins with an `@gmail.com` domain will resolve to the same user as a matching Google Login. This is to say [email protected] will be auto-linked to a Google Login account with the same email and viceversa but ONLY for Gmail domain emails. Auto-linking is not supported for custom G Suite/Google Workspace domains (such as `[email protected]`)
#Support List
#Languages
- Javascript/Typescript
- iOS Swift
- Android Kotlin
#Chains
- Ethereum
- Polygon
- Optimism
#Platforms
- Web
- Mobile
#Admin SDK
⚠️The Magic Auth Admin SDK and DID tokens are not supported for Magic Connect at this time.
# Third-party Wallets
Magic Connect allows users to connect with existing third-party wallets (e.g. MetaMask). When a user is asked for a public address, they can select a supported third-party wallet to use from the Magic Connect login view.
The SDK will remember this choice on the client and all further RPC calls will be forwarded to the selected wallet. This selection can be reset by calling the disconnect()
SDK method.
Currently, MetaMask, WalletConnect, and Coinbase Wallet are shown by default for all Magic Connect apps. Visibility of third-party wallets can be toggled on or off via the Wallet Providers page in the Magic developer dashboard.
Third-party Wallets will be coming soon on Mobile SDKs.