reCAPTCHA improvements

packages/toolpad-app/src/server/config.ts

@@ -18,6 +18,7 @@ export type ServerConfig = {
   encryptionKeys: string[];
   basicAuthUser?: string;
   basicAuthPassword?: string;
+  recaptchaSecretKey?: string;
 } & BasicAuthConfig;
 
 function readConfig(): ServerConfig & typeof sharedConfig {
@@ -52,6 +53,7 @@ function readConfig(): ServerConfig & typeof sharedConfig {
     googleSheetsClientId: process.env.TOOLPAD_DATASOURCE_GOOGLESHEETS_CLIENT_ID,
     googleSheetsClientSecret: process.env.TOOLPAD_DATASOURCE_GOOGLESHEETS_CLIENT_SECRET,
     externalUrl: process.env.TOOLPAD_EXTERNAL_URL || `http://localhost:${process.env.PORT || 3000}`,
+    recaptchaSecretKey: process.env.TOOLPAD_RECAPTCHA_SECRET_KEY,
     encryptionKeys,
   };
 }

packages/toolpad-app/src/server/data.ts

@@ -10,7 +10,8 @@ import { decryptSecret, encryptSecret } from './secrets';
 import applyTransform from './applyTransform';
 import { excludeFields } from '../utils/prisma';
 import { getAppTemplateDom } from './appTemplateDoms/doms';
-import { validateRecaptchaToken } from '../utils/recaptcha';
+import { validateRecaptchaToken } from './validateRecaptchaToken';
+import config from './config';
 
 const SELECT_RELEASE_META = excludeFields(prisma.Prisma.ReleaseScalarFieldEnum, ['snapshot']);
 const SELECT_APP_META = excludeFields(prisma.Prisma.AppScalarFieldEnum, ['dom']);
@@ -197,7 +198,7 @@ export type CreateAppOptions = {
 export async function createApp(name: string, opts: CreateAppOptions = {}): Promise<prisma.App> {
   const { from } = opts;
 
-  const recaptchaSecretKey = process.env.TOOLPAD_RECAPTCHA_SECRET_KEY;
+  const recaptchaSecretKey = config.recaptchaSecretKey;
   if (recaptchaSecretKey) {
     const isRecaptchaTokenValid = await validateRecaptchaToken(
       recaptchaSecretKey,

packages/toolpad-app/src/server/validateRecaptchaToken.ts

@@ -0,0 +1,22 @@
+const SITE_VERIFY_URL = 'https://www.google.com/recaptcha/api/siteverify';
+const SCORE_THRESHOLD = 0.5;
+
+export const validateRecaptchaToken = async (
+  secretKey: string,
+  token: string,
+): Promise<boolean> => {
+  const siteVerifyUrl = new URL(SITE_VERIFY_URL);
+  siteVerifyUrl.searchParams.set('secret', secretKey);
+  siteVerifyUrl.searchParams.set('response', token);
+
+  const recaptchaResponse = await fetch(siteVerifyUrl, {
+    method: 'POST',
+  });
+
+  const { success, score } = await recaptchaResponse.json();
+  if (!success || score < SCORE_THRESHOLD) {
+    return false;
+  }
+
+  return true;
+};

packages/toolpad-app/src/toolpad/Home/index.tsx

@@ -54,7 +54,6 @@ import { ConfirmDialog } from '../../components/SystemDialogs';
 import config from '../../config';
 import { AppTemplateId } from '../../types';
 import { errorFrom } from '../../utils/errors';
-import { getRecaptchaToken } from '../../utils/recaptcha';
 
 export const APP_TEMPLATE_OPTIONS = {
   blank: {
@@ -112,7 +111,10 @@ function CreateAppDialog({ onClose, ...props }: CreateAppDialogProps) {
 
             let recaptchaToken;
             if (config.recaptchaSiteKey) {
-              recaptchaToken = await getRecaptchaToken(config.recaptchaSiteKey);
+              await new Promise<void>((resolve) => grecaptcha.ready(resolve));
+              recaptchaToken = await grecaptcha.execute(config.recaptchaSiteKey, {
+                action: 'submit',
+              });
             }
 
             const appDom = dom.trim() ? JSON.parse(dom) : null;