Magic for Web

Magic 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:


The Magic SDK for client-side JavaScript is your entry-point to secure, passwordless authentication for your web-based app. This guide will cover some important topics for getting started with client-side APIs and to make the most of Magic's features.

  • Install the Magic Client SDK to get started
  • View the API documentation below to learn the methods you'll be using
  • Go to Guides for an introduction to common patterns and use-cases

Magic can support both server-based or serverless web applications. It is up to the developers to implement the Admin SDK to validate the DID Token.

#Create a New Magic App

  1. To create a new Magic project from scratch, run: npx make-magic
  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.

#Add to an existing website


01npm install --save magic-sdk


01yarn add magic-sdk


01<script src=""></script>

#Create an SDK Instance

ES Modules/TypeScript

01import { Magic } from 'magic-sdk';
03const m = new Magic('API_KEY'); // ✨


01const { Magic } = require('magic-sdk');
03const m = new Magic('API_KEY'); // ✨


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');
03module.exports = {
04  //...
05  resolve: {
06    alias: {
07      'magic-sdk': path.resolve(__dirname, 'node_modules/magic-sdk/dist/cjs/index.js'),
08    },
09  },

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?