Get Started
Get Started
You will first need to install our SDK and the connect extension via Yarn or NPM.
yarn add magic-sdk @magic-ext/connect
npm 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
import Web3 from 'web3';
import { Magic } from 'magic-sdk';
import { ConnectExtension } from '@magic-ext/connect';
const customNodeOptions = {
rpcUrl: 'https://polygon-rpc.com', // your ethereum, polygon, or optimism mainnet/testnet rpc URL
chainId: 137
}
const magic = new Magic('YOUR_API_KEY', {
extensions: [new ConnectExtension()],
network: customNodeOptions,
});
const web3 = new Web3(magic.rpcProvider);
web3.eth.getAccounts().then(accounts => console.log(accounts[0]));
#Ethers.js
import { Magic } from "magic-sdk"
import { ConnectExtension } from "@magic-ext/connect";
import { ethers } from "ethers";
const customNodeOptions = {
rpcUrl: 'https://polygon-rpc.com', // your ethereum, polygon, or optimism mainnet/testnet rpc URL
chainId: 137
}
const magic = new Magic('YOUR_API_KEY', {
network: customNodeOptions,
extensions: [new ConnectExtension()]
});
const provider = new ethers.providers.Web3Provider(magic.rpcProvider);
provider.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:
const magic = new Magic('YOUR_API_KEY', {
extensions: [new ConnectExtension()],
network: "mainnet",
});
Connecting to Ethereum testnet using Magic's node infrastructure:
const magic = new Magic('YOUR_API_KEY', {
extensions: [new ConnectExtension()],
network: "goerli",
});
Connecting to Polygon (or a developer's own Ethereum custom node using Alchemy, Infura, or other providers):
const customNodeOptions = {
rpcUrl: 'https://polygon-rpc.com/',
chainId: 137,
}
const magic = new Magic('YOUR_API_KEY', {
extensions: [new ConnectExtension()],
network: customNodeOptions
});
Connecting to Optimism using Magic's node infrastructure:
const customNodeOptions = {
rpcUrl: 'https://mainnet.optimism.io/', // or "https://goerli.optimism.io/
chainId: 10, // or 420 for goerli optimism testnet
}
const magic = new Magic('YOUR_API_KEY', {
extensions: [new ConnectExtension()],
network: customNodeOptions
});
#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.
const magic = new Magic('YOUR_API_KEY', {
extensions: [new ConnectExtension()],
});
magic.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.
const magic = new Magic('YOUR_API_KEY', {
extensions: [new ConnectExtension()],
});
magic.auth.authSdkMethod(); // <==== not supported (https://magic.link/docs/api-reference/client-side-sdks/web#auth-module)
magic.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 `example@acme.co`).
Google Login is hidden within embedded webview browsers 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 example@gmail.com 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 `example@acme.co`)
#Support List
#Languages
- Javascript/Typescript
#Chains
- Ethereum
- Polygon
- Optimism
#Platforms
- Web
#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.
Metamask
WalletConnect
Coinbase Wallet
