Expose error/status callbacks on the prebuilt <SignIn /> component (e.g. incorrect password, rate limiting)

Đang mở
#9,770 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
authentication, frontend

Hướng nghiên cứu

Bắt đầu từ entry point dựng sẵn trong @clerk/clerk-react và theo dõi cách việc gửi form nội bộ của nó xử lý các lỗi. Xem lại cách ClerkAPIError[] và các code như form_password_incorrect và too_many_requests được biểu diễn, sau đó xác định hành vi của callback và phạm vi kiểm thử cần thiết cho các lần đăng nhập thất bại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Is your feature request related to a problem?

The prebuilt <SignIn /> component (@clerk/clerk-react) handles the full sign-in flow internally but doesn't expose any way to observe failures — incorrect password, rate limiting (429s), locked accounts, etc. There's no onError prop, no emitted event, and no documented way to read the failure reason from useSignIn() when the failure happened inside the component's own internal form submission (not one we drive ourselves).

As a workaround, we've had to monkey-patch window.fetch to sniff HTTP status codes for requests to our Clerk FAPI domain, just to detect a 429 and show a "too many attempts, retry in Ns" banner:

window.fetch = async (...args) => {
  const response = await originalFetch(...args);
  if (url.includes(CLERK_DOMAIN) && response.status === 429) {
    // surface a rate-limit banner
  }
  return response;
};

This is fragile (breaks on any internal FAPI change), duplicated per-app, and can't distinguish error reasons (wrong password vs. locked vs. rate-limited) — only status codes.

Describe the solution you'd like

An onError (or onStatusChange) prop on <SignIn /> that fires with Clerk's structured error info (e.g. ClerkAPIError[] with codes like form_password_incorrect, too_many_requests) whenever an internal sign-in attempt fails — without requiring us to reimplement the form via the headless useSignIn() hook just to get error visibility.

Describe alternatives you've considered

  • Rebuilding the whole sign-in form with useSignIn() to get error access — loses all the built-in UI/appearance theming <SignIn /> gives us for free.
  • Patching window.fetch — fragile, non-public API surface, no error-code granularity.

Happy to contribute a PR if maintainers can point at the right place to emit this.

Ngôn ngữ chính
TypeScript
Star
1.8k
Fork
472
Merge trung bình
2 ngày 8 giờ
Pull request đã merge (30 ngày)
184

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của clerk/javascript

Tất cả issue của clerk/javascript

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.