marsidev / react-turnstile

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

What should be done on captcha expire? #3

Closed gaurishhs closed 2 years ago

gaurishhs commented 2 years ago

If the captcha expires, How can i bring up a new captcha instead of telling the user to reload the page

marsidev commented 2 years ago

Hi. A token is valid for 300 seconds (ref).

The current intended behavior of this lib is auto-reset the widget every 250 seconds, so you never would have an expired token. You can see it here.

But there is a typo which causes the auto-reset to happening every 62.5 seconds. But still you never should have an expired token. Are you experiencing this?

Anyways, I'm planning to add a property called autoResetOnExpire to indicate whether the widget should automatically reset when it expires (by fixing the setInterval delay) or manually handling the expiring. This is mentioned in the docs.

For a manual handling you need to call the .reset() method in the onExpire callback. Something like this:

import { useRef } from 'react'
import { Turnstile } from '@marsidev/react-turnstile'

function Widget() {
  const ref = useRef(null)

  function onExpire() {
    ref.current?.reset()
  }

  return (
    <Turnstile ref={ref} siteKey={process.env.SITEKEY} onExpire={onExpire}  />
  )
}

Note that invoking the .reset() method only resets the turnstile widget and not the entire page.

marsidev commented 2 years ago

Resolved at 447f979. Check the readme for a example handling the expiring manually.