From 2b14088f22b4642d43f048aebb56d40937273373 Mon Sep 17 00:00:00 2001
From: jnzlab <jameelahmad221b@gmail.com>
Date: Sat, 5 Apr 2025 01:43:30 +0500
Subject: [PATCH] Add sso-callback step to fix Clerk Smart CAPTCHA
 initialization error

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.
---
 .../elements/examples/shadcn-ui.mdx           | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/docs/customization/elements/examples/shadcn-ui.mdx b/docs/customization/elements/examples/shadcn-ui.mdx
index 94a33ba20c..fe251476ed 100644
--- a/docs/customization/elements/examples/shadcn-ui.mdx
+++ b/docs/customization/elements/examples/shadcn-ui.mdx
@@ -437,6 +437,33 @@ You must also configure the appropriate settings in Clerk:
                   </Card>
                 </SignIn.Step>
 
+                <SignIn.Step name="sso-callback">
+                  <Card className="w-full sm:w-96">
+                    <CardHeader>
+                      <CardTitle>Verify your identity</CardTitle>
+                      <CardDescription>Complete the captcha to continue</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-4">
+                        <SignIn.Captcha />
+                        <SignIn.Action submit asChild>
+                          <Button disabled={isGlobalLoading}>
+                            <Clerk.Loading>
+                              {(isLoading) => {
+                                return isLoading ? (
+                                  <Icons.spinner className="size-4 animate-spin" />
+                                ) : (
+                                  'Verify'
+                                )
+                              }}
+                            </Clerk.Loading>
+                          </Button>
+                        </SignIn.Action>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </SignIn.Step>
+
                 <SignIn.Step name="choose-strategy">
                   <Card className="w-full sm:w-96">
                     <CardHeader>