Magic SMS for Web
Magic SMS for Web
New to Magic?
Create a fully-functional Magic auth demo in minutes.
Reference for the Magic SDK for web / client-side JavaScript: https://github.com/magiclabs/magic-js
#Create a New Magic App
#Locally (Recommended)
- To create a new Magic project from scratch, run:
npx make-magic --template hello-world-sms
- You'll be guided through some presets:
- 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
01npm install --save magic-sdk
#Yarn
01yarn add magic-sdk
#CDN
01<script src="https://auth.magic.link/sdk"></script>
#Create an SDK Instance
#ES Modules/TypeScript
01import { Magic } from 'magic-sdk';
02
03const magicClient = new Magic('API_KEY'); // ✨
#CommonJS
01const { Magic } = require('magic-sdk');
02
03const magicClient = new Magic('API_KEY'); // ✨
#Make a Request
01const DID = await magicClient.auth.loginWithSMS({
02 phoneNumber: '+14151231234',
03});
04// 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
01const path = require('path');
02
03module.exports = {
04 //...
05 resolve: {
06 alias: {
07 'magic-sdk': path.resolve(__dirname, 'node_modules/magic-sdk/dist/cjs/index.js'),
08 },
09 },
10};