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://cdn.jsdelivr.net/npm/magic-sdk/dist/magic.js"></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 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

• Node.js – Now that you have an understanding of how Magic works on the client-side, we strongly recommend you to take a look at an end-to-end, full-stack example to learn about how to connect it to a Node.js backend server and see the full potential of Magic!

• Firebase – Magic provides much flexibility and composability to be combined with many other powerful platforms such as Firebase. Learn how to plug Magic into the entire Firebase suite of tools!

• Next.js (Vercel) – Learn how to use the popular Next.js framework to build a React app and deploy it with Vercel.

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.