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.