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]`).

#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.

Metamask

• https://metamask.io/

WalletConnect

• https://walletconnect.com/

Coinbase Wallet

• https://www.coinbase.com/wallet