feat: validate new event form with captcha

api/src/graphql/events.sdl.ts

@@ -52,7 +52,7 @@ export const schema = gql`
     ownerEmail: String!
     title: String!
     responseConfig: ResponseConfig!
-    captcha: String!
+    captchaResponse: String!
   }
 
   input UpdateEventInput {

api/src/lib/captcha.ts

@@ -0,0 +1,25 @@
+import querystring from 'querystring'
+
+import { RECAPTCHA_SERVER_KEY } from 'src/app.config'
+
+import { logger } from './logger'
+
+const RECAPTCHA_ENDPOINT = 'https://www.google.com/recaptcha/api/siteverify'
+
+/** Return true if the given captcha token was valid, false otherwise. */
+export async function validateCaptcha(token: string): Promise<boolean> {
+  try {
+    const data = { secret: RECAPTCHA_SERVER_KEY, response: token }
+    const res = await fetch(RECAPTCHA_ENDPOINT, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: querystring.stringify(data),
+    })
+    const json = await res.json()
+    logger.debug({ json }, 'reCAPTCHA response')
+    return json.success
+  } catch (err) {
+    logger.error({ err }, 'Failed to validate reCAPTCHA')
+    return false
+  }
+}

api/src/services/events/events.ts

@@ -4,8 +4,9 @@ import type {
   PublicResponse,
 } from 'types/graphql'
 
-import { validate } from '@redwoodjs/api'
+import { RedwoodError, validate } from '@redwoodjs/api'
 
+import { validateCaptcha } from 'src/lib/captcha'
 import { db } from 'src/lib/db'
 import { sendEventDetails } from 'src/lib/email/template/event'
 import { notifyEventCreated, notifyEventUpdated } from 'src/lib/notify/event'
@@ -98,7 +99,14 @@ export const eventByPreviewToken: QueryResolvers['eventByPreviewToken'] =
 export const createEvent: MutationResolvers['createEvent'] = async ({
   input: _input,
 }) => {
-  const { captcha, ...input } = _input
+  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.'
+    )
+
   validate(input.ownerEmail, 'email', { email: true })
   validate(input.title, 'title', {
     custom: {

app.config.ts

@@ -24,4 +24,5 @@ export const S3_REGION = process.env.S3_REGION
 export const S3_BUCKET = process.env.S3_BUCKET
 export const S3_NAMESPACE = process.env.S3_NAMESPACE
 
+export const RECAPTCHA_SERVER_KEY = process.env.RECAPTCHA_SERVER_KEY
 export const RECAPTCHA_CLIENT_KEY = process.env.REDWOOD_ENV_RECAPTCHA_CLIENT_KEY

web/src/pages/NewEventPage/NewEventPage.tsx

@@ -69,7 +69,7 @@ const NewEventPage = () => {
   const { formState } = formMethods
 
   const [redirecting, setRedirecting] = useState(false)
-  const [captcha, setCaptcha] = useState<string | null>(null)
+  const [captchaResponse, setCaptchaResponse] = useState<string | null>(null)
 
   const [create, { loading, error }] = useMutation<
     CreateEventMutation,
@@ -93,7 +93,9 @@ const NewEventPage = () => {
         className="mt-3"
         formMethods={formMethods}
         onSubmit={(input: FormValues) =>
-          create({ variables: { input: { ...input, captcha } } })
+          create({
+            variables: { input: { ...input, captchaResponse } },
+          })
         }
       >
         <FormField name="ownerEmail" text="Email Address*">
@@ -140,11 +142,16 @@ const NewEventPage = () => {
           </SelectField>
         </FormField>
 
-        <ReCAPTCHA sitekey={RECAPTCHA_CLIENT_KEY} onChange={setCaptcha} />
+        <ReCAPTCHA
+          sitekey={RECAPTCHA_CLIENT_KEY}
+          onChange={setCaptchaResponse}
+        />
 
         <Submit
           className="button is-success mt-3"
-          disabled={loading || redirecting || !formState.isValid || !captcha}
+          disabled={
+            loading || redirecting || !formState.isValid || !captchaResponse
+          }
         >
           {loading || redirecting ? 'Creating...' : 'Create New Event'}
         </Submit>