fix(dashboard): allow password manager autofill on self-hosted auth forms

apps/dashboard/src/utils/better-auth/components/forgot-password.tsx

@@ -3,6 +3,7 @@ import { Navigate, useNavigate } from 'react-router-dom';
 import { Button } from '@/components/primitives/button';
 import { Input } from '@/components/primitives/input';
 import { ROUTES } from '@/utils/routes';
+import { AUTOCOMPLETE_PASSWORD_MANAGERS_ON } from '@/utils/constants';
 import { authClient } from '../client';
 import { buildSsoSignInPath } from '../sso-redirect';
 import { useAuthConfig } from '../use-auth-config';
@@ -75,8 +76,11 @@ export function ForgotPassword() {
             Email
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="email"
+            name="email"
             id="email"
+            autoComplete="email"
             value={email}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
             placeholder="user@example.com"

apps/dashboard/src/utils/better-auth/components/reset-password.tsx

@@ -3,6 +3,7 @@ import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/primitives/button';
 import { Input } from '@/components/primitives/input';
 import { ROUTES } from '@/utils/routes';
+import { AUTOCOMPLETE_PASSWORD_MANAGERS_ON } from '@/utils/constants';
 import { authClient } from '../client';
 import { buildSsoSignInPath } from '../sso-redirect';
 import { useAuthConfig } from '../use-auth-config';
@@ -86,8 +87,11 @@ export function ResetPassword() {
             New Password
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="password"
+            name="newPassword"
             id="newPassword"
+            autoComplete="new-password"
             value={newPassword}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPassword(e.target.value)}
             placeholder="Enter new password"
@@ -101,8 +105,11 @@ export function ResetPassword() {
             Confirm Password
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="password"
+            name="confirmPassword"
             id="confirmPassword"
+            autoComplete="new-password"
             value={confirmPassword}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setConfirmPassword(e.target.value)}
             placeholder="Confirm new password"

apps/dashboard/src/utils/better-auth/components/sign-in.tsx

@@ -3,6 +3,7 @@ import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/primitives/button';
 import { Input } from '@/components/primitives/input';
 import { IS_SELF_HOSTED_EE } from '@/config';
+import { AUTOCOMPLETE_PASSWORD_MANAGERS_ON } from '@/utils/constants';
 import { readClerkRedirectUrlParam, resolveSameOriginRedirectUrl } from '@/utils/product-auth-urls';
 import { ROUTES } from '@/utils/routes';
 import { authClient } from '../client';
@@ -108,8 +109,11 @@ export function SignIn() {
             Email
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="email"
+            name="email"
             id={emailId}
+            autoComplete="email"
             value={email}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
             placeholder="user@example.com"
@@ -135,8 +139,11 @@ export function SignIn() {
             </span>
           </div>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="password"
+            name="password"
             id={passwordId}
+            autoComplete="current-password"
             value={password}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
             placeholder="Password"

apps/dashboard/src/utils/better-auth/components/sign-up.tsx

@@ -3,6 +3,7 @@ import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/primitives/button';
 import { Input } from '@/components/primitives/input';
 import { ROUTES } from '@/utils/routes';
+import { AUTOCOMPLETE_PASSWORD_MANAGERS_ON } from '@/utils/constants';
 import { authClient } from '../client';
 import { useAuth } from '../index';
 import { buildSsoSignInPath } from '../sso-redirect';
@@ -149,7 +150,10 @@ export function SignUp() {
             First Name <span className="text-red-600">*</span>
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="text"
+            name="firstName"
+            autoComplete="given-name"
             value={firstName}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFirstName(e.target.value)}
             placeholder="John"
@@ -162,7 +166,10 @@ export function SignUp() {
             Last Name
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="text"
+            name="lastName"
+            autoComplete="family-name"
             value={lastName}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setLastName(e.target.value)}
             placeholder="Doe"
@@ -174,7 +181,10 @@ export function SignUp() {
             Email <span className="text-red-600">*</span>
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="email"
+            name="email"
+            autoComplete="email"
             value={email}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
             placeholder="user@example.com"
@@ -187,7 +197,10 @@ export function SignUp() {
             Password <span className="text-red-600">*</span>
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="password"
+            name="password"
+            autoComplete="new-password"
             value={password}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setIsSubmitted(false);

apps/dashboard/src/utils/constants.ts

@@ -6,6 +6,18 @@ export const AUTOCOMPLETE_PASSWORD_MANAGERS_OFF = {
   'data-form-type': 'other',
 };
 
+/**
+ * Cancels `AUTOCOMPLETE_PASSWORD_MANAGERS_OFF` on auth form inputs (sign-in/sign-up/forgot/
+ * reset password) so browsers and password managers can autofill and save credentials again.
+ * The `undefined` values remove the suppression attributes from the rendered element; spread
+ * this BEFORE the field's own `name` / `autoComplete` tokens so they take precedence.
+ */
+export const AUTOCOMPLETE_PASSWORD_MANAGERS_ON = {
+  autoComplete: undefined,
+  'data-1p-ignore': undefined,
+  'data-form-type': undefined,
+};
+
 export const INLINE_CONFIGURABLE_STEP_TYPES: readonly StepTypeEnum[] = [
   StepTypeEnum.DELAY,
   StepTypeEnum.DIGEST,

apps/dashboard/src/utils/self-hosted/components.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '../../components/primitives/button';
 import { Input } from '../../components/primitives/input';
 import { API_HOSTNAME } from '../../config';
+import { AUTOCOMPLETE_PASSWORD_MANAGERS_ON } from '../constants';
 
 const JWT_STORAGE_KEY = 'self-hosted-jwt';
 
@@ -69,8 +70,11 @@ export function SignIn() {
             Email
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="email"
+            name="email"
             id="email"
+            autoComplete="email"
             value={email}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
             placeholder="user@example.com"
@@ -83,8 +87,11 @@ export function SignIn() {
             Password
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="password"
+            name="password"
             id="password"
+            autoComplete="current-password"
             value={password}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
             placeholder="Password"
@@ -228,8 +235,11 @@ export function SignUp() {
             First Name <span className="text-red-600">*</span>
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="text"
+            name="firstName"
             id="firstName"
+            autoComplete="given-name"
             value={firstName}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFirstName(e.target.value)}
             placeholder="John"
@@ -242,8 +252,11 @@ export function SignUp() {
             Last Name
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="text"
+            name="lastName"
             id="lastName"
+            autoComplete="family-name"
             value={lastName}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setLastName(e.target.value)}
             placeholder="Doe"
@@ -255,8 +268,11 @@ export function SignUp() {
             Email <span className="text-red-600">*</span>
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="email"
+            name="email"
             id="email"
+            autoComplete="email"
             value={email}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
             placeholder="user@example.com"
@@ -269,8 +285,11 @@ export function SignUp() {
             Password <span className="text-red-600">*</span>
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="password"
+            name="password"
             id="password"
+            autoComplete="new-password"
             value={password}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setIsSubmitted(false);
@@ -291,8 +310,11 @@ export function SignUp() {
             Organization Name <span className="text-red-600">*</span>
           </label>
           <Input
+            {...AUTOCOMPLETE_PASSWORD_MANAGERS_ON}
             type="text"
+            name="organizationName"
             id="organizationName"
+            autoComplete="organization"
             value={organizationName}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOrganizationName(e.target.value)}
             placeholder="Your Company"