Magic link authentication in Supabase - Mini Project: Build & Apply

Magic link authentication

📖 Scenario: You are building a simple web app that lets users log in using a magic link sent to their email. This method avoids passwords and makes login easy and secure.

🎯 Goal: Create a Supabase project setup that enables magic link authentication for users. You will configure the initial user data, set up the authentication config, implement the login function using magic links, and finalize the authentication flow.

📋 What You'll Learn

Create a dictionary with a user email

Add a configuration variable for the redirect URL after login

Write a function to send a magic link using Supabase auth

Complete the authentication setup with the redirect URL

💡 Why This Matters

🌍 Real World

Magic link authentication is used in apps to simplify login without passwords, improving user experience and security.

💼 Career

Understanding magic link authentication is valuable for cloud developers working with modern authentication flows and user management.

1

Create initial user data

Create a dictionary called user_data with a single key email and value "[e-mail]".

Supabase

# Create a dictionary called user_data with email '[e-mail]'
# Your code here

Need a hint?

Use curly braces to create a dictionary and set the key 'email' to the exact string '[e-mail]'.

2

Add redirect URL configuration

Add a variable called redirect_url and set it to "https://yourapp.com/welcome".

Supabase

user_data = {"email": "[e-mail]"}
# Add a variable redirect_url with the value 'https://yourapp.com/welcome'
# Your code here

Need a hint?

Assign the exact URL string to the variable named redirect_url.

3

Implement magic link login function

Write a function called send_magic_link that takes email as a parameter and calls supabase.auth.sign_in_with_otp(email=email, options={"email_redirect_to": redirect_url}).

Supabase

user_data = {"email": "[e-mail]"}
redirect_url = "https://yourapp.com/welcome"
# Define send_magic_link(email) function to call supabase.auth.sign_in_with_otp(email=email, options={'email_redirect_to': redirect_url})
# Your code here

Need a hint?

Define a function with the exact name and parameter. Use the Supabase method sign_in_with_otp passing email as a named argument and options dict as the second.

4

Complete authentication setup

Call the function send_magic_link with the email from user_data to trigger sending the magic link.

Supabase

user_data = {"email": "[e-mail]"}
redirect_url = "https://yourapp.com/welcome"

def send_magic_link(email):
    return supabase.auth.sign_in_with_otp(email=email, options={"email_redirect_to": redirect_url})

# Call send_magic_link with user_data email
# Your code here

Need a hint?

Use the exact function name and access the email from the user_data dictionary using the key 'email'.