Get widget token
You can get the widget token by three ways:
onSuccess
callback
import { Turnstile } from '@marsidev/react-turnstile'
export default function Widget() {
const [token, setToken] = React.useState()
return (
<Turnstile siteKey='1x00000000000000000000AA' onSuccess={setToken} />
)
}
ref.current.getResponse()
method
import { Turnstile } from '@marsidev/react-turnstile'
export default function Widget() {
const ref = React.useRef()
return (
<>
<Turnstile ref={ref} siteKey='1x00000000000000000000AA' />
<button onClick={() => alert(ref.current?.getResponse())}>
Get response
</button>
</>
)
}
cf-turnstile-response
HTML input
import { Turnstile } from '@marsidev/react-turnstile'
export default function Widget() {
const formRef = React.useRef(null)
async function handleSubmit(event) {
event.preventDefault()
const formData = new FormData(formRef.current)
const token = formData.get('cf-turnstile-response')
// ...
}
return (
<form ref={formRef} onSubmit={handleSubmit}>
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<Turnstile siteKey='1x00000000000000000000AA' />
<button type='submit'>Login</button>
</form>
)
}