Guides
Guide

Installing and Getting Started with the Magic SDK

2020-08-10
Download this example and get started in seconds:
npx make-magic --template hello-world

A Hello World tutorial to quickly get familiar with Magic. 🚀

👉 What you'll build: Hello World demo

Get Started

0. Get the template code

To follow along with the tutorial, use our Hello World template in CodeSandBox.

1. Install Magic SDK

Install the Magic SDK to the Hello World template with a script tag. You can copy and paste the below code to the CodeSandBox editor after the comment:

<!-- 1. Install Magic SDK -->
<script src="https://auth.magic.link/sdk"></script>

Or install Magic SDK with Yarn or NPM.

2. Initialize Magic Instance

Initialize a Magic instance with a **Publishable API Key** with this code:

/* 2. Initialize Magic Instance */
const magic = new Magic('YOUR_LIVE_PUBLISHABLE_API_KEY');

You need to sign up to [Magic Dashboard](https://dashboard.magic.link/signup) to get your own API keys.

Replace the 'YOUR_LIVE_PUBLISHABLE_API_KEY' string with your "Publishable API Key" from the Magic Dashboard:

3. Implement Render Function

Let's add the logic on what should display when:

  1. Users are not logged in,
  2. Users are logged in, and
  3. Users have been redirected to your app's "callback" route

Copy and paste this code:

/* 3. Implement Render Function */
const render = async () => {
  let html = '';

  /*
    For this tutorial, our callback route is simply "/callback"
  */
  if (window.location.pathname === '/callback') {
    try {
      /* Complete the "authentication callback" */
      await magic.auth.loginWithCredential();

      /* Get user metadata including email */
      const userMetadata = await magic.user.getMetadata();

      html = `
        <h1>Current user: ${userMetadata.email}</h1>
        <button onclick="handleLogout()">Logout</button>
      `;
    } catch {
      /* In the event of an error, we'll go back to the login page */
      window.location.href = window.location.origin;
    }
  } else {
    const isLoggedIn = await magic.user.isLoggedIn();

    /* Show login form if user is not logged in */
    html = `
      <h1>Please sign up or login</h1>
      <form onsubmit="handleLogin(event)">
        <input type="email" name="email" required="required" placeholder="Enter your email" />
        <button type="submit">Send</button>
      </form>
    `;

    if (isLoggedIn) {
      /* Get user metadata including email */
      const userMetadata = await magic.user.getMetadata();
      html = `
        <h1>Current user: ${userMetadata.email}</h1>
        <button onclick="handleLogout()">Logout</button>
      `;
    }
  }

  document.getElementById('app').innerHTML = html;
};

4. Implement Login Handler

You can now implement user login without needing to write any backend code! Copy and paste this code:

/* 4. Implement Login Handler */
const handleLogin = async e => {
  e.preventDefault();
  const email = new FormData(e.target).get('email');
  const redirectURI = `${window.location.origin}/callback`; // 👈 This will be our callback URI
  if (email) {
    /* One-liner login 🤯 */
    await magic.auth.loginWithMagicLink({ email, redirectURI }); // 👈 Notice the additional parameter!
    render();
  }
};

5. Implement Logout Handler

To wrap it up, let's implement user logout as well. Copy and paste this code:

/* 5. Implement Logout Handler */
const handleLogout = async () => {
  await magic.user.logout();
  render();
};

6. Done

You've completed the tutorial! Here's a working demo of the tutorial we just went over.

What's next?

Use Magic with existing tools

Customize your Magic flow

You can customize the login experience using your own UI instead of Magic's default one and/or customize the magic link email with your brand. Learn how to customize.

Let's make some magic!