@magic-sdk/react-native-expo

✨ 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

⚠️ Major Change: Package Split Beta ⚠️

Please note that splitting the Expo and Bare React Native Magic package is a part of a beta release. Take whatever precautions necessary to verify use before installing on your production application. As always, in the case something goes awry, you may open an issue and revert your package to the previous pre-split stable version magic-sdk/react-native@x.x.x.

📖 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-expo
npm install --save react-native-webview@^8.0.0 # Required Peer Dependency
npm install --save react-native-safe-area-context # Required Peer Dependency

# Via Yarn:
yarn add @magic-sdk/react-native-expo
yarn add react-native-webview@^8.0.0 # Required Peer Dependency
yarn add react-native-safe-area-context # 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-expo';
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.loginWithMagicLink({ 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.

🙌🏾 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.