Build an SMS demo

Build an SMS demo

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

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

👉 What you'll build: SMS Hello World demo

#Get Started

#0. Get the template code

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

#1. Install Magic SDK

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

01<!-- 1. Install Magic SDK -->
02<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:

01/* 2. Initialize Magic Instance */
02const 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

Copy and paste this code:

JSX
01/* 3. Implement Render Function */
02const render = async () => {
03  const isLoggedIn = await magic.user.isLoggedIn();
04
05  /* Show login form if user is not logged in */
06  let html = `
07    <h1>Please sign up or login</h1>
08    <form onsubmit="handleLogin(event)">
09      <input type="phonenumber" name="phone" required="required" placeholder="Enter your phonenumber" />
10      <button type="submit">Send</button>
11    </form>
12  `;
13
14  if (isLoggedIn) {
15    /* Get user metadata including phone */
16    const userMetadata = await magic.user.getMetadata();
17    html = `
18      <h1>Current user: ${userMetadata.phoneNumber}</h1>
19      <button onclick="handleLogout()">Logout</button>
20    `;
21  }
22
23  document.getElementById('app').innerHTML = html;
24};

#4. Implement Login Handler

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

JSX
01const handleLogin = async e => {
02  e.preventDefault();
03  const phoneNumber = new FormData(e.target).get('phone');
04  if (phoneNumber) {
05    /* One-liner login 🤯 */
06    await magic.auth.loginWithSMS({ phoneNumber });
07    render();
08  }
09};

#5. Implement Logout Handler

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

JSX
01/* 5. Implement Logout Handler */
02const handleLogout = async () => {
03  await magic.user.logout();
04  render();
05};

#6. Done

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

Did you find what you were looking for?