-
Notifications
You must be signed in to change notification settings - Fork 3.3k
chore(security): disable autocomplete on sensitive input fields #8517
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: preview
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -140,7 +140,7 @@ export function InstanceSignInForm() { | |
| placeholder="[email protected]" | ||
| value={formData.email} | ||
| onChange={(e) => handleFormChange("email", e.target.value)} | ||
| autoComplete="on" | ||
| autoComplete="off" | ||
| autoFocus | ||
| /> | ||
| </div> | ||
|
|
@@ -159,7 +159,7 @@ export function InstanceSignInForm() { | |
| placeholder="Enter your password" | ||
| value={formData.password} | ||
| onChange={(e) => handleFormChange("password", e.target.value)} | ||
| autoComplete="on" | ||
| autoComplete="off" | ||
| /> | ||
| {showPassword ? ( | ||
| <button | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -69,7 +69,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo | |
| onChange={(e) => setEmail(e.target.value)} | ||
| placeholder="[email protected]" | ||
| className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-subtle border-0 focus:bg-none active:bg-transparent`} | ||
| autoComplete="on" | ||
| autoComplete="off" | ||
| autoFocus | ||
| ref={inputRef} | ||
| /> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -92,6 +92,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) { | |
| onChange={(e) => handleFormChange("email", e.target.value)} | ||
| placeholder="[email protected]" | ||
| className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`} | ||
| autoComplete="off" | ||
| disabled | ||
| /> | ||
| {uniqueCodeFormData.email.length > 0 && ( | ||
|
|
@@ -113,6 +114,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) { | |
| onChange={(e) => handleFormChange("code", e.target.value)} | ||
| placeholder="123456" | ||
| className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder" | ||
| autoComplete="off" | ||
| autoFocus | ||
| /> | ||
| <div className="flex w-full items-center justify-between px-1 text-11 pt-1"> | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -207,7 +207,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props) | |||||||||||||||||||||||||||
| className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder" | ||||||||||||||||||||||||||||
| onFocus={() => setIsPasswordInputFocused(true)} | ||||||||||||||||||||||||||||
| onBlur={() => setIsPasswordInputFocused(false)} | ||||||||||||||||||||||||||||
| autoComplete="on" | ||||||||||||||||||||||||||||
| autoComplete="off" | ||||||||||||||||||||||||||||
| autoFocus | ||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||
| <button | ||||||||||||||||||||||||||||
|
|
@@ -244,6 +244,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props) | |||||||||||||||||||||||||||
| className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder" | ||||||||||||||||||||||||||||
| onFocus={() => setIsRetryPasswordInputFocused(true)} | ||||||||||||||||||||||||||||
| onBlur={() => setIsRetryPasswordInputFocused(false)} | ||||||||||||||||||||||||||||
| autoComplete="off" | ||||||||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use "new-password" for confirm password field consistency. The confirm password field uses
This ensures consistent password manager behavior and semantic correctness. ♻️ Proposed fix <Input
type={showPassword?.retypePassword ? "text" : "password"}
id="confirm-password"
name="confirm_password"
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
- autoComplete="off"
+ autoComplete="new-password"
/>📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||
| <button | ||||||||||||||||||||||||||||
| type="button" | ||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use mode-appropriate autocomplete values for better password manager integration.
The password field currently uses
autoComplete="off"for both sign-in and sign-up flows. According to HTML autocomplete specifications and password manager best practices:"current-password"to help password managers recognize existing credential entry"new-password"to signal new credential creationOther files in this PR (
set-password.tsx,reset-password.tsx) correctly use"new-password"for password creation flows.🔐 Proposed fix to differentiate autocomplete by mode
<Input type={showPassword?.password ? "text" : "password"} id="password" name="password" value={passwordFormData.password} onChange={(e) => handleFormChange("password", e.target.value)} placeholder={t("auth.common.password.placeholder")} className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder" onFocus={() => setIsPasswordInputFocused(true)} onBlur={() => setIsPasswordInputFocused(false)} - autoComplete="off" + autoComplete={mode === EAuthModes.SIGN_IN ? "current-password" : "new-password"} autoFocus />📝 Committable suggestion
🤖 Prompt for AI Agents