npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

magic-sdk

v28.21.1

Published

Passwordless authentication for the web.

Downloads

113,486

Readme

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.

📖 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