Skip to content

fix(ui): allow pw manager extensions to autofill totp#787

Closed
scottmckendry wants to merge 1 commit into
tinyauthapp:mainfrom
scottmckendry:fix-totp-autofill
Closed

fix(ui): allow pw manager extensions to autofill totp#787
scottmckendry wants to merge 1 commit into
tinyauthapp:mainfrom
scottmckendry:fix-totp-autofill

Conversation

@scottmckendry
Copy link
Copy Markdown
Member

@scottmckendry scottmckendry commented Apr 11, 2026

removes shadcn's totp component in favour of a regular input field.

Loosely based styling on github's 2fa prompt:

image image

my bw extension appears to work fine with this input.

fixes #407

Summary by CodeRabbit

  • Improvements
    • Simplified two-factor authentication input to a single centered numeric field that auto-submits when six digits are entered, making verification faster and more reliable.
  • Chores
    • Removed the prior multi-slot OTP input UI and an associated unused dependency to streamline the codebase and reduce maintenance.

@dosubot dosubot Bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Apr 11, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 11, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 006f71f8-fc73-47b0-bbc6-d8268a11b966

📥 Commits

Reviewing files that changed from the base of the PR and between 9b1e798 and ea21cbd.

⛔ Files ignored due to path filters (1)
  • frontend/bun.lock is excluded by !**/*.lock
📒 Files selected for processing (3)
  • frontend/package.json
  • frontend/src/components/auth/totp-form.tsx
  • frontend/src/components/ui/input-otp.tsx
💤 Files with no reviewable changes (2)
  • frontend/package.json
  • frontend/src/components/ui/input-otp.tsx

📝 Walkthrough

Walkthrough

Replaces a multi-slot OTP component with a single numeric text input: removes the input-otp dependency and its UI file, and updates the TOTP form to sanitize input, limit to 6 digits, and auto-submit when six digits are entered.

Changes

Cohort / File(s) Summary
Dependency Removal
frontend/package.json
Removed input-otp dependency ("input-otp": "^1.4.2") from project dependencies.
TOTP Form Refactor
frontend/src/components/auth/totp-form.tsx
Replaced InputOTP with a single Input field. handleChange now strips non-digits, truncates to 6 chars, updates react-hook-form value, and triggers submit when length === 6. Input uses type="text", inputMode="numeric", maxLength={6}, placeholder="XXXXXX", autoComplete="one-time-code", and autoFocus.
UI Component Removal
frontend/src/components/ui/input-otp.tsx
Deleted file; removed exports: InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator (previous wrappers around input-otp and per-slot rendering/caret behavior).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hop and nibble digits neat,
Six hops land—no missing beat.
Slots tuck away, a single line to see,
Clean and quick, as comfy as can be.
🥕 Bravo, tiny code—you're free!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: replacing a custom TOTP component with a standard input field to enable password manager autofill functionality.
Linked Issues check ✅ Passed The code changes directly address issue #407 by replacing the custom InputOTP component with a standard HTML input field that supports password manager autofill.
Out of Scope Changes check ✅ Passed All changes are directly related to the TOTP autofill fix: removing the incompatible InputOTP component, updating the TOTP form to use standard input, and removing the unused input-otp dependency.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 11, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 20.12%. Comparing base (cc94294) to head (ea21cbd).

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #787   +/-   ##
=======================================
  Coverage   20.12%   20.12%           
=======================================
  Files          50       50           
  Lines        3970     3970           
=======================================
  Hits          799      799           
  Misses       3099     3099           
  Partials       72       72           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/components/auth/totp-form.tsx`:
- Line 53: The placeholder in the TotpForm component is hardcoded as "xxxxxx";
replace it with a localized string using the project's i18n hook (e.g., call
useTranslation()/t) instead of the literal, update the placeholder prop on the
input in totp-form.tsx to use t('auth.totp.placeholder') (or your chosen key),
ensure useTranslation is imported and available in the component (e.g., const {
t } = useTranslation()), and add the corresponding "auth.totp.placeholder" entry
to the locale JSON files so translations are provided.
- Around line 27-32: The input handler (handleChange) directly calls onSubmit
when value reaches 6 chars, bypassing the form submission pipeline
(form.handleSubmit) and risking duplicate mutation calls; change handleChange to
invoke the same submission path by calling form.handleSubmit(onSubmit) instead
of onSubmit(...) and then clear/reset the field (e.g., form.reset() or
form.setValue("code", "") ) after the submission completes so subsequent Enter
presses won't re-submit the same code; update references in handleChange to use
form.handleSubmit and form.reset/form.setValue to ensure a single unified submit
path and clear the form.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b1ca1379-e98b-4f07-84ef-b22b70733464

📥 Commits

Reviewing files that changed from the base of the PR and between cc94294 and f3bc8bb.

⛔ Files ignored due to path filters (1)
  • frontend/bun.lock is excluded by !**/*.lock
📒 Files selected for processing (3)
  • frontend/package.json
  • frontend/src/components/auth/totp-form.tsx
  • frontend/src/components/ui/input-otp.tsx
💤 Files with no reviewable changes (2)
  • frontend/package.json
  • frontend/src/components/ui/input-otp.tsx

Comment thread frontend/src/components/auth/totp-form.tsx
autoComplete="one-time-code"
autoFocus
maxLength={6}
placeholder="xxxxxx"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Localize the placeholder text.

Line 53 hardcodes "xxxxxx" in an otherwise localized component; this should be i18n-backed for consistency.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/auth/totp-form.tsx` at line 53, The placeholder in
the TotpForm component is hardcoded as "xxxxxx"; replace it with a localized
string using the project's i18n hook (e.g., call useTranslation()/t) instead of
the literal, update the placeholder prop on the input in totp-form.tsx to use
t('auth.totp.placeholder') (or your chosen key), ensure useTranslation is
imported and available in the component (e.g., const { t } = useTranslation()),
and add the corresponding "auth.totp.placeholder" entry to the locale JSON files
so translations are provided.

@steveiliop56
Copy link
Copy Markdown
Member

Closing in favor of #790.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Not compatible with Bitwarden TOTP

2 participants