Skip to content

Add email OTP as default login method#288

Merged
jakebromberg merged 4 commits intomainfrom
feature/email-otp-frontend
Apr 15, 2026
Merged

Add email OTP as default login method#288
jakebromberg merged 4 commits intomainfrom
feature/email-otp-frontend

Conversation

@jakebromberg
Copy link
Copy Markdown
Member

@jakebromberg jakebromberg commented Mar 19, 2026

Summary

  • Add email OTP (one-time passcode) as the default login method for DJs, replacing username+password as the primary flow
  • Keep username+password as a fallback accessible via "Sign in with password instead" link
  • Password setup during onboarding is unchanged — new DJs still set realName, djName, and password
  • Add 38 tests across 5 test files covering all new and updated components

Depends on WXYC/Backend-Service#241 being deployed first.

Closes #287

Test plan

  • npx tsc --noEmit passes (AuthStage type change catches any missed "login" references)
  • All 38 form tests pass (EmailOTPForm, OTPCodeForm, LoginFormSwitcher, NewUserForm, UserPasswordForm)
  • Manual testing against running Backend-Service:
    1. Load /login — OTP email form is the default
    2. Enter email, click "Send login code" — code arrives via email
    3. Enter code — signed in, redirected to dashboard
    4. Click "Sign in with password instead" — password form appears
    5. From password form, click "Sign in with email code instead" — OTP form reappears
    6. Test incomplete user flow: OTP sign-in for a user missing realName → onboarding form with password fields

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Mar 19, 2026

Deploying wxyc-dj with  Cloudflare Pages  Cloudflare Pages

Latest commit: ea506c3
Status: ✅  Deploy successful!
Preview URL: https://e4e5859e.dj-site.pages.dev
Branch Preview URL: https://feature-email-otp-frontend.dj-site.pages.dev

View logs

Copy link
Copy Markdown
Collaborator

@JacksonMeade JacksonMeade left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like what this does, and I went and tried it out on the preview site. It looks good. My only hope is we could ALSO add username-based OTP in a future PR, because emails are somewhat cumbersome to type. Much better imo to type "jake" and then get your OTP automatically.

DJs share a single computer and log in/out between sets. Email OTP lets them enter their email, get a 6-digit code on their phone, and sign in — no password to remember.

- Add emailOTPClient plugin to both client and server auth clients
- Replace AuthStage "login" with "otp-email" | "otp-verify" | "password" stages
- Add useOTPRequest and useOTPVerify hooks following existing auth hook patterns
- Add EmailOTPForm (email entry), OTPCodeForm (6-digit code entry), and LoginFormSwitcher (orchestrates form switching based on auth stage)
- Update LoginPage to render LoginFormSwitcher instead of static UserPasswordForm
- Add bidirectional navigation: "Sign in with password instead" / "Sign in with email code instead"
- Remove password fields from NewUserForm (onboarding no longer requires password setup)
- Guard temp password check in useNewUser behind if (params.password) so OTP users skip it
- Add setRequiredCredentials reducer for clean credential replacement in onboarding
- Update LoginSlotSwitcher verified alert to remove temporary password reference
- Update all setAuthStage("login") references to "otp-email"
- Add tests for all new components (33 tests across 5 files)
Restore the password and confirm-password fields in NewUserForm. Password setup during onboarding is still required even with OTP as the default login method.

- Restore password and confirmPassword RequiredBox fields in NewUserForm
- Restore original useNewUser temp password guard (check unconditionally)
- Revert addRequiredCredentials back to append behavior
- Remove unused setRequiredCredentials reducer
- Restore original NewUserForm tests (11 tests including password validation)
The login page now defaults to the email OTP form instead of the username/password form. All E2E auth setup and test helpers need to click "Sign in with password instead" before filling in credentials. This updates the LoginPage page object model with OTP form locators and a switchToPasswordLogin() method, and makes login() and clickForgotPassword() auto-switch when the password form isn't visible. Also updates dashboard and RBAC redirect checks to detect the OTP email input.
@jakebromberg jakebromberg force-pushed the feature/email-otp-frontend branch from 8987622 to 080541f Compare April 15, 2026 19:45
@jakebromberg jakebromberg merged commit f28f6ce into main Apr 15, 2026
5 checks passed
@jakebromberg jakebromberg deleted the feature/email-otp-frontend branch April 15, 2026 20:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add email OTP as default login method

2 participants