A Hello World tutorial to quickly get familiar with Magic. 🚀
👉 What you'll build: Hello World demo
To follow along with the tutorial, use our Hello World template in CodeSandBox.
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.
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:
Let's add the logic on what should display when:
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;
};
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();
}
};
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();
};
You've completed the tutorial! Here's a working demo of the tutorial we just went over.
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.
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.
© 2020 Magic Labs, Inc.
Made with 💜 by Magic Labs
3739 Balboa St. #1088
San Francisco, CA 94121