`<SignIn />` and `<SignUp />` email and name fields have no `autocomplete`, so browsers don't offer the user's email
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 72/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- next.js, react, typescript
调研方向
Start with packages/ui/src/components/SignIn/SignInStart.tsx at the identifier field mentioned in the issue, then locate the corresponding SignUp fields and their tests. Check how identifier types and passkey autofill are handled, and run the relevant component tests. Done when the fields receive the standard autocomplete tokens described in the issue, including a valid field name before webauthn.
由索引模型根据 Issue 内容生成。
描述
Reproduction
No special setup needed: any app with the default <SignIn /> / <SignUp /> and email (email code) as the only identifier shows it, e.g. a fresh Next.js quickstart.
Description
With email as the sign-in identifier, the prebuilt components render the email and name fields without any autocomplete attribute:
<!-- <SignIn /> -->
<input id="identifier-field" name="identifier" type="text" inputmode="email" ...>
<!-- <SignUp /> -->
<input id="firstName-field" name="firstName" type="text" ...>
<input id="lastName-field" name="lastName" type="text" ...>
<input id="emailAddress-field" name="emailAddress" type="text" inputmode="email" ...>
So Safari (macOS/iOS/iPadOS), the iOS QuickType keyboard and password managers can't tell the field is an email field, and they don't offer the user's email. This is worst with passwordless sign-in (email code): there's no password field, so the browser never saves a login. Users type their full email by hand on every sign-in. We see it in session recordings: the same users typing their email letter by letter every week, and users have reported it.
type="text", name="identifier" and a translated label (here French, "Adresse e-mail") leave the browser almost nothing to guess from.
In the source, the identifier field only gets autocomplete when passkey autofill is on, and then the value is webauthn on its own:
autoComplete={isWebAuthnAutofillSupported ? 'webauthn' : undefined}
There's no prop or appearance option to set it, so the only workaround is adding the attribute to Clerk's DOM from outside with a MutationObserver.
Steps to reproduce:
- Enable email (email code) as the only identifier in the dashboard.
- Render
<SignIn />(or<SignUp />). - Inspect the email field, or focus it in Safari on iOS/iPadOS.
Expected behavior:
The fields carry standard autocomplete tokens, so browsers, keyboards and password managers can offer the user's details:
- Sign-in identifier:
emailwhen email is the only identifier,telfor phone only,usernamefor username or mixed identifiers. With passkey autofill, addwebauthnafter the field name (username webauthn,email webauthn). A barewebauthnisn't a valid value per the HTML spec, which expects it after a field name. - Sign-up:
emailonemailAddress,given-nameonfirstName,family-nameonlastName,telonphoneNumber,usernameonusername.
This is also an accessibility issue: WCAG 2.1 SC 1.3.5 Identify Input Purpose (Level AA) asks for autocomplete on fields that collect the user's own information.
Actual behavior:
No autocomplete attribute on these fields (unless passkeys are on, then a bare webauthn). Safari and the iOS keyboard don't suggest the user's email.
Environment
@clerk/nextjs: 7.5.2
@clerk/clerk-js: 6 (loaded from Frontend API)
@clerk/ui: 1.40.0 (loaded from Frontend API)
next: 16.3.1
react: 19
Seen in: Safari on iPadOS (user report); confirmed in Chromium and WebKit (Playwright)
- 主要语言
- TypeScript
- 星标
- 1.8k
- 派生
- 480
- 平均合并
- 1 天 19 小时
- 30 天内合并 PR
- 285
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
clerk/javascript 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
clerk/javascript#10026 · 2 条评论 ·
维护者通常 1 天内回复
-
@clerk/nextjs: onBeforeSetActive never settles when invalidateCacheAction rejects (e.g. after a redeploy), so setActive and signOut hang forever可能已有人在做 @RaphaelFakhri 于 14 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
clerk/javascript#9987 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 18/100
clerk/javascript#10231 ·
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 25/100
clerk/javascript#10185 · 1 个 reaction ·
维护者通常 1 天内回复
-
难度 4/5 1-2 天 新手友好度 45/100
clerk/javascript#10118 ·
维护者通常 1 天内回复
相似的 Issue
-
area: app type: bug
难度 2/5 1-3 小时 新手友好度 78/100
ExpidetGames/code-reviewer#585 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 83/100
module-federation/core#5205 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 73/100
LanternOps/breeze#9392 · 1 条评论 ·
维护者通常 1 天内回复
-
engine-rs P3 review-deferral wasm
难度 2/5 1-3 小时 新手友好度 77/100
maniator/verticopolis#1154 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复