[VPAT-27] chore(security): disable autocomplete on sensitive input fields #8517

Disable autocomplete on authentication and security-related forms to prevent
browsers from storing sensitive credentials. This affects sign-in, password
reset, account security, and onboarding forms across admin, web, and space apps.

Modified components:
- Auth forms (email, password, unique code, forgot/reset/set password)
- Account security pages
- Instance setup and profile onboarding
- Shared UI components (auth-input, password-input)
This commit is contained in:
Prateek Shourya 2026-02-17 00:43:35 +05:30 committed by GitHub
parent d3c6e5ec94
commit e9b011896d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 52 additions and 40 deletions

View file

@ -146,7 +146,7 @@ export function InstanceSignInForm() {
placeholder="name@company.com"
value={formData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
autoComplete="on"
autoComplete="off"
autoFocus
/>
</div>
@ -165,7 +165,7 @@ export function InstanceSignInForm() {
placeholder="Enter your password"
value={formData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
autoComplete="on"
autoComplete="off"
/>
{showPassword ? (
<button

View file

@ -222,7 +222,7 @@ export function InstanceSetupForm() {
value={formData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
autoComplete="on"
autoComplete="off"
/>
{errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
<p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
@ -268,7 +268,7 @@ export function InstanceSetupForm() {
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
/>
{showPassword.password ? (
<button
@ -312,6 +312,7 @@ export function InstanceSetupForm() {
className="w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<button

View file

@ -75,7 +75,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
onChange={(e) => setEmail(e.target.value)}
placeholder="name@company.com"
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}
/>

View file

@ -159,7 +159,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="off"
autoFocus
/>
{showPassword?.password ? (
@ -192,6 +192,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="off"
/>
{showPassword?.retypePassword ? (
<EyeOff

View file

@ -98,6 +98,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder="name@company.com"
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
autoComplete="off"
disabled
/>
{uniqueCodeFormData.email.length > 0 && (
@ -119,6 +120,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">

View file

@ -74,7 +74,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
onChange={(e) => setEmail(e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
autoComplete="on"
autoComplete="off"
autoFocus
ref={inputRef}
/>

View file

@ -104,7 +104,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
autoComplete="on"
autoComplete="off"
disabled={resendTimerCode > 0}
/>
)}

View file

@ -213,7 +213,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
@ -250,6 +250,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"
/>
<button
type="button"

View file

@ -123,7 +123,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
autoComplete="on"
autoComplete="off"
disabled
/>
</div>
@ -144,7 +144,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
autoFocus
/>
{showPassword.password ? (
@ -175,6 +175,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<EyeOff

View file

@ -126,7 +126,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
autoComplete="on"
autoComplete="off"
disabled
/>
</div>
@ -147,7 +147,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
autoFocus
/>
{showPassword.password ? (
@ -178,6 +178,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<EyeOff

View file

@ -107,7 +107,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className="disable-autofill-style h-10 w-full placeholder:text-placeholder border-0"
autoComplete="on"
autoComplete="off"
disabled
/>
{uniqueCodeFormData.email.length > 0 && (
@ -134,6 +134,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
onChange={(e) => handleFormChange("code", e.target.value)}
placeholder={t("auth.common.unique_code.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !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">

View file

@ -164,6 +164,7 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
{ "border-danger-strong": errors.email },
{ "cursor-not-allowed !bg-surface-2": secondStep }
)}
autoComplete="off"
disabled={secondStep}
/>
)}
@ -187,6 +188,7 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
ref={ref}
placeholder={changeEmailT("form.code.placeholder")}
className={cn({ "border-danger-strong": errors.code })}
autoComplete="off"
autoFocus
/>
)}

View file

@ -392,7 +392,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
className="w-full border-[0.5px] border-subtle pr-12 placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
/>
{showPassword.password ? (
<EyeOff
@ -433,6 +433,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
hasError={Boolean(errors.confirm_password)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="w-full border-subtle pr-12 placeholder:text-placeholder"
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<EyeOff

View file

@ -152,6 +152,7 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
placeholder={t("old_password")}
className="w-full"
hasError={Boolean(errors.old_password)}
autoComplete="current-password"
/>
)}
/>
@ -193,6 +194,7 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
hasError={Boolean(errors.new_password)}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="new-password"
/>
)}
/>
@ -238,6 +240,7 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
hasError={Boolean(errors.confirm_password)}
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
)}
/>