How to implement Login with Redirects in the SDK

Magic Staff ยท November 22, 2022
Download this example and get started in seconds:
npx make-magic --template hello-world-magic-link
How to implement Login with Redirects in the SDK

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

๐Ÿ‘‰ What you'll build: Hello World demo

#Get Started

#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:

HTML
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:

Javascript
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
  3. Users have been redirected to your app's "callback" route

Copy and paste this code:

Javascript
01/* 3. Implement Render Function */
02const render = async () => {
03  let html = '';
04
05  /*
06    For this tutorial, our callback route is simply "/callback"
07  */
08  if (window.location.pathname === '/callback') {
09    try {
10      /* Complete the "authentication callback" */
11      await magic.auth.loginWithCredential();
12
13      /* Get user metadata including email */
14      const userMetadata = await magic.user.getMetadata();
15
16      html = `
17        <h1>Current user: ${userMetadata.email}</h1>
18        <button onclick="handleLogout()">Logout</button>
19      `;
20    } catch {
21      /* In the event of an error, we'll go back to the login page */
22      window.location.href = window.location.origin;
23    }
24  } else {
25    const isLoggedIn = await magic.user.isLoggedIn();
26
27    /* Show login form if user is not logged in */
28    html = `
29      <h1>Please sign up or login</h1>
30      <form onsubmit="handleLogin(event)">
31        <input type="email" name="email" required="required" placeholder="Enter your email" />
32        <button type="submit">Send</button>
33      </form>
34    `;
35
36    if (isLoggedIn) {
37      /* Get user metadata including email */
38      const userMetadata = await magic.user.getMetadata();
39      html = `
40        <h1>Current user: ${userMetadata.email}</h1>
41        <button onclick="handleLogout()">Logout</button>
42      `;
43    }
44  }
45
46  document.getElementById('app').innerHTML = html;
47};

#4. Implement Login Handler

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

Javascript
01/* 4. Implement Login Handler */
02const handleLogin = async e => {
03  e.preventDefault();
04  const email = new FormData(e.target).get('email');
05  const redirectURI = `${window.location.origin}/callback`; // ๐Ÿ‘ˆ This will be our callback URI
06  if (email) {
07    /* One-liner login ๐Ÿคฏ */
08    await magic.auth.loginWithMagicLink({ email, redirectURI }); // ๐Ÿ‘ˆ Notice the additional parameter!
09    render();
10  }
11};

#5. Implement Logout Handler

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

Javascript
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.

#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.

Let's make some magic!