Get started with magical web3 onboarding in less than two minutes.

# 📥 Install

NPM

01npm install --save magic-sdk

Yarn

01yarn add magic-sdk

CDN

01<script src="https://auth.magic.link/sdk"></script>

#🔧 Configure

#API Keys

You will need to sign up on the Magic Dashboard to get your own API keys to use the SDK. You can access your Magic Connect API key via the Home tab of any Magic Connect app in the developer dashboard.

#Network

Magic Connect currently supports testnets and mainnet for Ethereum, Polygon, and Optimism. If no custom network configuration is passed in, Magic will default to Ethereum as the chain and use pre-defined RPC urls. Other urls listed in the documentation are publicly available and not gaurenteed to be working.

Note: All network configurations will share the same address/identity space outside of network: "goerli" which will have it's own space intended for testing.

⁠Ethereum Mainnet

01⁠// ethereum mainnet 

02const magic = new Magic('YOUR_API_KEY', {

03  network: "mainnet", // or your own custom node url in the format of { rpcUrl: string chainId: number }

04});

⁠Ethereum Testnet (Goerli)

01⁠// ethereum testnet 

02const magic = new Magic('YOUR_API_KEY', {

03  network: "goerli", // or your own custom node url in the format of { rpcUrl: string chainId: number }

04});

05⁠

Polygon

01⁠// polgyon mainnet

02const magic = new Magic('YOUR_API_KEY', {

03    network: {

04        rpcUrl: 'https://polygon-rpc.com/', // or https://matic-mumbai.chainstacklabs.com for testnet

05        chainId: 137 // or 80001 for polygon testnet

06    }

07});

Optimism

01⁠// optimism mainnet 

02const magic = new Magic('YOUR_API_KEY', {

03    network: {

04        rpcUrl: 'https://mainnet.optimism.io/', // or https://goerli.optimism.io/ for testnet

05        chainId: 10, // or 420 for goerli optimism testnet

06    }

07});

Note: The examples listed here are using public node providers. It is recommended to switch to your own infrastructure provider through services like Infura and Alchemy prior to going to production.

#🔗 Connect

Once your Magic instance has been configured and initialized, you can now use web3.js or ethers.js to request signatures and call any supported EVM RPC Methods.

Connect with web3.js:

01import { Magic } from "magic-sdk"

02import Web3 from 'web3';

03

04const magic = new Magic('YOUR_API_KEY', { 

05  network: "goerli",

06});

07

08const web3 = new Web3(magic.rpcProvider);

09const accounts = await magic.wallet.connectWithUI();

Connect with ethers.js:

01import { Magic } from "magic-sdk"

02import { ethers } from "ethers";

03

04const magic = new Magic('YOUR_API_KEY', { 

05  network: "goerli",

06});

07

08const provider = new ethers.providers.Web3Provider(magic.rpcProvider);

09const accounts = await magic.wallet.connectWithUI();

#Next Steps

• 👉 Dive into a React based codesandbox demo and try out Magic's functionality.
• 👉 Learn how to configure your authentication options, show the users's Magic wallet, and request emails from users.
• 👉 Check out our SDK reference.
• ⁠⁠👉 For white-labeled solutions and additional blockchain support, see our enterprise solution Magic Auth.