Bird
Raised Fist0
Supabasecloud~10 mins

Magic link authentication in Supabase - Step-by-Step Execution

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallTime
Process Flow - Magic link authentication
User enters email
↓
Request magic link
↓
Supabase sends email with link
↓
User clicks link in email
↓
Supabase verifies link
↓
User authenticated
↓
Access granted to app
User enters email, Supabase sends a magic link by email, user clicks it, Supabase verifies and authenticates the user.
Execution Sample
Supabase
const { data, error } = await supabase.auth.signInWithOtp({ email: 'user@example.com' });
This code requests Supabase to send a magic link to the user's email for authentication.
Process Table
StepActionInput/ConditionResultNext Step
1User inputs emailemail = 'user@example.com'Email capturedRequest magic link
2Request magic linkCall signInWithOtp(email)Supabase sends email with linkUser clicks link
3User clicks linkLink contains tokenToken sent to SupabaseVerify token
4Verify tokenToken valid?Yes - user authenticatedGrant access
5Grant accessUser authenticatedUser session createdUser accesses app
💡 User authenticated after clicking valid magic link and token verification
Status Tracker
VariableStartAfter Step 1After Step 2After Step 3After Step 4Final
emailundefined'user@example.com''user@example.com''user@example.com''user@example.com''user@example.com'
magicLinkSentfalsefalsetruetruetruetrue
tokenundefinedundefinedundefinedvalid tokenvalid tokenvalid token
userAuthenticatedfalsefalsefalsefalsetruetrue
userSessionundefinedundefinedundefinedundefinedcreatedcreated
Key Moments - 3 Insights
Why does the user not authenticate immediately after requesting the magic link?
Because authentication happens only after the user clicks the link and Supabase verifies the token (see execution_table step 4).
What happens if the token in the magic link is invalid or expired?
Supabase will not authenticate the user, so no session is created and access is denied (implied by step 4 verification failure).
Is the user's email stored or used before they click the magic link?
Yes, the email is captured at step 1 and used to send the magic link at step 2, but authentication depends on link click.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution table, at which step is the magic link email sent?
AStep 4
BStep 3
CStep 2
DStep 1
💡 Hint
Check the 'Result' column for the action 'Supabase sends email with link'.
According to the variable tracker, when does 'userAuthenticated' become true?
AAfter Step 4
BAfter Step 2
CAfter Step 3
DAfter Step 1
💡 Hint
Look at the 'userAuthenticated' row and see when it changes from false to true.
If the user never clicks the magic link, what happens to 'userSession' according to the tracker?
AIt becomes 'created'
BIt remains 'undefined'
CIt becomes 'expired'
DIt becomes 'pending'
💡 Hint
Refer to the 'userSession' variable in the tracker and note when it changes.
Concept Snapshot
Magic link authentication flow:
1. User enters email.
2. Supabase sends magic link email.
3. User clicks link with token.
4. Supabase verifies token.
5. User authenticated and session created.
No password needed; secure and user-friendly.
Full Transcript
Magic link authentication lets users log in by entering their email. Supabase sends a special link to that email. When the user clicks the link, Supabase checks if the link is valid. If valid, the user is logged in and gets access. This process avoids passwords and is simple for users.

Practice

(1/5)
1. What is the main purpose of magic link authentication in Supabase?
easy
A. Authenticate users using biometric data like fingerprints
B. Require users to enter a password and a code sent via SMS
C. Use social media accounts for login
D. Allow users to log in by clicking a link sent to their email without using a password

Solution

  1. Step 1: Understand magic link authentication

    Magic link authentication lets users log in by clicking a special link sent to their email, avoiding passwords.

  2. Step 2: Compare options with this definition

    Only Allow users to log in by clicking a link sent to their email without using a password describes login via email link without passwords, matching the magic link concept.

  3. Final Answer:

    Allow users to log in by clicking a link sent to their email without using a password -> Option D

  4. Quick Check:

    Magic link = login via email link without password [OK]
Hint: Magic link means login by email link, no password needed [OK]
Common Mistakes:
  • Confusing magic link with password or biometric login
  • Thinking magic link requires SMS codes
  • Assuming social login is magic link
2. Which is the correct way to call Supabase's magic link sign-in method in JavaScript?
easy
A. supabase.auth.signInWithPassword({ email: 'user@example.com' })
B. supabase.auth.signInWithOtp({ email: 'user@example.com' })
C. supabase.auth.signInWithMagicLink('user@example.com')
D. supabase.auth.loginWithOtp('user@example.com')

Solution

  1. Step 1: Recall Supabase magic link method name

    The correct method is signInWithOtp with an object containing the email.

  2. Step 2: Match method and parameter format

    supabase.auth.signInWithOtp({ email: 'user@example.com' }) uses signInWithOtp with an object { email: '...' }, which is correct syntax.

  3. Final Answer:

    supabase.auth.signInWithOtp({ email: 'user@example.com' }) -> Option B

  4. Quick Check:

    Method name and parameter object = supabase.auth.signInWithOtp({ email: 'user@example.com' }) [OK]
Hint: Use signInWithOtp with email in an object [OK]
Common Mistakes:
  • Using wrong method names like signInWithPassword
  • Passing email as a string instead of an object
  • Confusing method names with social login
3. What will the following code do?
const { data, error } = await supabase.auth.signInWithOtp({ email: 'test@example.com' });
console.log(data);
console.log(error);
medium
A. Send a magic link to 'test@example.com' and log data with confirmation info, error null
B. Return error because email format is invalid
C. Throw a syntax error because signInWithOtp requires a password
D. Send a magic link to 'test@example.com' and log data with user info, error null

Solution

  1. Step 1: Understand signInWithOtp behavior

    This method sends a magic link to the email and returns data about the request, not user info immediately.

  2. Step 2: Analyze console output

    Data contains confirmation info about sending the link; error is null if successful. No syntax error or invalid email here.

  3. Final Answer:

    Send a magic link to 'test@example.com' and log data with confirmation info, error null -> Option A

  4. Quick Check:

    signInWithOtp sends link, returns confirmation data [OK]
Hint: signInWithOtp returns confirmation data, not user info [OK]
Common Mistakes:
  • Expecting immediate user info in data
  • Thinking password is required
  • Assuming invalid email error for valid format
4. You wrote this code but users report they never receive magic links:
await supabase.auth.signInWithOtp('user@example.com');

What is the problem?
medium
A. The method name is incorrect, should be signInWithMagicLink
B. Magic links require a password parameter
C. The email should be passed inside an object, not as a string
D. You must call a separate sendMagicLink function after signInWithOtp

Solution

  1. Step 1: Check method parameter format

    signInWithOtp expects an object with an email property, not a plain string.

  2. Step 2: Identify why magic link is not sent

    Passing a string causes the method to fail silently or not send the email, so users get no link.

  3. Final Answer:

    The email should be passed inside an object, not as a string -> Option C

  4. Quick Check:

    Email must be in object for signInWithOtp [OK]
Hint: Pass email as { email: '...' }, not just a string [OK]
Common Mistakes:
  • Passing email as string instead of object
  • Thinking password is needed for magic link
  • Using wrong method names
5. You want to implement magic link login but only allow users with emails from 'example.com'. Which approach is best?
hard
A. Before calling signInWithOtp, check if email ends with '@example.com' and reject others
B. Call signInWithOtp for all emails, then filter users after login
C. Use signInWithOtp and set a password for domain restriction
D. Configure Supabase to block all emails except 'example.com' automatically

Solution

  1. Step 1: Understand domain restriction needs

    To restrict login to a domain, validate the email before sending magic link.

  2. Step 2: Choose best practice

    Checking email domain in your app before calling signInWithOtp prevents sending links to unauthorized users.

  3. Final Answer:

    Before calling signInWithOtp, check if email ends with '@example.com' and reject others -> Option A

  4. Quick Check:

    Pre-check email domain before magic link send [OK]
Hint: Validate email domain before sending magic link [OK]
Common Mistakes:
  • Sending magic links to all emails then filtering
  • Thinking password is needed for domain restriction
  • Assuming Supabase blocks domains automatically
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard