From 687b56f18e66c2b472cff237c13965da65246f58 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Fri, 28 Jun 2024 12:54:32 +0300
Subject: [PATCH] Merge pull request #19141 from
 overleaf/ii-add-email-account-settings

[web] Reset recaptcha every time

GitOrigin-RevId: 6db3571ad6dad3611c748a2d92dce47002a16a77
---
 .../settings/components/emails/add-email.tsx  |  4 +-
 .../emails/add-secondary-email-prompt.tsx     |  2 +-
 .../js/shared/components/recaptcha-2.tsx      | 20 ++++++----
 .../frontend/js/shared/hooks/use-recaptcha.ts | 13 +++++--
 .../shared/hooks/use-recaptcha.spec.tsx       | 37 +++++++++++++++++++
 5 files changed, 62 insertions(+), 14 deletions(-)
 create mode 100644 services/web/test/frontend/shared/hooks/use-recaptcha.spec.tsx

diff --git a/services/web/frontend/js/features/settings/components/emails/add-email.tsx b/services/web/frontend/js/features/settings/components/emails/add-email.tsx
index c7d64e7398..a5b98ba196 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email.tsx
@@ -151,7 +151,7 @@ function AddEmail() {
     return (
       <form>
         <Layout isError={isError} error={error}>
-          <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
+          <ReCaptcha2 page="addEmail" recaptchaRef={recaptchaRef} />
           <OLCol lg={8}>
             <Cell>
               {InputComponent}
@@ -176,7 +176,7 @@ function AddEmail() {
   return (
     <form>
       <Layout isError={isError} error={error}>
-        <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
+        <ReCaptcha2 page="addEmail" recaptchaRef={recaptchaRef} />
         <OLCol lg={8}>
           <Cell>
             {InputComponent}
diff --git a/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx b/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx
index f76f3333e6..79d97265e6 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-secondary-email-prompt.tsx
@@ -80,7 +80,7 @@ export function AddSecondaryEmailPrompt() {
     <>
       <Interstitial showLogo title={t('add_a_recovery_email_address')}>
         <form className="add-secondary-email" onSubmit={handleSubmit}>
-          <ReCaptcha2 page="addEmail" ref={recaptchaRef} />
+          <ReCaptcha2 page="addEmail" recaptchaRef={recaptchaRef} />
           <p>{t('keep_your_account_safe_add_another_email')}</p>
 
           <EmailInput
diff --git a/services/web/frontend/js/shared/components/recaptcha-2.tsx b/services/web/frontend/js/shared/components/recaptcha-2.tsx
index 90c129b38a..a587b88cad 100644
--- a/services/web/frontend/js/shared/components/recaptcha-2.tsx
+++ b/services/web/frontend/js/shared/components/recaptcha-2.tsx
@@ -1,14 +1,18 @@
-import { forwardRef } from 'react'
 import ReCAPTCHA from 'react-google-recaptcha'
 import getMeta from '@/utils/meta'
 import { ExposedSettings } from '../../../../types/exposed-settings'
 
-type Page = keyof ExposedSettings['recaptchaDisabled']
+interface ReCaptcha2Props
+  extends Pick<React.ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
+  page: keyof ExposedSettings['recaptchaDisabled']
+  recaptchaRef: React.LegacyRef<ReCAPTCHA>
+}
 
-export const ReCaptcha2 = forwardRef<
-  ReCAPTCHA,
-  { page: Page; onChange?: (token: string | null) => void }
->(function ReCaptcha2({ page: site, onChange }, ref) {
+export function ReCaptcha2({
+  page: site,
+  onChange,
+  recaptchaRef,
+}: ReCaptcha2Props) {
   const { recaptchaSiteKey, recaptchaDisabled } = getMeta('ol-ExposedSettings')
 
   if (!recaptchaSiteKey) {
@@ -19,11 +23,11 @@ export const ReCaptcha2 = forwardRef<
   }
   return (
     <ReCAPTCHA
-      ref={ref}
+      ref={recaptchaRef}
       size="invisible"
       sitekey={recaptchaSiteKey}
       onChange={onChange}
       badge="inline"
     />
   )
-})
+}
diff --git a/services/web/frontend/js/shared/hooks/use-recaptcha.ts b/services/web/frontend/js/shared/hooks/use-recaptcha.ts
index 93a13cbed6..3b3fe2dce7 100644
--- a/services/web/frontend/js/shared/hooks/use-recaptcha.ts
+++ b/services/web/frontend/js/shared/hooks/use-recaptcha.ts
@@ -1,13 +1,20 @@
-import { LegacyRef, createRef } from 'react'
+import { useRef } from 'react'
 import ReCAPTCHA from 'react-google-recaptcha'
 
 export const useRecaptcha = () => {
-  const ref: LegacyRef<ReCAPTCHA> = createRef<ReCAPTCHA>()
-  const getReCaptchaToken = async (): Promise<string | null> => {
+  const ref = useRef<ReCAPTCHA | null>(null)
+
+  const getReCaptchaToken = async (): Promise<
+    ReturnType<ReCAPTCHA['executeAsync']>
+  > => {
     if (!ref.current) {
       return null
     }
+    // Reset the reCAPTCHA before each submission.
+    // The reCAPTCHA token is meant to be used once per validation
+    ref.current.reset()
     return await ref.current.executeAsync()
   }
+
   return { ref, getReCaptchaToken }
 }
diff --git a/services/web/test/frontend/shared/hooks/use-recaptcha.spec.tsx b/services/web/test/frontend/shared/hooks/use-recaptcha.spec.tsx
new file mode 100644
index 0000000000..acc3f09465
--- /dev/null
+++ b/services/web/test/frontend/shared/hooks/use-recaptcha.spec.tsx
@@ -0,0 +1,37 @@
+import { useRecaptcha } from '@/shared/hooks/use-recaptcha'
+import * as ReactGoogleRecaptcha from 'react-google-recaptcha'
+
+const ReCaptcha = () => {
+  const { ref: recaptchaRef, getReCaptchaToken } = useRecaptcha()
+
+  const handleClick = async () => {
+    await getReCaptchaToken()
+  }
+
+  return (
+    <>
+      <ReactGoogleRecaptcha.ReCAPTCHA
+        ref={recaptchaRef}
+        size="invisible"
+        sitekey="123456"
+        badge="inline"
+      />
+      <button onClick={handleClick}>Click</button>
+    </>
+  )
+}
+
+describe('useRecaptcha', function () {
+  it('should reset the captcha', function () {
+    cy.spy(ReactGoogleRecaptcha.ReCAPTCHA.prototype, 'reset').as('resetSpy')
+    cy.spy(ReactGoogleRecaptcha.ReCAPTCHA.prototype, 'executeAsync').as(
+      'executeAsyncSpy'
+    )
+
+    cy.mount(<ReCaptcha />)
+
+    cy.findByRole('button', { name: /click/i }).click()
+    cy.get('@resetSpy').should('have.been.calledOnce')
+    cy.get('@executeAsyncSpy').should('have.been.calledOnce')
+  })
+})