0
0
Supabasecloud~10 mins

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

Choose your learning style9 modes available
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.