feat(recaptcha): add recaptcha to forgot password and register forms

Author: Abdellatif El Mizeb

packages/api-client/src/api/requestPasswordResetEmail/index.ts

@@ -1,5 +1,7 @@
 import { FetchResult } from '@apollo/client/core';
 import { CustomQuery, Logger } from '@vue-storefront/core';
+import { GraphQLError } from 'graphql';
+import recaptchaValidator from '../../helpers/recaptcha/recaptchaValidator';
 import requestPasswordResetEmailMutation from './requestPasswordResetEmail';
 import {
   RequestPasswordResetEmailMutation,
@@ -12,10 +14,28 @@ export default async (
   input: RequestPasswordResetEmailMutationVariables,
   customQuery: CustomQuery = { requestPasswordResetEmail: 'requestPasswordResetEmail' },
 ): Promise<FetchResult<RequestPasswordResetEmailMutation>> => {
+  const {
+    recaptchaToken, ...variables
+  } = input;
+
+  if (context.config.recaptcha.secretkey) {
+    /**
+     * recaptcha token verification
+     */
+    const response = await recaptchaValidator(context, recaptchaToken);
+
+    if (!response.success) {
+      return {
+        errors: [new GraphQLError('Invalid token')],
+        data: null,
+      };
+    }
+  }
+
   const { requestPasswordResetEmail } = context.extendQuery(customQuery, {
     requestPasswordResetEmail: {
       query: requestPasswordResetEmailMutation,
-      variables: { ...input },
+      variables: { ...variables },
     },
   });
 

packages/api-client/src/types/GraphQL.ts

@@ -7316,6 +7316,7 @@ export type RemoveProductsFromWishlistMutation = { removeProductsFromWishlist?:
 
 export type RequestPasswordResetEmailMutationVariables = Exact<{
   email: Scalars['String'];
+  recaptchaToken?: Scalars['String'];
 }>;
 
 

packages/composables/src/composables/useForgotPassword/index.ts

@@ -9,7 +9,7 @@ const factoryParams: UseForgotPasswordFactoryParams<any> = {
   resetPassword: async (context: Context, params) => {
     Logger.debug('[Magento]: Reset user password', { params });
 
-    const { data } = await context.$magento.api.requestPasswordResetEmail({ email: params.email });
+    const { data } = await context.$magento.api.requestPasswordResetEmail({ email: params.email, recaptchaToken: params.recaptchaToken });
 
     Logger.debug('[Result]:', { data });
 

packages/composables/src/factories/useForgotPasswordFactory.ts

@@ -19,6 +19,7 @@ interface SetNewPasswordParams {
 
 interface ResetPasswordParams {
   email: string;
+  recaptchaToken?: string;
 }
 
 export interface UseForgotPasswordFactoryParams<RESULT> extends FactoryParams {

packages/composables/src/types/composables.ts

@@ -203,7 +203,7 @@ export interface UseForgotPassword<RESULT> {
 
   setNew(params: ComposableFunctionArgs<{ tokenValue: string, newPassword: string, email: string }>): Promise<void>;
 
-  request(params: ComposableFunctionArgs<{ email: string }>): Promise<void>;
+  request(params: ComposableFunctionArgs<{ email: string, recaptchaToken?: string }>): Promise<void>;
 }
 
 export interface UseRelatedProducts<PRODUCTS, RELATED_PRODUCT_SEARCH_PARAMS, API extends PlatformApi = any> extends Composable<API> {

packages/theme/components/LoginModal.vue

@@ -126,6 +126,7 @@
                 class="form__element"
               />
             </ValidationProvider>
+            <recaptcha v-if="isRecaptcha" />
             <div v-if="forgotPasswordError.request">
               {{ $t('It was not possible to request a new password, please check the entered email address.') }}
             </div>
@@ -252,6 +253,7 @@
                 class="form__element"
               />
             </ValidationProvider>
+            <recaptcha v-if="isRecaptcha" />
             <div v-if="error.register">
               {{ error.register }}
             </div>
@@ -377,9 +379,6 @@ export default defineComponent({
       if (isLoginModalOpen) {
         form.value = {};
         resetErrorValues();
-        if (isRecaptcha.value) {
-          $recaptcha.init();
-        }
       }
     });
 
@@ -402,8 +401,14 @@ export default defineComponent({
 
     const handleForm = (fn) => async () => {
       resetErrorValues();
+
+      if (isRecaptcha.value) {
+        $recaptcha.init();
+      }
+
       if (isRecaptcha.value) {
         const recaptchaToken = await $recaptcha.getResponse();
+        form.value.recaptchaInstance = $recaptcha;
 
         await fn({
           user: {
@@ -441,12 +446,28 @@ export default defineComponent({
 
     const handleForgotten = async () => {
       userEmail.value = form.value.username;
-      await request({ email: userEmail.value });
+
+      if (isRecaptcha.value) {
+        $recaptcha.init();
+      }
+
+      if (isRecaptcha.value) {
+        const recaptchaToken = await $recaptcha.getResponse();
+
+        await request({ email: userEmail.value, recaptchaToken });
+      } else {
+        await request({ email: userEmail.value });
+      }
 
       if (!forgotPasswordError.value.request) {
         isThankYouAfterForgotten.value = true;
         isForgotten.value = false;
       }
+
+      if (isRecaptcha.value) {
+        // reset recaptcha
+        $recaptcha.reset();
+      }
     };
 
     return {