Magic SMS for Web

Magic SMS for Web

New to Magic?

Create a fully-functional Magic auth demo in minutes.

Build a demo

Reference for the Magic SDK for web / client-side JavaScript: https://github.com/magiclabs/magic-js

#Create a New Magic App

#Locally (Recommended)

  1. To create a new Magic project from scratch, run: npx make-magic --template hello-world-sms
  2. You'll be guided through some presets:
  3. At the end, you'll have a working Magic app!

Learn more about make-magic, our CLI tool that vastly simplifies project creation.

#On the web

Checkout our Build a Demo tutorial for a step-by-step guide to get up and running with your first SMS authentication.

#Add to an existing website

#NPM

npm install --save magic-sdk

#Yarn

yarn add magic-sdk

#CDN

<script src="https://auth.magic.link/sdk"></script>

#Create an SDK Instance

#ES Modules/TypeScript

import { Magic } from 'magic-sdk';

const magicClient = new Magic('API_KEY'); // ✨

#CommonJS

const { Magic } = require('magic-sdk');

const magicClient = new Magic('API_KEY'); // ✨

#Make a Request

const DID = await magicClient.auth.loginWithSMS({
  phoneNumber: '+14151231234',
});
// Consume decentralized identity (DID)

#Caveats

In case you encounter Critical dependency: require function is used in a way in which dependencies cannot be statically extracted error during bundling, please add magic-sdk as an alias in your bundler config files.

For example for webpack, in webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      'magic-sdk': path.resolve(__dirname, 'node_modules/magic-sdk/dist/cjs/index.js'),
    },
  },
};

Server-side SDKs?

Integrate Magic with your existing backend.

Did you find what you were looking for?

Did you find what you were looking for?