Magic link authentication in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to send a magic link to the user's email.

Supabase

const { data, error } = await supabase.auth.signInWithOtp({ email: [1] });

Drag options to blanks, or click blank then click option'

AuserEmail

Buser_password

CauthToken

DsessionId

Attempts:

3 left

💡 Hint

Common Mistakes

Using password instead of email.

Using session or token variables.

You need to provide the user's email to send the magic link.

2fill in blank

medium

Complete the code to check if there was an error sending the magic link.

Supabase

if ([1]) { console.error('Error sending magic link:', error.message); }

Drag options to blanks, or click blank then click option'

Aerror

Bdata

Cresponse

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Checking the data object instead of error.

Using undefined variables.

The error object indicates if sending the magic link failed.

3fill in blank

hard

Fix the error in the code to correctly handle the magic link sign-in.

Supabase

const { data, error } = await supabase.auth.[1]({ email });

Drag options to blanks, or click blank then click option'

AsignInWithPassword

BsignInWithOtp

CsignIn

DsignUp

Attempts:

3 left

💡 Hint

Common Mistakes

Using signIn or signUp which require passwords.

Using signInWithPassword which is not magic link.

Use signInWithOtp to send a magic link for passwordless login.

4fill in blank

hard

Fill both blanks to configure the magic link sign-in to redirect after login.

Supabase

const { data, error } = await supabase.auth.signInWithOtp({
  email,
  options: {
    [1]: [2]
  }
});

Drag options to blanks, or click blank then click option'

Aoptions

BemailRedirectTo

CcallbackUrl

Dredirect_url

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect option names like redirect_url.

Confusing option name with URL value.

The emailRedirectTo option sets the URL to redirect after magic link sign-in. The value is the callback URL.

5fill in blank

hard

Fill all three blanks to handle the magic link sign-in response and check for errors.

Supabase

const { [1], [2] } = await supabase.auth.signInWithOtp({ email });
if ([3]) {
  console.error('Failed to send magic link:', error.message);
}

Drag options to blanks, or click blank then click option'

Adata

Berror

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names in destructuring.

Checking data instead of error for errors.

The response destructures data and error. The error variable is checked to detect failure.

Practice

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: '[e-mail]' })

B. supabase.auth.signInWithOtp({ email: '[e-mail]' })

C. supabase.auth.signInWithMagicLink('[e-mail]')

D. supabase.auth.loginWithOtp('[e-mail]')

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: '[e-mail]' }) uses signInWithOtp with an object { email: '...' }, which is correct syntax.

3. Final Answer:

   supabase.auth.signInWithOtp({ email: '[e-mail]' }) -> Option B

4. Quick Check:

   Method name and parameter object = supabase.auth.signInWithOtp({ email: '[e-mail]' }) [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: '[e-mail]' });
console.log(data);
console.log(error);

medium

A. Send a magic link to '[e-mail]' 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 '[e-mail]' 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 '[e-mail]' 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('[e-mail]');

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