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. We are going to use web3js.

import Web3 from 'web3';

import { Magic } from 'magic-sdk';

import { ConnectExtension } from '@magic-ext/connect';

const magic = new Magic('YOUR_API_KEY', {

  extensions: [new ConnectExtension()],

	network: "rinkeby", // or "ropsten" or "kovan"

});

const web3 = new Web3(magic.rpcProvider);

web3.eth.getAccounts().then(accounts => console.log(accounts[0]));

Depending on your libraries and use case this may change slightly. Reach out if there are any questions around integrating with a specific library.

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: "rinkeby", // or "ropsten" or "kovan"

});

Connecting to Polygon (or a developer's own Ethereum custom node using Alchemy, Infura, or other providers):

const customNodeOptions = {

  rpcUrl: 'https://rpc-mainnet.maticvigil.com/',

  chainId: 137,

}

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 detail list of these methods can be found here.

const magic = new Magic('YOUR_API_KEY', {

  extensions: [new ConnectExtension()],

});

magic.connect.supportedSdkMethods(); // <==== supported

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

#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

#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 and Wallet Connect are shown by default for all Magic Connect apps. Before the end of July, developers will have the ability to toggle which 3rd-party wallets to display on the Magic Connect login view via developer dashboard.

Metamask

• https://metamask.io/

Wallet Connect

• https://walletconnect.com/