Merge pull request #373 from labzero/develop

Merge to master

Author: JeffreyATW

.env.sample

@@ -17,6 +17,10 @@ GOOGLE_SERVER_APIKEY=
 # Google Analytics ID
 GOOGLE_MEASUREMENT_ID=
 
+# ReCAPTCHA
+RECAPTCHA_SITE_KEY=
+RECAPTCHA_SECRET_KEY=
+
 # JSON Web Token secret to encrypt ID token cookie
 JWT_SECRET=
 

README.md

@@ -46,6 +46,10 @@ For `GOOGLE_*` env variables:
 - Go back to the Credentials tab and create two API keys - one for the client, and one for the server.
 - On each API key, add `http://lunch.pink`, `https://lunch.pink`, `http://*.lunch.pink`, and `https://*.lunch.pink` as HTTP referrers.
 
+#### reCAPTCHA
+
+For `RECAPTCHA_*` env variables, [sign up for reCAPTCHA](https://www.google.com/recaptcha) and generate a site and server key.
+
 #### Database
 
 Set up a PostgreSQL database and enter the admin credentials into `.env`. If you want to use another database dialect, change it in `database.js`.

package.json

@@ -61,6 +61,7 @@
     "react-bootstrap": "^2.7.0",
     "react-dom": "npm:@preact/compat@*",
     "react-flip-toolkit": "^7.0.17",
+    "react-google-recaptcha": "^3.1.0",
     "react-icons": "^4.7.1",
     "react-redux": "^8.0.5",
     "react-scroll": "^1.8.9",
@@ -112,6 +113,7 @@
     "@types/react-autosuggest": "^10.1.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-geosuggest": "^2.7.13",
+    "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-scroll": "^1.8.7",
     "@types/serialize-javascript": "^5.0.2",
     "@types/sinon": "^10.0.15",
@@ -236,4 +238,4 @@
     "prepare": "husky install"
   },
   "packageManager": "yarn@3.5.1"
-}
+}

src/client.tsx

@@ -69,6 +69,7 @@ const context: AppContext = {
     };
   },
   googleApiKey: window.App.googleApiKey,
+  recaptchaSiteKey: window.App.recaptchaSiteKey,
   // Initialize a new Redux store
   // http://redux.js.org/docs/basics/UsageWithReact.html
   store,

src/components/RestaurantMarker/RestaurantMarker.tsx

@@ -91,6 +91,7 @@ export interface RestaurantMarkerProps extends AppContext {
 const RestaurantMarker = ({ restaurant, ...props }: RestaurantMarkerProps) => {
   const context = {
     googleApiKey: props.googleApiKey,
+    recaptchaSiteKey: props.recaptchaSiteKey,
     insertCss: props.insertCss,
     store: props.store,
     pathname: props.pathname,

src/config.ts

@@ -42,3 +42,4 @@ export const auth = {
   sendgrid: { secret: process.env.SENDGRID_API_KEY },
 };
 export const googleApiKey = process.env.GOOGLE_CLIENT_APIKEY;
+export const recaptchaSiteKey = process.env.RECAPTCHA_SITE_KEY;

src/interfaces.ts

@@ -620,6 +620,7 @@ export interface App {
   apiUrl: string;
   state: NonNormalizedState;
   googleApiKey: string;
+  recaptchaSiteKey: string;
   cache?: Cache;
 }
 
@@ -630,6 +631,7 @@ export interface WindowWithApp extends Window {
 export interface AppContext extends ResolveContext {
   insertCss: InsertCSS;
   googleApiKey: string;
+  recaptchaSiteKey: string;
   query?: URLSearchParams;
   store: EnhancedStore<State, Action>;
   fetch: FetchWithCache;

src/middlewares/invitation.ts

@@ -1,4 +1,5 @@
 import { Request, Router } from "express";
+import fetch from "node-fetch";
 import { bsHost } from "../config";
 import generateToken from "../helpers/generateToken";
 import generateUrl from "../helpers/generateUrl";
@@ -69,11 +70,31 @@ Add them here: ${generateUrl(
       }
     })
     .post("/", async (req, res, next) => {
-      const { email } = req.body;
+      const { email, "g-recaptcha-response": clientRecaptchaResponse } =
+        req.body;
 
       try {
-        if (!email) {
-          req.flash("error", "Email is required.");
+        if (!email || !clientRecaptchaResponse) {
+          if (!email) {
+            req.flash("error", "Email is required.");
+          }
+          if (!clientRecaptchaResponse) {
+            req.flash("error", "No reCAPTCHA response.");
+          }
+          return req.session.save(() => {
+            res.redirect("/invitation/new");
+          });
+        }
+
+        const recaptchaResponse = await fetch(
+          `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${clientRecaptchaResponse}`,
+          {
+            method: "POST",
+          }
+        ).then((response) => response.json());
+
+        if (!recaptchaResponse.success) {
+          req.flash("error", "Bad reCAPTCHA response. Please try again.");
           return req.session.save(() => {
             res.redirect("/invitation/new");
           });

src/middlewares/tests/invitation.test.ts

@@ -25,7 +25,13 @@ describe("middlewares/invitation", () => {
   let UserMock: SequelizeMockObject;
   let flashSpy: SinonSpy;
 
+  let requestParams: Record<string, string>;
+
   beforeEach(() => {
+    requestParams = {
+      email: "jeffrey@labzero.com",
+      "g-recaptcha-response": "12345",
+    };
     InvitationMock = dbMock.define("invitation", {});
     RoleMock = dbMock.define("role", {});
     UserMock = dbMock.define("user", {});
@@ -43,6 +49,13 @@ describe("middlewares/invitation", () => {
             sendMail: sendMailSpy,
           },
         }),
+        "node-fetch": mockEsmodule({
+          default: async () => ({
+            json: async () => ({
+              success: true,
+            }),
+          }),
+        }),
         ...deps,
       }).default;
 
@@ -83,7 +96,7 @@ describe("middlewares/invitation", () => {
 
         request(app)
           .post("/")
-          .send({ email: "jeffrey@labzero.com" })
+          .send(requestParams)
           .then((r) => {
             response = r;
             done();
@@ -118,7 +131,7 @@ describe("middlewares/invitation", () => {
 
         request(app)
           .post("/")
-          .send({ email: "jeffrey@labzero.com" })
+          .send(requestParams)
           .then((r) => {
             response = r;
             done();
@@ -151,7 +164,7 @@ describe("middlewares/invitation", () => {
           })
         );
 
-        return request(app).post("/").send({ email: "jeffrey@labzero.com" });
+        return request(app).post("/").send(requestParams);
       });
 
       it("sends confirmation", () => {

src/routes/helpers/submitRecaptchaForm.ts

@@ -0,0 +1,26 @@
+const submitRecaptchaForm = (
+  action: string,
+  formData: {
+    email: string;
+    "g-recaptcha-response": string;
+  }
+) => {
+  const newForm = document.createElement("form");
+  newForm.method = "POST";
+  newForm.action = action;
+
+  // Add all original form data
+  Object.entries(formData).forEach(([key, value]) => {
+    const input = document.createElement("input");
+    input.type = "hidden";
+    input.name = key;
+    input.value = value;
+    newForm.appendChild(input);
+  });
+
+  document.body.appendChild(newForm);
+  newForm.submit();
+  document.body.removeChild(newForm);
+};
+
+export default submitRecaptchaForm;