Getting Started with the Magic Client SDK for React Native

Getting Started with the Magic Client SDK for React Native

Reference for the Magic SDK for React Native: https://github.com/magiclabs/magic-js

Overview

The Magic React Native JavaScript SDK is distributed from the same NPM package as our Magic SDK for Web! This is your entry-point to secure, passwordless authentication for your iOS or Android-based React Native app. This guide will cover some important topics for getting started with client-side APIs and to make the most of Magic's features.

APIs from Magic SDK for Web are also available in the React Native bundle.

Magic can support either server-based or serverless web applications. It is up to the developers to implement the Admin SDK to validate the DID Token.

Installation

important
  • As of magic-sdk@2.0.0: React Native bindings are published as a separate NPM package.

  • As of @magic-sdk/react-native@2.0.0: the sub-dependencyreact-native-webview is removed from the package dependencies and required as a peer dependency to avoid IOS WebView module collision. Read more. :::

NPM

npm install --save @magic-sdk/react-native # Ensure the required `peerDependencies` are installed npm install --save react-native-webview@^8.0.0

Yarn

yarn add @magic-sdk/react-native # Ensure the required `peerDependencies` are installed yarn add react-native-webview@^8.0.0

Create an SDK Instance

Examples for the Magic Client SDK for React Native uses the ES Module/TypeScript pattern by default.

ES Modules/TypeScript

import { Magic } from '@magic-sdk/react-native'; const m = new Magic('API_KEY'); // āœØ

CommonJS

const { Magic } = require('@magic-sdk/react-native'); const m = new Magic('API_KEY'); // āœØ

Rendering Magic

To facilitate events between the Magic <iframe> context and your React Native application, a React component is exposed on your Magic instance: <Relayer>.

<Relayer> must be rendered into your application before Magic methods will resolve. :::

function App() { return ( <View> {/* Remember to render the `Relayer` component into your app! */} <m.Relayer /> </View> ); }

Usage With Ethereum/Web3

As with our web SDK, the React Native SDK can be used with Ethereum via Web3 or Ethers JS.

There's one "gotcha" to be aware of: @magic-sdk/react-native must be imported before web3 (this restriction does not apply to ethers). For example:

// šŸš« Bad! import Web3 from 'web3'; import { Magic } from '@magic-sdk/react-native'; // āœ… Good! import { Magic } from '@magic-sdk/react-native'; import Web3 from 'web3';

Set up web3.js

If you encounter this error: "Crypto" could not be found within the project

npm install --save node-libs-browser

Then, create a file called metro.config.js at the root of the project:

module.exports = { resolver: { extraNodeModules: require('node-libs-browser'), }, };

šŸ‘‰ Learn more about using Magic SDK with Ethereum!