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

#Bare

01# NPM

02npm install --save @magic-sdk/react-native-bare

03npm install --save react-native-device-info # Required Peer Dependency

04npm install --save @react-native-async-storage/async-storage # Required Peer Dependency

05npm install --save react-native-safe-area-context # Required Peer Dependency

06⁠

07# Yarn

08yarn add @magic-sdk/react-native-bare

09⁠yarn add react-native-device-info # Required Peer Dependency

10yarn add @react-native-async-storage/async-storage # Required Peer Dependency

11yarn add react-native-safe-area-context # Required Peer Dependency

12⁠

13# For iOS

14cd ios

15⁠pod install

16⁠

17# Start your app

18⁠cd /path/to/project/root

19yarn start

#Expo

01# NPM

02npm install --save @magic-sdk/react-native-expo

03npm install --save react-native-webview@^8.0.0 # Required Peer Dependency

04npm install --save react-native-safe-area-context # Required Peer Dependency

05

06⁠# Yarn

07yarn add @magic-sdk/react-native-expo

08yarn add react-native-webview@^8.0.0 # Required Peer Dependency

09yarn add react-native-safe-area-context # Required Peer Dependency

10⁠

11# Start your app

12expo start

#Create an SDK Instance

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

#ES Modules/TypeScript

01# Bare React Native

02import { Magic } from '@magic-sdk/react-native-bare';

03# Expo React Native

04import { Magic } from '@magic-sdk/react-native-expo';

05

06const m = new Magic('API_KEY'); // ✨

#CommonJS

01# Bare React Native

02const { Magic } = require('@magic-sdk/react-native-bare');

03⁠# Expo React Native

04const { Magic } = require('@magic-sdk/react-native-expo');

05

06const m = new Magic('API_KEY'); // ✨

#Rendering Magic

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

01function App() {

02  return (

03    <SafeAreaProvider>

04      {/* Remember to render the `Relayer` component into your app! */}

05      <m.Relayer />

06    </SafeAreaProvider>

07  );

08}

#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-bare (or @magic-sdk/react-native-expo for Expo setups) should be imported before web3 (this restriction does not apply to ethers). For example:

01// 🚫 Bad!

02import Web3 from 'web3';

03import { Magic } from '@magic-sdk/react-native-bare';

04

05// ✅ Good!

06import { Magic } from '@magic-sdk/react-native-bare';

07import Web3 from 'web3';

#Set up web3.js

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

01npm install --save node-libs-browser

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

01module.exports = {

02  resolver: {

03    extraNodeModules: require('node-libs-browser'),

04  },

05};

👉 Learn more about using Magic SDK with Ethereum!

⁠⁠👉 Check out some of our sample apps for inspiration!

Server-side SDKs?

Integrate Magic with your existing backend.

Node

Python

Laravel

Ruby

PHP

Go

View 1 more