Get Started

A Hello World tutorial to quickly get familiar with Magic. ๐Ÿš€

Overview

Let's get started by building a simple interface to let users log in or log out via an email magic link. We've created a template with necessary html and styles on CodeSandBox.

๐Ÿ‘‰ Go to our Hello World template to continue with the tutorial

๐Ÿ‘‰ Or skip to the completed Hello World template

๐Ÿ‘‰ Or watch a demo video

Tutorial

0. Sign up for Magic (for API keys)

You need to sign up or log in to the Magic Dashboard to get API keys needed for the tutorial.

1. Install Magic SDK

Install the Magic SDK to the Hello World template with a script tag. You can copy and paste the code snippet below 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 the following code. Copy and paste this code snippet below to your editor under the comment.

/* 2. Initialize Magic Instance */
const magic = new Magic("YOUR_TEST_PUBLISHABLE_API_KEY");

Replace the 'YOUR_TEST_PUBLISHABLE_API_KEY' string with your "Test Publishable API Key" from your Magic Dashboard. It looks something like pk_test_*********.

Magic Dashboard

3. Implement Render Function

To complete the setup, let's write the logic on what the Hello World app should display when (1) users are not logged in, and when (2) users are logged in.

Copy and paste this code snippet to your editor under the comment.

/* 3. Implement Render Function */
const render = async () => {
const isLoggedIn = await magic.user.isLoggedIn();
/* Show login form if user is not logged in */
let 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

Now the real fun begins! Check out how you can implement user login with a single line of code, without needing to write any backend code! Copy and paste this code snippet below to your editor under the comment.

/* 4. Implement Login Handler */
const handleLogin = async e => {
e.preventDefault();
const email = new FormData(e.target).get("email");
if (email) {
/* One-liner login ๐Ÿคฏ */
await magic.auth.loginWithMagicLink({ email });
render();
}
};

5. Implement Logout Handler

To wrap it all up, it's super easy to implement user logout as well. Copy and paste this code snippet below to your editor under the comment.

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

6. Done ๐ŸŽ‰

Congratulations, you've completed the walkthrough! You should have a working version of the Hello World app! Don't worry if things are not working for some reason - you can find the completed working version here.


๐Ÿ‘‰ 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.