@@ -19,6 +19,7 @@ import {
19
19
} from "thirdweb/react" ;
20
20
import { createWallet , inAppWallet } from "thirdweb/wallets" ;
21
21
import { ClientOnly } from "../../components/ClientOnly/ClientOnly" ;
22
+ import { isVercel } from "../../lib/vercel-utils" ;
22
23
import { ThirdwebMiniLogo } from "../components/ThirdwebMiniLogo" ;
23
24
import { getSDKTheme } from "../components/sdk-component-theme" ;
24
25
import { doLogin , doLogout , getLoginPayload , isLoggedIn } from "./auth-actions" ;
@@ -246,14 +247,17 @@ function CustomConnectEmbed(props: {
246
247
} ) {
247
248
const { theme } = useTheme ( ) ;
248
249
const client = useThirdwebClient ( ) ;
249
- const [ turnstileToken , setTurnstileToken ] = useState ( "" ) ;
250
+ const [ turnstileToken , setTurnstileToken ] = useState < string | undefined > (
251
+ undefined ,
252
+ ) ;
253
+ const [ alwaysShowTurnstile , setAlwaysShowTurnstile ] = useState ( false ) ;
250
254
251
255
return (
252
256
< div className = "flex flex-col items-center gap-4" >
253
257
< Turnstile
254
258
options = { {
255
259
// only show if interaction is required
256
- appearance : "interaction-only" ,
260
+ appearance : alwaysShowTurnstile ? "always" : "interaction-only" ,
257
261
// match the theme of the rest of the app
258
262
theme : theme === "light" ? "light" : "dark" ,
259
263
} }
@@ -265,6 +269,11 @@ function CustomConnectEmbed(props: {
265
269
auth = { {
266
270
getLoginPayload,
267
271
doLogin : async ( params ) => {
272
+ if ( isVercel ( ) && ! turnstileToken ) {
273
+ setAlwaysShowTurnstile ( true ) ;
274
+ throw new Error ( "Please complete the captcha." ) ;
275
+ }
276
+
268
277
try {
269
278
const result = await doLogin ( params , turnstileToken ) ;
270
279
if ( result . error ) {
0 commit comments