Magic SMS for React Native

Magic SMS for React Native

New to Magic?

Create a fully-functional Magic auth demo in minutes.

Build a demo

#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 web package are also available in the React Native bundle.

#Installation

important
  • Our React Native package is split between two packages: @magic-sdk/react-native-bare for Bare React Native setups and @magic-sdk/react-native-expo for those utilizing Expo

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

  • Please note that as of v14.0.0 our React Native package offerings wrap the <Relayer> in react-native-safe-area-context's <SafeAreaView />. To prevent any adverse behavior in your app, please place the Magic Relayer React component at the root view of your application wrapped in a SafeAreaProvider as described in the documentation.

#Bare

Bash
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

Bash
01# NPM
02npm install --save @magic-sdk/react-native-expo
03npm install --save react-native-webview # 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 # 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

JSX
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 magicClient = new Magic('API_KEY'); // ✨

#CommonJS

JSX
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 magicClient = 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>.

important

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

JSX
01function App() {
02  return (
03    <SafeAreaProvider>
04      {/* Remember to render the `Relayer` component into your app! */}
05      <m.Relayer />
06    </SafeAreaProvider>
07  );
08}

#Make a Request

JSX
01const DID = await magicClient.auth.loginWithSMS({
02  phoneNumber: '+14151231234',
03});
04// Consume decentralized identity (DID)

Server-side SDKs?

Integrate Magic with your existing backend.

Did you find what you were looking for?

Did you find what you were looking for?