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

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

This code requests Supabase to send a magic link to the user's email for authentication.

Process Table

Step	Action	Input/Condition	Result	Next Step
1	User inputs email	email = '[e-mail]'	Email captured	Request magic link
2	Request magic link	Call signInWithOtp(email)	Supabase sends email with link	User clicks link
3	User clicks link	Link contains token	Token sent to Supabase	Verify token
4	Verify token	Token valid?	Yes - user authenticated	Grant access
5	Grant access	User authenticated	User session created	User accesses app

💡 User authenticated after clicking valid magic link and token verification

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
email	undefined	'[e-mail]'	'[e-mail]'	'[e-mail]'	'[e-mail]'	'[e-mail]'
magicLinkSent	false	false	true	true	true	true
token	undefined	undefined	undefined	valid token	valid token	valid token
userAuthenticated	false	false	false	false	true	true
userSession	undefined	undefined	undefined	undefined	created	created

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

Look at the execution table, at which step is the magic link email sent?

A Step 4

B Step 3

C Step 2

D Step 1

💡 Hint

Check the 'Result' column for the action 'Supabase sends email with link'.

According to the variable tracker, when does 'userAuthenticated' become true?

A After Step 4

B After Step 2

C After Step 3

D After 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?

A It becomes 'created'

B It remains 'undefined'

C It becomes 'expired'

D It 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.