Skip to content

Magic browser/React Native JavaScript SDK is your entry-point to integrating passwordless authentication inside your application.

License

Notifications You must be signed in to change notification settings

magiclabs/magic-js

Repository files navigation

✨ Magic Authentication JavaScript SDK

<MagicLabs>

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

📖 Documentation

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

⚡️ Quick Start

Installation

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

# Via NPM:
npm install --save magic-sdk # If you're targeting web browsers
npm install --save @magic-sdk/react-native # If you're targeting React Native

# Via Yarn:
yarn add magic-sdk # If you're targeting web browsers
yarn add @magic-sdk/react-native # If you're targeting React Native

Alternatively, you can load via CDN with by adding a script tag to your app’s <head>:

<script src="https://cdn.jsdelivr.net/npm/magic-sdk/dist/magic.js"></script>

Usage

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! Magic works across all modern desktop, mobile Chrome, Safari and Firefox browsers.

import { Magic } from 'magic-sdk';

const magic = new Magic('YOUR_API_KEY');

await magic.auth.loginWithMagicLink({ email: '[email protected]' });

📦 Package Ecosystem

Entry points

These are packages you can install to enable Magic JS SDK functionality for your client-side application.

Package Name Changelog Description
magic-sdk CHANGELOG Web/browser entry-point for Magic SDK.
@magic-sdk/react-native CHANGELOG React Native entry-point for Magic SDK.

Internals

These are packages Magic JS SDK uses internally to work seamlessly across platforms.

Package Name Changelog Description
@magic-sdk/types CHANGELOG Core typings shared between JavaScript entry-points of Magic SDK.
@magic-sdk/provider CHANGELOG Core business logic shared between JavaScript entry-points of Magic SDK.
@magic-sdk/commons CHANGELOG Exposes a listing of common public APIs from @magic-sdk/provider and @magic-sdk/typings to the platform-specific entry points.

🚦 Testing

Run tests for all packages

yarn test

Test an individual package

PKG=magic-sdk yarn test
PKG=@magic-sdk/react-native yarn test

Test specific files

yarn test /test/**/constructor.spec.ts