Magic SMS for React Native
Magic SMS for React Native
New to Magic?
Create a fully-functional Magic auth demo in minutes.
#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 are also available in the React Native bundle.
#Installation
- As of magic-sdk v2.0.0: React Native bindings are published as a separate NPM package.
- As of @magic-sdk/react-native v2.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 magicClient = new Magic('API_KEY'); // ✨
#CommonJS
const { Magic } = require('@magic-sdk/react-native');
const magicClient = 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>
);
}
#Make a Request
const DID = await magicClient.auth.loginWithSMS({
phoneNumber: '+14151231234',
});
// Consume decentralized identity (DID)