#Version

For ease of use, this documentation centers around using @magic-sdk/react-native-expo version 14.4.0 and above. That said, you may assume that ⁠@magic-sdk/react-native-bare can be used in the same way. You can view the open-source repository for this SDK on Github and all releases on NPM.

#Demo

Check out this repository for a demo application using all of the following methods.

#Configuration & Setup

In order to use the Magic React Native SDK, you must get a valid publishable API key from the Magic Dashboard. In the examples below, replace the value of YOUR_API_KEY with the value you get from the dashboard. See the quickstart section for more details and installation instructions.

#Constructor

#Magic()

Configure and construct your Magic SDK instance.

#Arguments

new Magic(apiKey, options?)

#Example

Standard Example

01import { Magic } from "@magic-sdk/react-native-expo"

02

03const magic = new Magic('YOUR_API_KEY');

Use presets for Ethereum

01import { Magic } from "@magic-sdk/react-native-expo"

02

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

04  network: 'goerli', // connect to Ethereum Testnet!

05});

Use Polygon, Optimism or custom RPC URLs

01import { Magic } from "@magic-sdk/react-native-expo"

02

03const customNodeOptions = {

04  rpcUrl: 'https://polygon-rpc.com', // your ethereum, polygon, or optimism mainnet/testnet rpc URL

05  chainId: 137 // corresponding chainId for your rpc url

06}

07

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

09  network: customNodeOptions, // connected to Polygon Mainnet!

10});

#Wallet Module Methods

All methods below are namespaced to the magic.wallet module. ⁠

#connectWithUI()

Request the user to connect their wallet to the dapp. This is done by using the EVM RPC method getAccount. 

#Arguments

None.

#Returns

1. String[] : An array of user accounts that are connected, with the first element being the current public address of the user.

#Example

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

# ⁠getInfo()

Get information about the wallet the user is currently logged-in with. User must be signed in for this method to return or else it will throw an error. 

#Arguments

None.

#Returns

1. Object : Information about the wallet the user is currently signed in with. ⁠walletType: 'magic'|'metamask'|'coinbase_wallet'|'wallet_connect'

Will throw an error if no user is logged in.

#Example

01const walletInfo = await magic.wallet.getInfo();

02console.log(walletInfo); // { walletType: "magic" | "metamask" | "coinbase_wallet" | "wallet_connect" }

#showUI()

Displays the wallet widget. This is only supported for users who login with email or Google and not third party wallets such as metamask. User must be signed in for this method to return or else it will throw an error.

#Arguments

None.

#Returns

1. Promise which resolves when the user closes the wallet widget window.

#Example

01// after user has already logged in

02const { walletType } = await magic.wallet.getInfo();

03

04if (walletType === "magic") {

05  await magic.wallet.showUI(); // shows wallet widget

06};

#requestUserInfoWithUI()

Displays the wallet widget within an iframe that prompts the user to consent to sharing information with the requesting dApp with OpenID profile scopes. Currently, the only profile scope that can be requested is a verified email. Collecting a verified email address from third-party wallet users (MetaMask, Coinbase Wallet, etc.) is a premium feature but included in the free trial period (see pricing). User must be signed in for this method to return or else it will throw an error.

#Arguments

1. scope?: Object : The object containing requested OpenID profile scopes.

   • email?: String : If the user should be prompted to provide their email as a required or optional field.

#Returns

1. A promise which returns an Object : Contains result of the requested scopes.

   • email?: String: The email of the user if they consented to providing it in the UI.

#Example

01// after user has already logged in

02const userInfo = await magic.wallet.requestUserInfoWithUI({ scope: { email: "required" }})

03⁠console.log(userInfo.email); // the user's email if they consented.

#disconnect()

Disconnects the user from the dApp. This is similar to logging a user out in that it will clear the authenticated state for the current user, the iframe, and any third party wallet the user may have signed in with. User must be signed in for this method to return or else it will throw an error.

#Arguments

None.

#Returns

1. A promise that return a boolean: If the user's session was succesfully cleared or not.

#Example

01await magic.wallet.disconnect() // clears user session