feat: validate captcha on new response

api/src/graphql/responses.sdl.ts

@@ -52,6 +52,7 @@ export const schema = gql`
     headCount: Int!
     comment: String!
     remindPriorSec: Int
+    captchaResponse: String!
   }
 
   input UpdateResponseInput {

api/src/services/responses/responses.ts

@@ -5,6 +5,9 @@ import type {
   Reminder,
 } from 'types/graphql'
 
+import { RedwoodError } from '@redwoodjs/api'
+
+import { validateCaptcha } from 'src/lib/captcha'
 import { db } from 'src/lib/db'
 import {
   sendNewResponseReceived,
@@ -91,11 +94,18 @@ export const responseByEditToken: QueryResolvers['responseByEditToken'] =
 
 export const createResponse: MutationResolvers['createResponse'] = async ({
   eventId,
-  input,
+  input: _input,
 }) => {
   const event = await db.event.findUnique({ where: { id: eventId } })
   if (!event) throw new Error(`Event not found: ${eventId}`)
 
+  const { captchaResponse, ...input } = _input
+  const valid = await validateCaptcha(captchaResponse)
+  if (!valid)
+    throw new RedwoodError(
+      'Could not validate reCAPTCHA. Please refresh the page and try again.'
+    )
+
   const reminders: { sendAt: Date }[] = []
   if (input.remindPriorSec) {
     const sendAt = dayjs(event.start)

web/src/components/NewResponseForm/NewResponseForm.tsx

@@ -36,6 +36,7 @@ const NewResponseForm = ({ event, responseToken }: Props) => {
     defaultValues: { headCount: 1 },
   })
 
+  const [captchaResponse, setCaptchaResponse] = useState<string | null>(null)
   const [createdForEmail, setCreatedForEmail] = useState<string | null>(null)
 
   const [create, { loading, error }] = useMutation<
@@ -90,9 +91,10 @@ const NewResponseForm = ({ event, responseToken }: Props) => {
         loading={loading}
         error={error}
         formMethods={formMethods}
+        onCaptchaResponse={setCaptchaResponse}
         onSubmit={(data: FormValues) => {
           if (!data.email) throw new Error('Email is required')
-          const input = { ...data, email: data.email }
+          const input = { ...data, email: data.email, captchaResponse }
           create({ variables: { eventId: event.id, input } })
         }}
       />

web/src/components/ResponseForm/ResponseForm.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 
 import { ApolloError } from '@apollo/client/errors'
+import ReCAPTCHA from 'react-google-recaptcha'
 import { SetOptional } from 'type-fest'
 import { PublicEvent, UpdatableResponse } from 'types/graphql'
 
@@ -15,6 +16,7 @@ import {
   UseFormReturn,
 } from '@redwoodjs/forms'
 
+import { RECAPTCHA_CLIENT_KEY } from 'src/app.config'
 import FormField from 'src/components/FormField/FormField'
 import Typ from 'src/components/Typ/Typ'
 import { isEmail } from 'src/logic/validation'
@@ -30,6 +32,7 @@ export type Props = {
   error?: ApolloError
   formMethods: UseFormReturn<FormValues>
   onChange?: React.FormEventHandler<HTMLFormElement>
+  onCaptchaResponse?: (response: string | null) => void
   onSubmit: (data: FormValues) => void
 }
 
@@ -49,7 +52,16 @@ function random<T>(choices: T[]): T {
 }
 
 const ResponseForm = (props: Props) => {
-  const { mode, event, error, loading, formMethods, onChange, onSubmit } = props
+  const {
+    mode,
+    event,
+    error,
+    loading,
+    formMethods,
+    onChange,
+    onCaptchaResponse,
+    onSubmit,
+  } = props
   const { formState } = formMethods
 
   const [exampleName, setExampleName] = useState('')
@@ -151,6 +163,13 @@ const ResponseForm = (props: Props) => {
           </SelectField>
         </FormField>
 
+        {mode === 'CREATE' && (
+          <ReCAPTCHA
+            sitekey={RECAPTCHA_CLIENT_KEY}
+            onChange={onCaptchaResponse}
+          />
+        )}
+
         <Submit
           className="button is-success mt-3"
           disabled={loading || !formState.isValid || !formState.isDirty}