feat: Implement email OTP authentication #2414
Conversation
ConsoleProject ID: Sites (2)
Note Appwrite has a Discord community with over 16 000 members. |
WalkthroughAdds a passwordless email OTP sign-in flow and a resend cooldown component. The login page now toggles between password login and sending an email sign-in code; password input is not required and email autofocus removed. A new email-otp page verifies 6-digit codes, creates console sessions, supports resending tokens, tracks analytics, shows notifications, and redirects based on coupon, campaign, or explicit redirect. A load function fetches coupon/campaign data from URL params. The send-verification modal was refactored to use a new ResendCooldown component with localStorage persistence. Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/routes/(public)/(guest)/login/+page.svelte(2 hunks)src/routes/(public)/(guest)/login/email-otp/+page.svelte(1 hunks)src/routes/(public)/(guest)/login/email-otp/+page.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/routes/(public)/(guest)/login/email-otp/+page.ts (1)
src/lib/stores/sdk.ts (1)
sdk(147-170)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: e2e
- GitHub Check: build
| `${base}/login/email-otp?email=${encodeURIComponent(mail)}&userId=${sessionToken.userId}` | ||
| ); |
There was a problem hiding this comment.
Preserve existing query params when switching to the OTP flow
Right now we build the OTP URL with only email and userId, which strips any pre-existing query params (code, campaign, redirect, etc.). The new loader in email-otp/+page.ts expects those params to rehydrate data, so dropping them prevents us from ever hitting the coupon/campaign apply-credit paths and also loses any redirect target after a successful OTP login. Please carry forward the current search params before adding email/userId.
- await goto(
- `${base}/login/email-otp?email=${encodeURIComponent(mail)}&userId=${sessionToken.userId}`
- );
+ const params = new URLSearchParams(window.location.search);
+ params.set('email', mail);
+ params.set('userId', sessionToken.userId);
+
+ await goto(`${base}/login/email-otp?${params.toString()}`);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| `${base}/login/email-otp?email=${encodeURIComponent(mail)}&userId=${sessionToken.userId}` | |
| ); | |
| const params = new URLSearchParams(window.location.search); | |
| params.set('email', mail); | |
| params.set('userId', sessionToken.userId); | |
| await goto(`${base}/login/email-otp?${params.toString()}`); |
🤖 Prompt for AI Agents
In src/routes/(public)/(guest)/login/+page.svelte around lines 34 to 35, the OTP
redirect builds a URL with only email and userId which drops any existing query
params (code, campaign, redirect, etc.); update the URL construction to preserve
current search params by copying the existing location.search (or current
URLSearchParams) into a new URLSearchParams instance, set/overwrite the email
and userId keys, and then append that full query string to
`${base}/login/email-otp` so all original params are carried forward along with
email and userId.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/lib/components/account/sendVerificationEmailModal.svelte (1)
12-57: Drop the no-oponDestroy.We still import
onDestroybut only call an empty handler, so both lines can go. Keeps the component leaner.-import { onDestroy } from 'svelte'; ... -onDestroy(() => {});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/lib/components/account/sendVerificationEmailModal.svelte(3 hunks)src/lib/components/resendCooldown.svelte(1 hunks)src/routes/(public)/(guest)/login/email-otp/+page.svelte(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build
- GitHub Check: e2e
| onMount(restore); | ||
| onDestroy(() => clearTick()); | ||
| </script> | ||
|
|
||
| {#if remaining > 0} | ||
| Try again in {remaining}s | ||
| {:else} | ||
| <Link.Button on:click={handleResend} {disabled}>Resend code</Link.Button> | ||
| {/if} |
There was a problem hiding this comment.
Cooldown never starts after initial send.
When the component mounts with no existing timer state, remaining stays at 0, so users can immediately resend and bypass the intended throttle. This regresses both the modal and OTP flows. Kick off the timer on mount when no stored deadline exists.
[suggested fix]
- onMount(restore);
+ onMount(() => {
+ restore();
+ if (remaining === 0) {
+ start();
+ }
+ });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onMount(restore); | |
| onDestroy(() => clearTick()); | |
| </script> | |
| {#if remaining > 0} | |
| Try again in {remaining}s | |
| {:else} | |
| <Link.Button on:click={handleResend} {disabled}>Resend code</Link.Button> | |
| {/if} | |
| onMount(() => { | |
| restore(); | |
| if (remaining === 0) { | |
| start(); | |
| } | |
| }); | |
| onDestroy(() => clearTick()); | |
| </script> | |
| {#if remaining > 0} | |
| Try again in {remaining}s | |
| {:else} | |
| <Link.Button on:click={handleResend} {disabled}>Resend code</Link.Button> | |
| {/if} |
🤖 Prompt for AI Agents
In src/lib/components/resendCooldown.svelte around lines 75 to 83, the component
currently only calls restore on mount which leaves remaining at 0 if there is no
stored deadline; update the onMount handler to detect when no deadline is
present and kick off the cooldown: if a stored deadline exists call restore (as
before), otherwise set the deadline to now + the configured cooldown and start
the tick/countdown so remaining > 0 and the resend button is disabled until the
timer elapses. Ensure onDestroy still clears the tick.
What does this PR do?
Add email OTP as primary login method with separate verification page,
proper Appwrite SDK integration, and dynamic UI switching.
Test Plan
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
yes
Summary by CodeRabbit
New Features
UX Changes
Reliability