Magic for Web
Magic 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
#Overview
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
- To create a new Magic project from scratch, run:
npx make-magic
- 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.
#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 m = new Magic('API_KEY'); // ✨
CommonJS
01const { Magic } = require('magic-sdk');
02
03const m = new Magic('API_KEY'); // ✨
#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};