Skip to content
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

Add sso-callback step to fix Clerk Smart CAPTCHA initialization error #2164

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

jnzlab
Copy link

@jnzlab jnzlab commented Apr 4, 2025

Description

Resolved the issue where the Clerk Smart CAPTCHA widget fails to initialize due to the missing clerk-captcha DOM element, causing a fallback to Invisible CAPTCHA. The error stemmed from the custom sign-in form example in Clerk's shadcn-ui documentation lacking the <SignIn.Captcha /> component. Added a SignIn.Step named sso-callback with the <SignIn.Captcha /> component to the sign-in flow, ensuring proper initialization of the Smart CAPTCHA widget.

🔎 Previews:

  • No visual previews available as this is a functional change to the sign-in flow. The update ensures the Smart CAPTCHA widget renders correctly instead of falling back to Invisible CAPTCHA.

What does this solve?

  • This PR fixes an error in the custom sign-in form where the Clerk Smart CAPTCHA widget could not initialize due to the absence of the <SignIn.Captcha /> component in the example provided at Clerk's shadcn-ui documentation. Without this component, users encountered the error: Cannot initialize Smart CAPTCHA widget because the clerk-captcha DOM element was not found; falling back to Invisible CAPTCHA widget. This change ensures a smoother and intended authentication experience.

What changed?

  • Added a new <SignIn.Step name="sso-callback"> to the sign-in flow, including the <SignIn.Captcha /> component and a submit action. This step prompts users to complete the CAPTCHA verification, allowing the Smart CAPTCHA widget to initialize properly and preventing the fallback to Invisible CAPTCHA. The updated code integrates seamlessly with the existing shadcn-ui based sign-in form structure.

Checklist

  • I have clicked on "Files changed" and performed a thorough self-review
  • All existing checks pass

Resolved the issue where the Clerk Smart CAPTCHA widget fails to initialize due to the missing `clerk-captcha` DOM element, causing a fallback to Invisible CAPTCHA. The error stemmed from the custom sign-in form example in Clerk's shadcn-ui documentation lacking the `<SignIn.Captcha />` component. Added a `SignIn.Step` named `sso-callback` with the `<SignIn.Captcha />` component to the sign-in flow, ensuring proper initialization of the Smart CAPTCHA widget.
@jnzlab jnzlab requested a review from a team as a code owner April 4, 2025 20:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant