fix: Skip reCAPTCHA and a console warning if key is missing

Don't block developers if they don't have a reCAPTCHA key; notify them in the console to add one before going to production.

Author: YasharF

.env.example

@@ -18,7 +18,7 @@ SMTP_PASSWORD=hdgfadsfahg--i.e.Sendgrid-apikey---hdgfadsfahg
 SMTP_HOST=smtp.sendgrid.net
 
 # Needed for proper rendering of the Contact Form
-RECAPTCHA_SITE_KEY=JKHGxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxJG
+RECAPTCHA_SITE_KEY=
 RECAPTCHA_SECRET_KEY=87ehxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx3298
 
 #

README.md

@@ -153,10 +153,10 @@ _What to get and configure:_
   - For user workflows for reset password and verify email
   - For contact form processing
 - reCAPTCHA
-  - For contact form submission
+  - For contact form submission, but you can skip it during your development
 - OAuth for social logins (Sign in with / Login with)
   - Depending on your application need, obtain keys from Google, Facebook, X (Twitter), LinkedIn, Twitch, GitHub. You don't have to obtain valid keys for any provider that you don't need. Just remove the buttons and links in the login and account pug views before your demo.
-- API keys for service providers in the API Examples if you are planning to use them.
+- API keys for service providers that you need in the API Examples if you are planning to use them.
 
 - MongoDB Atlas
 

controllers/contact.js

@@ -18,9 +18,13 @@ async function validateReCAPTCHA(token) {
 exports.getContact = (req, res) => {
   const unknownUser = !req.user;
 
+  if (!process.env.RECAPTCHA_SITE_KEY) {
+    console.warn('\x1b[33mWARNING: RECAPTCHA_SITE_KEY is missing. Add a key to your .env, env variable, or use a WebApp Firewall with an interactive challenge before going to production.\x1b[0m');
+  }
+
   res.render('contact', {
     title: 'Contact',
-    sitekey: process.env.RECAPTCHA_SITE_KEY,
+    sitekey: process.env.RECAPTCHA_SITE_KEY || null, // Pass null if the key is missing
     unknownUser,
   });
 };
@@ -39,14 +43,21 @@ exports.postContact = async (req, res, next) => {
   }
   if (validator.isEmpty(req.body.message)) validationErrors.push({ msg: 'Please enter your message.' });
 
-  try {
-    const reCAPTCHAResponse = await validateReCAPTCHA(req.body['g-recaptcha-response']);
-    if (!reCAPTCHAResponse.data.success) {
-      validationErrors.push({ msg: 'reCAPTCHA validation failed.' });
+  if (!process.env.RECAPTCHA_SITE_KEY) {
+    console.warn('\x1b[33mWARNING: RECAPTCHA_SITE_KEY is missing. Add a key to your .env or use a WebApp Firewall for CAPTCHA validation before going to production.\x1b[0m');
+    validationErrors.push({ msg: 'Server configuration error. Please try again later.' });
+  } else if (!validator.isEmpty(req.body['g-recaptcha-response'])) {
+    try {
+      const reCAPTCHAResponse = await validateReCAPTCHA(req.body['g-recaptcha-response']);
+      if (!reCAPTCHAResponse.success) {
+        validationErrors.push({ msg: 'reCAPTCHA validation failed.' });
+      }
+    } catch (error) {
+      console.error('Error validating reCAPTCHA:', error);
+      validationErrors.push({ msg: 'Error validating reCAPTCHA. Please try again.' });
     }
-  } catch (error) {
-    console.error('Error validating reCAPTCHA:', error);
-    validationErrors.push({ msg: 'Error validating reCAPTCHA. Please try again.' });
+  } else {
+    validationErrors.push({ msg: 'reCAPTCHA response was missing.' });
   }
 
   if (validationErrors.length) {

views/contact.pug

@@ -1,13 +1,14 @@
 extends layout
 
 block head
-  script(src='https://www.google.com/recaptcha/api.js', async='', defer='')
+  if sitekey
+    script(src='https://www.google.com/recaptcha/api.js', async='', defer='')
 
 block content
   .pb-2.mt-2.mb-4.border-bottom
     h3 Contact Form
 
-  form(method='POST')
+  form#contactForm(method='POST')
     input(type='hidden', name='_csrf', value=_csrf)
     if (unknownUser)
       .form-group.row.mb-3
@@ -24,8 +25,20 @@ block content
         textarea#message.form-control(name='message', rows='7', autofocus=(!unknownUser).toString(), required)
     .form-group
       .offset-md-2.col-md-8.p-1
-        .g-recaptcha(data-sitekey=sitekey)
+        if sitekey
+          #recaptchaWidget.g-recaptcha(data-sitekey=sitekey)
+          span#recaptchaError.text-danger.d-none.mt-2 Please complete the reCAPTCHA before submitting the form.
         br
-        button.col-md-2.btn.btn-primary(type='submit')
+        button#submitBtn.col-md-2.btn.btn-primary(type='submit')
           i.far.fa-envelope.fa-sm.iconpadding
           | Send
+  script.
+    document.getElementById('contactForm').addEventListener('submit', function (event) {
+      const recaptchaError = document.getElementById('recaptchaError');
+      if (typeof grecaptcha !== 'undefined' && !grecaptcha.getResponse()) {
+        event.preventDefault(); // Prevent form submission
+        recaptchaError.classList.remove('d-none');
+      } else {
+        recaptchaError.classList.add('d-none');
+      }
+    });