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 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, all we need to worry about is simply the response we get after a successful OTP login flow

     */

    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');

     if (email) {

        /* One-liner login with email OTP 🤯 */

        await magic.auth.loginWithEmailOTP({ email });

        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.