JSPM

magic-sdk

29.0.0-canary.857.13639471400.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 23885
  • Score
    100M100P100Q137109F
  • License MIT

Passwordless authentication for the web.

Package Exports

    Readme

    Logo

    Magic JavaScript SDK

    <MagicLabs>

    The Magic JavaScript SDK empowers developers to provide frictionless web3 onboarding to their end-users while preserving their security and privacy using non-custodial wallets.

    License · Changelog · Contributing Guide

    📖 Documentation

    • See the developer documentation to learn how you can master the Magic SDK in a matter of minutes.
    • See the @magic-sdk/react-native-bare README for Bare React Native package specific information.
    • See the @magic-sdk/react-native-expo README for Expo React Native package specific information.

    ⚡️ 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-bare # If you're targeting Bare React Native
npm install --save @magic-sdk/react-native-expo # If you're targeting Expo React Native

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

    Alternatively, you can load via CDN 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"
import Web3 from 'web3';

const magic = new Magic('YOUR_API_KEY', { 
  network: "goerli",
});

const web3 = new Web3(magic.rpcProvider);
const accounts = await magic.wallet.connectWithUI();

    📦 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-bare CHANGELOG Bare React Native entry-point for Magic SDK.
    @magic-sdk/react-native-expo CHANGELOG Expo React Native entry-point for Magic SDK.

    Extensions

    Extend Magic JS SDK functionality for your use-case through @magic-ext/* packages.

    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/pnp CHANGELOG A lightweight connector that wraps Magic JS authentication with a beautiful, functional out-of-the-box login form.
    @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/types to the platform-specific entry points.
    @magic-sdk/types CHANGELOG Core typings for Magic SDK packages.

    🚦 Testing

    Run tests for all packages 

    yarn test

    Test an individual package

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

    Test specific files

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