How to implement Login with Redirects in the SDK
npx make-magic --template hello-world-magic-link
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:
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:
- Users are not logged in,
- Users are logged in, and
- Users have been redirected to your app's "callback" route
Copy and paste this code:
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:
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:
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
- 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.
