How to integrate ReCaptcha with Server Actions?

Question

Hi, I'm trying to swap from an API based form request to the server actions solution: it works like a charm but now I'd like to integrate ReCaptcha too; I'm using the GoogleReCaptcha component to generate the token... it works but it's not the best solution because the token is generated too early. Any suggestions? Thanks!

valse · Answer

I solved passing to the action method a third parameter that is the token from the reCaptcha execution:const [state, formAction] = useFormState(
    async (
      prevState: {
        message: string
        success: boolean
      },
      formData: FormData
    ) => send(prevState, formData, await getToken()),
    initialState
)

How to integrate ReCaptcha with Server Actions?

2 Replies