marsidev / react-turnstile

Cloudflare Turnstile integration for React.
https://www.npmjs.com/package/@marsidev/react-turnstile
MIT License
406 stars 25 forks source link

Undefined tokens #83

Open shermanaN opened 3 months ago

shermanaN commented 3 months ago

I'm using your react-turnstile library in a ReactJS frontend to generate tokens. Here is a snippet code showing how we are using it.

`// posting.js const PostingApp = ({postingProps}) => { const turnstileRef = useRef(null); const [turnstileTkn, setTurnstileTkn] = useState(null); return ( <WidgetTurnstile turnstileResponse={(tkn) => setTurnstileTkn({ref: turnstileRef, tkn: tkn})} turnstileRef={turnstileRef} siteKeyCustom={ 'xxxxxxx'} /> ); };

export default PostingApp;

// turnstile.js import React from "react"; import { Turnstile } from '@marsidev/react-turnstile';

interface TurnstileProps { turnstileResponse: (token: string) => void, siteKeyCustom?: string, turnstileRef: any, hidden?: boolean }

const TurnstileWidget = ({turnstileResponse, siteKeyCustom, turnstileRef, hidden = true}: TurnstileProps) => { const siteKey = 'xxxxxxxxxxxxxx'; return ( <Turnstile siteKey={siteKeyCustom || siteKey} onSuccess={turnstileResponse} onExpire={() => turnstileResponse('expired')} onError={(e: any) => turnstileResponse(e)} ref={turnstileRef} style={{ display: hidden ? 'none' : 'block' }} /> ); }; ` We put the code in production and we were logging the tokens we obtained from the turnstile widget. Analyzing those logs we noticed that 60% approx of the logged tokens were ‘undefined’. We would like to know if we are doing something wrong in our implementation or if it’s a known behavior of your library.

Could you please take a look and let me know if there's anything we're doing incorrectly? Is there any recommendation to use the widget using your library?

marsidev commented 2 months ago

Hello, can you please share a minimal reproduction? Can be in codesandbox or just a GH repo.