kobotoolbox / kpi / 37783639365

86%

master: 76%

push

github

feat(auth): mfa form DEV-1857 (#7640)

### 📣 Summary

Accounts with two-factor authentication can now finish signing in on the
redesigned login screen. Hidden behind feature flag.

### 💭 Notes

Changes here:
- `MfaForm/MfaForm.tsx` — the code field plus the "Verification issues"
panel it swaps to
- The description counts digits from `/environment` (`mfa_code_length`)
instead of hardcoding six, because `MFA_CODE_LENGTH` is a per-instance
setting
  - The support address goes through `replaceSupportEmail()`
  - Few stories
- `LoginRoute.tsx` — fills in the `DEV-1857` TODO, keeps the supporting
column while a form is still ahead, and adds "Your login attempt has
expired" panel
- `LoginForm.tsx` — `mfa_authenticate` now routes to the form instead of
falling through to "One more step"
- `allauth.mocks.ts` — more handlers for stories

### 👀 Preview steps


1. ℹ️ have an account with two-factor authentication on (Account
Settings → Security → Two-factor authentication), and a signed-out
browser
2. open `/#/auth/login?ff_authRedesignEnabled=true`
3. enter the username and password, press "Log in"
4. 🔴 [on base branch] the card says "One more step"
5. 🟢 [on PR] the card asks for your verification token, with the cursor
already in the field
6. press "Continue" with input empty — 🟢 "Required field", nothing sent
7. type six wrong digits — 🟢 the error message lands under the field and
your code stays put for another go
8. press "Problem with token?" — 🟢 "Verification issues", naming your
instance's support address
9. press "Go back" — 🟢 the field is back, with whatever you had typed
still in it
10. type the real token, press "Continue" — 🟢 you are signed in
11. run storybook
12. see relevant stories

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

10502 of 13862 branches covered (75.76%)

33490 of 40277 relevant lines covered (83.15%)

5.49 hits per line