Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/magiclabs/magic-js
Magic browser/React Native JavaScript SDK is your entry-point to integrating passwordless authentication inside your application.
https://github.com/magiclabs/magic-js
authentication identity jamstack javascript passwordless
Last synced: 6 days ago
JSON representation
Magic browser/React Native JavaScript SDK is your entry-point to integrating passwordless authentication inside your application.
- Host: GitHub
- URL: https://github.com/magiclabs/magic-js
- Owner: magiclabs
- License: apache-2.0
- Created: 2020-02-12T08:03:32.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T04:10:59.000Z (2 months ago)
- Last Synced: 2024-10-29T15:46:54.774Z (2 months ago)
- Topics: authentication, identity, jamstack, javascript, passwordless
- Language: TypeScript
- Homepage: https://magic.link/docs/api-reference/client-side-sdks/web
- Size: 9.96 MB
- Stars: 463
- Watchers: 24
- Forks: 86
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-list - magic-js - point to integrating passwordless authentication inside your application. | magiclabs | 210 | (TypeScript)
README
# Magic JavaScript SDK
[](https://circleci.com/gh/magiclabs/magic-js)
> 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](https://docs.magic.link) to learn how you can master the Magic SDK in a matter of minutes.
- See the `@magic-sdk/react-native-bare` [README](https://github.com/magiclabs/magic-js/tree/master/packages/%40magic-sdk/react-native-bare#readme) for Bare React Native package specific information.
- See the `@magic-sdk/react-native-expo` [README](https://github.com/magiclabs/magic-js/tree/master/packages/%40magic-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:
```bash
# 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 ``:
```html
```
### Usage
Sign up or log in to the [developer dashboard](https://dashboard.magic.link) 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.
```ts
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`](https://www.npmjs.com/package/magic-sdk) | [CHANGELOG](./packages/magic-sdk/CHANGELOG.md) | Web/browser entry-point for Magic SDK. |
| [`@magic-sdk/react-native-bare`](https://www.npmjs.com/package/@magic-sdk/react-native-bare) | [CHANGELOG](./packages/@magic-sdk/react-native-bare/CHANGELOG.md) | Bare React Native entry-point for Magic SDK. |
| [`@magic-sdk/react-native-expo`](https://www.npmjs.com/package/@magic-sdk/react-native-expo) | [CHANGELOG](./packages/@magic-sdk/react-native-expo/CHANGELOG.md) | Expo React Native entry-point for Magic SDK. |
## Extensions
Extend Magic JS SDK functionality for your use-case through [`@magic-ext/*` packages](./packages/@magic-ext).
### Internals
These are packages Magic JS SDK uses internally to work seamlessly across platforms.
| Package Name | Changelog | Description |
| -------------------------------------------------------------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types) | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md) | Core typings shared between JavaScript entry-points of Magic SDK. |
| [`@magic-sdk/pnp`](https://www.npmjs.com/package/@magic-sdk/pnp) | [CHANGELOG](./packages/@magic-sdk/pnp/CHANGELOG.md) | A lightweight connector that wraps Magic JS authentication with a beautiful, functional out-of-the-box login form. |
| [`@magic-sdk/provider`](https://www.npmjs.com/package/@magic-sdk/provider) | [CHANGELOG](./packages/@magic-sdk/provider/CHANGELOG.md) | Core business logic shared between JavaScript entry-points of Magic SDK. |
| [`@magic-sdk/commons`](https://www.npmjs.com/package/@magic-sdk/commons) | [CHANGELOG](./packages/@magic-sdk/commons/CHANGELOG.md) | Exposes a listing of common public APIs from `@magic-sdk/provider` and `@magic-sdk/types` to the platform-specific entry points. |
| [`@magic-sdk/types`](https://www.npmjs.com/package/@magic-sdk/types) | [CHANGELOG](./packages/@magic-sdk/types/CHANGELOG.md) | Core typings for Magic SDK packages. |
## 🚦 Testing
Run tests for all packages
```bash
yarn test
```
Test an individual package
```bash
PKG=magic-sdk yarn test
PKG=@magic-sdk/react-native-bare yarn test
PKG=@magic-sdk/react-native-expo yarn test
```
Test specific files
```bash
yarn test /test/**/constructor.spec.ts
```