@magic-sdk/react-native-bare

✨ Magic Authentication JavaScript SDK

Magic empowers developers to protect their users via an innovative, passwordless authentication flow without the UX compromises that burden traditional OAuth implementations.

License · Changelog · Contributing Guide

⚠️ Removal of loginWithMagicLink() ⚠️

As of v19.0.0, passcodes (ie. loginWithSMS(), loginWithEmailOTP()) are replacing Magic Links (ie. loginWithMagicLink()) for all of our Mobile SDKs⁠. Learn more

📖 Documentation

See the developer documentation to learn how you can master the Magic SDK in a matter of minutes.

🔗 Installation

Integrating your app with Magic will require our client-side NPM package:

# Via NPM:
npm install --save @magic-sdk/react-native-bare
npm install --save react-native-device-info # Required Peer Dependency
npm install --save @react-native-community/async-storage # Required Peer Dependency
npm install --save react-native-safe-area-context # Required Peer Dependency
npm install --save @react-native-community/netinfo # Required Peer Dependency

# Via Yarn:
yarn add @magic-sdk/react-native-bare
yarn add react-native-device-info # Required Peer Dependency
yarn add @react-native-community/async-storage # Required Peer Dependency
yarn add react-native-safe-area-context # Required Peer Dependency
yarn add @react-native-community/netinfo # Required Peer Dependency

⚡️ Quick Start

Sign up or log in to the developer dashboard to receive API keys that will allow your application to interact with Magic's authentication APIs.

Then, you can start authenticating users with just one method!

import React from 'react';
import { Magic } from '@magic-sdk/react-native-bare';
import { SafeAreaProvider } from 'react-native-safe-area-context';

const magic = new Magic('YOUR_API_KEY');

export default function App() {
  return <>
	 <SafeAreaProvider>
	    {/* Render the Magic iframe! */}
	    <magic.Relayer />
	    {...}
	 </SafeAreaProvider>
  </>
}

// Somewhere else in your code...
await magic.auth.loginWithEmailOTP({ email: '[e-mail]' });

⁠⁠👉 Check out some of our React Native Demo apps for inspiration! 👀

👀 SafeAreaView

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

We have also added an optional backgroundColor prop to the Relayer to fix issues with SafeAreaView showing the background. By default, the background will be white. If you have changed the background color as part of your custom branding setup, make sure to pass your custom background color to magic.Relayer:

<magic.Relayer backgroundColor="#0000FF"/>

🙌🏾 Troubleshooting

Symlinking in Monorepo w/ Metro

For React Native projects living within a monorepo that run into the following TypeError: Undefined is not an object error:

When attempting to import Magic, take note that the React Native metro bundler doesn’t work well with symlinks, which tend to be utilized by most package managers.

For this issue consider using Microsoft's rnx-kit suite of tools that include a plugin for metro that fixes this symlink related error.

Handling internet connection problems

When an app is opened without internet connection, any request to the Magic SDK will result in a rejection with a MagicSDKError:

{
  "code": "MODAL_NOT_READY",
  "rawMessage": "Modal is not ready."
}

It is good practice to use @react-native-community/netinfo to track the internet connection state of the device. For your convenience, we've also added a hook that uses this library behind the scenes:

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

const magic = new Magic('YOUR_API_KEY');

const connected = useInternetConnection()

useEffect(() => {
   if (!connected) {
       // Unomount this component and show your "You're offline" screen.
   }
}, [connected])

export default function App() {
   return <>
       <SafeAreaProvider>
           {/* Render the Magic iframe! */}
           <magic.Relayer />
           {...}
       </SafeAreaProvider>
   </>
}