Magic Link Login

Capture a single-use magic link from the inbox and navigate it; replays return 410

What you will learn

Capture an authentication credential from an out-of-band side channel (mock inbox), not the page UI
Drive passwordless login by navigating a captured one-time URL and verifying the post-login state
Handle single-use semantics: recognize 410 on replay and request a fresh token per run

Magic Link Login — Email Side Channel

There is no password field. Authentication happens by opening a one-time link delivered out-of-band — your test must capture it from the inbox and navigate to it

Request a login link for an email, read the captured link from the inbox side channel (a mock mailbox at /api/lab/inbox), then visit it. The link is single-use: replaying the same token returns 410 Gone.

Real-world parallel: passwordless / "magic link" auth where the credential never lives in the UI — the automation lesson is reading an external channel and doing a fresh navigation on the captured URL.

Request a Magic Link

Send a login link, then peek the inbox to capture it

Testing Tips

Automation hints

✓ Fill #magic-email and click #magic-request, then assert #magic-status mentions the inbox — the UI alone never reveals the token
✓ Read the link from the side channel: GET /api/lab/inbox?to=<email>&kind=magic returns { token, link }; the same link surfaces in #magic-link after #magic-peek
✓ Do a fresh navigation on the captured URL — the component reads ?token= on mount and reveals #magic-success on 200
✓ Single-use: replaying a consumed token returns 410 and shows #magic-error — capture a new token per run, never reuse one
✓ Invalid or expired tokens return 401 → also #magic-error; assert on #magic-success[data-state=success] for a genuine pass

Related Challenges

Magic Link Login — Email Side Channel

There is no password field. Authentication happens by opening a one-time link delivered out-of-band — your test must capture it from the inbox and navigate to it

Testing Tips

Automation hints

✓ Fill #magic-email and click #magic-request, then assert #magic-status mentions the inbox — the UI alone never reveals the token
✓ Read the link from the side channel: GET /api/lab/inbox?to=<email>&kind=magic returns { token, link }; the same link surfaces in #magic-link after #magic-peek
✓ Do a fresh navigation on the captured URL — the component reads ?token= on mount and reveals #magic-success on 200
✓ Single-use: replaying a consumed token returns 410 and shows #magic-error — capture a new token per run, never reuse one
✓ Invalid or expired tokens return 401 → also #magic-error; assert on #magic-success[data-state=success] for a genuine pass

Magic Link Login

What you will learn

Magic Link Login — Email Side Channel

Request a Magic Link

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop

Magic Link Login

What you will learn

Magic Link Login — Email Side Channel

Request a Magic Link

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop