From 403db86e8c7d1049247947b782b444aed5aa2c3e Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 10:44:18 +0200
Subject: [PATCH 01/12] feat: add recaptcha

---
 README.md                        | 13 +++++
 package.json                     |  2 +-
 public/index.html                |  2 +
 src/components/Root.tsx          |  7 ++-
 src/components/SignIn.tsx        | 14 ++++--
 src/components/SignUp.tsx        |  8 ++-
 src/config/constants.ts          |  2 +
 src/context/RecaptchaContext.tsx | 83 ++++++++++++++++++++++++++++++++
 yarn.lock                        | 19 +++++++-
 9 files changed, 141 insertions(+), 9 deletions(-)
 create mode 100644 src/context/RecaptchaContext.tsx

diff --git a/README.md b/README.md
index 3c5cf565..eadb2c11 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,14 @@
 # graasp-auth
+
+Create an `.env.local` file with:
+
+```sh
+REACT_APP_API_HOST=http://localhost:3000
+PORT=3001
+REACT_APP_DOMAIN=localhost:3001
+REACT_APP_SHOW_NOTIFICATIONS=true
+
+REACT_APP_RECAPTCHA_SITE_KEY=
+```
+
+Generate your recaptcha key from [the reCAPTCHA admin console](https://www.google.com/recaptcha/admin/create)
diff --git a/package.json b/package.json
index 9dd4bcdf..17f2ef0e 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
     "@graasp/query-client": "0.2.0",
-    "@graasp/sdk": "0.4.1",
+    "@graasp/sdk": "github:graasp/graasp-sdk#122-add-actiontype-for-recaptcha",
     "@graasp/translations": "1.8.0",
     "@graasp/ui": "0.11.1",
     "@mui/icons-material": "5.11.0",
diff --git a/public/index.html b/public/index.html
index 48f74c86..36ac050e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,6 +27,8 @@
       href="%PUBLIC_URL%/favicon-16x16.png"
     />
 
+    <script src="https://www.google.com/recaptcha/api.js?render=%REACT_APP_RECAPTCHA_SITE_KEY%"></script>
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 7044934a..620840b2 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -6,13 +6,14 @@ import { theme } from '@graasp/ui';
 
 import { ThemeProvider } from '@mui/material/styles';
 
-import { SHOW_NOTIFICATIONS } from '../config/constants';
+import { RECAPTCHA_SITE_KEY, SHOW_NOTIFICATIONS } from '../config/constants';
 import i18nConfig from '../config/i18n';
 import {
   QueryClientProvider,
   ReactQueryDevtools,
   queryClient,
 } from '../config/queryClient';
+import { RecaptchaProvider } from '../context/RecaptchaContext';
 import App from './App';
 
 const Root = () => (
@@ -20,7 +21,9 @@ const Root = () => (
     <I18nextProvider i18n={i18nConfig}>
       <ThemeProvider theme={theme}>
         {SHOW_NOTIFICATIONS && <ToastContainer />}
-        <App />
+        <RecaptchaProvider siteKey={RECAPTCHA_SITE_KEY}>
+          <App />
+        </RecaptchaProvider>
       </ThemeProvider>
     </I18nextProvider>
     {process.env.NODE_ENV === 'development' && <ReactQueryDevtools />}
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index 8a08a937..6d0c9f0e 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -2,6 +2,7 @@ import React, { FC, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
+import { RecaptchaActionType } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
@@ -21,6 +22,7 @@ import {
   SIGN_IN_BUTTON_ID,
   SIGN_IN_HEADER_ID,
 } from '../config/selectors';
+import { useRecaptcha } from '../context/RecaptchaContext';
 import { SIGN_IN_METHODS } from '../types/signInMethod';
 import { emailValidator, passwordValidator } from '../utils/validation';
 import EmailInput from './EmailInput';
@@ -41,6 +43,7 @@ const {
 
 const SignIn: FC = () => {
   const { t } = useAuthTranslation();
+  const { executeCaptcha } = useRecaptcha();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -53,7 +56,7 @@ const SignIn: FC = () => {
   const { mutateAsync: signIn, isSuccess: signInSuccess } = useMutation<
     unknown,
     unknown,
-    { email: string }
+    { email: string; token: string }
   >(MUTATION_KEYS.SIGN_IN);
   const {
     mutateAsync: signInWithPassword,
@@ -61,7 +64,7 @@ const SignIn: FC = () => {
   } = useMutation<
     { data: { resource: string } },
     unknown,
-    { email: string; password: string }
+    { email: string; password: string; token: string }
   >(MUTATION_KEYS.SIGN_IN_WITH_PASSWORD);
 
   const handleSignIn = async () => {
@@ -70,7 +73,8 @@ const SignIn: FC = () => {
     if (checkingEmail) {
       setShouldValidate(true);
     } else {
-      await signIn({ email: lowercaseEmail });
+      const token = await executeCaptcha(RecaptchaActionType.SignIn);
+      await signIn({ email: lowercaseEmail, token });
       setSuccessView(true);
     }
   };
@@ -85,9 +89,13 @@ const SignIn: FC = () => {
         setPasswordError(checkingPassword);
       }
     } else {
+      const token = await executeCaptcha(
+        RecaptchaActionType.SignInWithPassword,
+      );
       const { data } = await signInWithPassword({
         email: lowercaseEmail,
         password,
+        token,
       });
       if (data.resource) {
         window.location.href = data.resource;
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index b4c43295..b2cd1bac 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -2,6 +2,7 @@ import { ChangeEventHandler, useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
+import { RecaptchaActionType } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
 import { Button, Loader } from '@graasp/ui';
 
@@ -17,6 +18,7 @@ import {
   SIGN_UP_BUTTON_ID,
   SIGN_UP_HEADER_ID,
 } from '../config/selectors';
+import { useRecaptcha } from '../context/RecaptchaContext';
 import { emailValidator, nameValidator } from '../utils/validation';
 import EmailInput from './EmailInput';
 import FullscreenContainer from './FullscreenContainer';
@@ -29,6 +31,7 @@ const { SIGN_IN_LINK_TEXT, SIGN_UP_BUTTON, SIGN_UP_HEADER, NAME_FIELD_LABEL } =
 
 const SignUp = () => {
   const { t } = useAuthTranslation();
+  const { executeCaptcha } = useRecaptcha();
 
   const [email, setEmail] = useState<string>('');
   const [name, setName] = useState<string>('');
@@ -40,7 +43,7 @@ const SignUp = () => {
   const { mutateAsync: signUp, isSuccess: signUpSuccess } = useMutation<
     unknown,
     unknown,
-    { email: string; name: string }
+    { email: string; name: string; token: string }
   >(MUTATION_KEYS.SIGN_UP);
   const [searchParams] = useSearchParams();
 
@@ -79,7 +82,8 @@ const SignUp = () => {
       setNameError(checkingUsername);
       setShouldValidate(true);
     } else {
-      await signUp({ name, email: lowercaseEmail });
+      const token = await executeCaptcha(RecaptchaActionType.SignUp);
+      await signUp({ name, email: lowercaseEmail, token });
       setSuccessView(true);
     }
   };
diff --git a/src/config/constants.ts b/src/config/constants.ts
index deff16ad..474ddc11 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -19,6 +19,8 @@ export const GRAASP_COMPOSE_HOST =
 export const AUTHENTICATION_HOST =
   process.env.REACT_APP_AUTHENTICATION_HOST || 'http://localhost:3001';
 
+export const RECAPTCHA_SITE_KEY = process.env.REACT_APP_RECAPTCHA_SITE_KEY;
+
 export const NAME_MAXIMUM_LENGTH = 300;
 export const NAME_MINIMUM_LENGTH = 2;
 
diff --git a/src/context/RecaptchaContext.tsx b/src/context/RecaptchaContext.tsx
new file mode 100644
index 00000000..373126e3
--- /dev/null
+++ b/src/context/RecaptchaContext.tsx
@@ -0,0 +1,83 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+declare global {
+  interface Window {
+    grecaptcha: {
+      execute: (
+        siteKey: string,
+        { action }: { action: string },
+      ) => Promise<string>;
+    };
+  }
+}
+
+const RECAPTCHA_SCRIPT_ID = 'recaptcha-key';
+
+type RecaptchaContextType = {
+  executeCaptcha: (action: string) => Promise<string>;
+  isReady: boolean;
+};
+
+const RecaptchaContext = createContext<RecaptchaContextType>({
+  executeCaptcha: () => Promise.resolve(''),
+  isReady: false,
+});
+
+type Props = {
+  children: JSX.Element;
+  siteKey: string;
+};
+
+export const RecaptchaProvider = ({ children, siteKey }: Props) => {
+  const [isReady, setIsReady] = useState(false);
+
+  /**
+   * Extra security measure to check if the script has
+   * already been included in the DOM
+   */
+  const scriptAlreadyExists = () =>
+    document.querySelector(`script#${RECAPTCHA_SCRIPT_ID}`) !== null;
+
+  /**
+   * Append the script to the document.
+   * Whenever the script has been loaded it will
+   * set the isLoaded state to true.
+   */
+  const addRecaptchaScript = () => {
+    const script = document.createElement('script');
+    script.id = RECAPTCHA_SCRIPT_ID;
+    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+    script.type = 'text/javascript';
+    script.async = true;
+    script.defer = true;
+    script.onload = () => setIsReady(true);
+    document.body.append(script);
+  };
+
+  /**
+   * Runs first time when component is mounted
+   * and adds the script to the document.
+   */
+  useEffect(
+    () => {
+      if (!scriptAlreadyExists()) {
+        addRecaptchaScript();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const executeCaptcha = (action: string) => {
+    return window.grecaptcha.execute(siteKey, { action });
+  };
+
+  const value = { executeCaptcha, isReady };
+  return (
+    <RecaptchaContext.Provider value={value}>
+      {children}
+    </RecaptchaContext.Provider>
+  );
+};
+
+export const useRecaptcha = () => useContext(RecaptchaContext);
diff --git a/yarn.lock b/yarn.lock
index c120f2b3..a8652c8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2314,6 +2314,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/sdk@github:graasp/graasp-sdk#122-add-actiontype-for-recaptcha":
+  version: 0.9.3
+  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=04af6ccec3fe3bbbde497ddac42741d2f3702d6d"
+  dependencies:
+    "@fastify/secure-session": 5.3.0
+    aws-sdk: 2.1310.0
+    fastify: 3.29.5
+    fluent-json-schema: 3.1.0
+    immutable: 4.2.4
+    js-cookie: 3.0.1
+    qs: 6.11.0
+    slonik: 28.1.1
+    uuid: 9.0.0
+  checksum: 03a1e69dca2ca525b2938b0efbbef9019ba00ee3dbc1fb6c11b5b451f1635655a591fae3c7be13a7fe05b992ed449e61d84b95173a74d881c5ec6b8c20e6a388
+  languageName: node
+  linkType: hard
+
 "@graasp/sdk@npm:0.4.0":
   version: 0.4.0
   resolution: "@graasp/sdk@npm:0.4.0"
@@ -9390,7 +9407,7 @@ __metadata:
     "@emotion/react": 11.10.5
     "@emotion/styled": 11.10.5
     "@graasp/query-client": 0.2.0
-    "@graasp/sdk": 0.4.1
+    "@graasp/sdk": "github:graasp/graasp-sdk#122-add-actiontype-for-recaptcha"
     "@graasp/translations": 1.8.0
     "@graasp/ui": 0.11.1
     "@mui/icons-material": 5.11.0

From c9ad9bd7301071a3ef341fcd5f956e660e50ab35 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 11:03:33 +0200
Subject: [PATCH 02/12] fix: add recaptcha to deploy workflows

---
 .github/workflows/cdelivery-s3-caller.yml    | 1 +
 .github/workflows/cdeployment-s3-caller.yml  | 1 +
 .github/workflows/cintegration-s3-caller.yml | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/cdelivery-s3-caller.yml b/.github/workflows/cdelivery-s3-caller.yml
index c6614a25..11caabda 100644
--- a/.github/workflows/cdelivery-s3-caller.yml
+++ b/.github/workflows/cdelivery-s3-caller.yml
@@ -24,4 +24,5 @@ jobs:
       show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
       graasp-compose-host: ${{ secrets.REACT_APP_GRAASP_COMPOSE_HOST_STAGE }}
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_STAGE }}
+      recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
       domain: ${{ secrets.REACT_APP_DOMAIN_STAGE }}
diff --git a/.github/workflows/cdeployment-s3-caller.yml b/.github/workflows/cdeployment-s3-caller.yml
index 839d880d..ad7b6c33 100644
--- a/.github/workflows/cdeployment-s3-caller.yml
+++ b/.github/workflows/cdeployment-s3-caller.yml
@@ -30,4 +30,5 @@ jobs:
       show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
       graasp-compose-host: ${{ secrets.REACT_APP_GRAASP_COMPOSE_HOST_PROD }}
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_PROD }}
+      recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
       domain: ${{ secrets.REACT_APP_DOMAIN_PROD }}
diff --git a/.github/workflows/cintegration-s3-caller.yml b/.github/workflows/cintegration-s3-caller.yml
index 29274e53..ea69ad99 100644
--- a/.github/workflows/cintegration-s3-caller.yml
+++ b/.github/workflows/cintegration-s3-caller.yml
@@ -15,7 +15,7 @@ jobs:
   graasp-deploy-s3-workflow:
     name: Graasp auth
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3.yml@v1
+    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3.yml@179-include-recaptcha-env-vars-in-workflows
     with:
       build-folder: 'build'
     secrets:
@@ -28,4 +28,5 @@ jobs:
       show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
       graasp-compose-host: ${{ secrets.REACT_APP_GRAASP_COMPOSE_HOST_DEV }}
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_DEV }}
+      recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
       domain: ${{ secrets.REACT_APP_DOMAIN_DEV }}

From 9f5a57c8d424dc70e3bc7dc116e9bda14cce0481 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 11:11:45 +0200
Subject: [PATCH 03/12] fix: script should not be attached programatically

---
 src/context/RecaptchaContext.tsx | 80 ++++++++++++++++----------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/context/RecaptchaContext.tsx b/src/context/RecaptchaContext.tsx
index 373126e3..e4abb3f6 100644
--- a/src/context/RecaptchaContext.tsx
+++ b/src/context/RecaptchaContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext } from 'react';
 
 declare global {
   interface Window {
@@ -11,16 +11,16 @@ declare global {
   }
 }
 
-const RECAPTCHA_SCRIPT_ID = 'recaptcha-key';
+// const RECAPTCHA_SCRIPT_ID = 'recaptcha-key';
 
 type RecaptchaContextType = {
   executeCaptcha: (action: string) => Promise<string>;
-  isReady: boolean;
+  // isReady: boolean;
 };
 
 const RecaptchaContext = createContext<RecaptchaContextType>({
   executeCaptcha: () => Promise.resolve(''),
-  isReady: false,
+  // isReady: false,
 });
 
 type Props = {
@@ -29,50 +29,50 @@ type Props = {
 };
 
 export const RecaptchaProvider = ({ children, siteKey }: Props) => {
-  const [isReady, setIsReady] = useState(false);
+  // const [isReady, setIsReady] = useState(false);
 
-  /**
-   * Extra security measure to check if the script has
-   * already been included in the DOM
-   */
-  const scriptAlreadyExists = () =>
-    document.querySelector(`script#${RECAPTCHA_SCRIPT_ID}`) !== null;
+  // /**
+  //  * Extra security measure to check if the script has
+  //  * already been included in the DOM
+  //  */
+  // const scriptAlreadyExists = () =>
+  //   document.querySelector(`script#${RECAPTCHA_SCRIPT_ID}`) !== null;
 
-  /**
-   * Append the script to the document.
-   * Whenever the script has been loaded it will
-   * set the isLoaded state to true.
-   */
-  const addRecaptchaScript = () => {
-    const script = document.createElement('script');
-    script.id = RECAPTCHA_SCRIPT_ID;
-    script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
-    script.type = 'text/javascript';
-    script.async = true;
-    script.defer = true;
-    script.onload = () => setIsReady(true);
-    document.body.append(script);
-  };
+  // /**
+  //  * Append the script to the document.
+  //  * Whenever the script has been loaded it will
+  //  * set the isLoaded state to true.
+  //  */
+  // const addRecaptchaScript = () => {
+  //   const script = document.createElement('script');
+  //   script.id = RECAPTCHA_SCRIPT_ID;
+  //   script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
+  //   script.type = 'text/javascript';
+  //   script.async = true;
+  //   script.defer = true;
+  //   script.onload = () => setIsReady(true);
+  //   document.body.append(script);
+  // };
 
-  /**
-   * Runs first time when component is mounted
-   * and adds the script to the document.
-   */
-  useEffect(
-    () => {
-      if (!scriptAlreadyExists()) {
-        addRecaptchaScript();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
+  // /**
+  //  * Runs first time when component is mounted
+  //  * and adds the script to the document.
+  //  */
+  // useEffect(
+  //   () => {
+  //     if (!scriptAlreadyExists()) {
+  //       addRecaptchaScript();
+  //     }
+  //   },
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  //   [],
+  // );
 
   const executeCaptcha = (action: string) => {
     return window.grecaptcha.execute(siteKey, { action });
   };
 
-  const value = { executeCaptcha, isReady };
+  const value = { executeCaptcha };
   return (
     <RecaptchaContext.Provider value={value}>
       {children}

From 0ccfb1598fae5f0b97520eafe491bb6e9a284666 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 11:55:40 +0200
Subject: [PATCH 04/12] fix: promissified

---
 src/components/SignIn.tsx        |  8 ++---
 src/components/SignUp.tsx        |  4 +--
 src/context/RecaptchaContext.tsx | 51 +++++---------------------------
 3 files changed, 14 insertions(+), 49 deletions(-)

diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index 6d0c9f0e..7db83127 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -56,7 +56,7 @@ const SignIn: FC = () => {
   const { mutateAsync: signIn, isSuccess: signInSuccess } = useMutation<
     unknown,
     unknown,
-    { email: string; token: string }
+    { email: string; captcha: string }
   >(MUTATION_KEYS.SIGN_IN);
   const {
     mutateAsync: signInWithPassword,
@@ -64,7 +64,7 @@ const SignIn: FC = () => {
   } = useMutation<
     { data: { resource: string } },
     unknown,
-    { email: string; password: string; token: string }
+    { email: string; password: string; captcha: string }
   >(MUTATION_KEYS.SIGN_IN_WITH_PASSWORD);
 
   const handleSignIn = async () => {
@@ -74,7 +74,7 @@ const SignIn: FC = () => {
       setShouldValidate(true);
     } else {
       const token = await executeCaptcha(RecaptchaActionType.SignIn);
-      await signIn({ email: lowercaseEmail, token });
+      await signIn({ email: lowercaseEmail, captcha: token });
       setSuccessView(true);
     }
   };
@@ -95,7 +95,7 @@ const SignIn: FC = () => {
       const { data } = await signInWithPassword({
         email: lowercaseEmail,
         password,
-        token,
+        captcha: token,
       });
       if (data.resource) {
         window.location.href = data.resource;
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index b2cd1bac..c83ef72c 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -43,7 +43,7 @@ const SignUp = () => {
   const { mutateAsync: signUp, isSuccess: signUpSuccess } = useMutation<
     unknown,
     unknown,
-    { email: string; name: string; token: string }
+    { email: string; name: string; captcha: string }
   >(MUTATION_KEYS.SIGN_UP);
   const [searchParams] = useSearchParams();
 
@@ -83,7 +83,7 @@ const SignUp = () => {
       setShouldValidate(true);
     } else {
       const token = await executeCaptcha(RecaptchaActionType.SignUp);
-      await signUp({ name, email: lowercaseEmail, token });
+      await signUp({ name, email: lowercaseEmail, captcha: token });
       setSuccessView(true);
     }
   };
diff --git a/src/context/RecaptchaContext.tsx b/src/context/RecaptchaContext.tsx
index e4abb3f6..65c0214c 100644
--- a/src/context/RecaptchaContext.tsx
+++ b/src/context/RecaptchaContext.tsx
@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 declare global {
   interface Window {
     grecaptcha: {
+      ready: (callback: () => void) => void;
       execute: (
         siteKey: string,
         { action }: { action: string },
@@ -11,16 +12,12 @@ declare global {
   }
 }
 
-// const RECAPTCHA_SCRIPT_ID = 'recaptcha-key';
-
 type RecaptchaContextType = {
   executeCaptcha: (action: string) => Promise<string>;
-  // isReady: boolean;
 };
 
 const RecaptchaContext = createContext<RecaptchaContextType>({
   executeCaptcha: () => Promise.resolve(''),
-  // isReady: false,
 });
 
 type Props = {
@@ -31,45 +28,13 @@ type Props = {
 export const RecaptchaProvider = ({ children, siteKey }: Props) => {
   // const [isReady, setIsReady] = useState(false);
 
-  // /**
-  //  * Extra security measure to check if the script has
-  //  * already been included in the DOM
-  //  */
-  // const scriptAlreadyExists = () =>
-  //   document.querySelector(`script#${RECAPTCHA_SCRIPT_ID}`) !== null;
-
-  // /**
-  //  * Append the script to the document.
-  //  * Whenever the script has been loaded it will
-  //  * set the isLoaded state to true.
-  //  */
-  // const addRecaptchaScript = () => {
-  //   const script = document.createElement('script');
-  //   script.id = RECAPTCHA_SCRIPT_ID;
-  //   script.src = `https://www.google.com/recaptcha/api.js?render=${siteKey}`;
-  //   script.type = 'text/javascript';
-  //   script.async = true;
-  //   script.defer = true;
-  //   script.onload = () => setIsReady(true);
-  //   document.body.append(script);
-  // };
-
-  // /**
-  //  * Runs first time when component is mounted
-  //  * and adds the script to the document.
-  //  */
-  // useEffect(
-  //   () => {
-  //     if (!scriptAlreadyExists()) {
-  //       addRecaptchaScript();
-  //     }
-  //   },
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  //   [],
-  // );
-
-  const executeCaptcha = (action: string) => {
-    return window.grecaptcha.execute(siteKey, { action });
+  const executeCaptcha = (action: string): Promise<string> => {
+    return new Promise<string>((resolve) => {
+      window.grecaptcha.ready(async () => {
+        const token = await window.grecaptcha.execute(siteKey, { action });
+        resolve(token);
+      });
+    });
   };
 
   const value = { executeCaptcha };

From 098dde6909deb6263f7e7df5405c7c2eab7c9139 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 12:23:08 +0200
Subject: [PATCH 05/12] fix: optional grecaptcha on window

---
 package.json                     |  2 +-
 src/context/RecaptchaContext.tsx | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 17f2ef0e..43f05824 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "prettier:write": "prettier --write {src,cypress}/**/*.{js,ts,tsx}",
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
-    "cypress:open": "env-cmd -f ./.env.test cypress open",
+    "cypress:open": "env-cmd -f ./.env.local cypress open",
     "cypress": "concurrently \"yarn start:test\" \"wait-on http://localhost:3001 && yarn cypress:run\"",
     "cypress:run": "env-cmd -f ./.env.test cypress run --headless --browser chrome",
     "postinstall": "husky install",
diff --git a/src/context/RecaptchaContext.tsx b/src/context/RecaptchaContext.tsx
index 65c0214c..39cffd1d 100644
--- a/src/context/RecaptchaContext.tsx
+++ b/src/context/RecaptchaContext.tsx
@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react';
 declare global {
   interface Window {
     grecaptcha: {
-      ready: (callback: () => void) => void;
+      ready?: (callback: () => void) => void;
       execute: (
         siteKey: string,
         { action }: { action: string },
@@ -26,14 +26,16 @@ type Props = {
 };
 
 export const RecaptchaProvider = ({ children, siteKey }: Props) => {
-  // const [isReady, setIsReady] = useState(false);
-
   const executeCaptcha = (action: string): Promise<string> => {
     return new Promise<string>((resolve) => {
-      window.grecaptcha.ready(async () => {
-        const token = await window.grecaptcha.execute(siteKey, { action });
-        resolve(token);
-      });
+      if (!window.grecaptcha) {
+        resolve('');
+      } else {
+        window.grecaptcha.ready(async () => {
+          const token = await window.grecaptcha.execute(siteKey, { action });
+          resolve(token);
+        });
+      }
     });
   };
 

From efac95acddc528689bdf35c8424020eb50dfd3d9 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 12:36:36 +0200
Subject: [PATCH 06/12] fix: deault value and no recaptcha

---
 src/context/RecaptchaContext.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/context/RecaptchaContext.tsx b/src/context/RecaptchaContext.tsx
index 39cffd1d..5a8519e9 100644
--- a/src/context/RecaptchaContext.tsx
+++ b/src/context/RecaptchaContext.tsx
@@ -17,7 +17,7 @@ type RecaptchaContextType = {
 };
 
 const RecaptchaContext = createContext<RecaptchaContextType>({
-  executeCaptcha: () => Promise.resolve(''),
+  executeCaptcha: () => Promise.reject(),
 });
 
 type Props = {
@@ -29,7 +29,7 @@ export const RecaptchaProvider = ({ children, siteKey }: Props) => {
   const executeCaptcha = (action: string): Promise<string> => {
     return new Promise<string>((resolve) => {
       if (!window.grecaptcha) {
-        resolve('');
+        resolve(undefined);
       } else {
         window.grecaptcha.ready(async () => {
           const token = await window.grecaptcha.execute(siteKey, { action });

From 823f261e3fcd5786f752dd6e6a2007fe0d74570e Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 12:48:29 +0200
Subject: [PATCH 07/12] fix: add message for reject and use v1 of workflow

---
 .github/workflows/cintegration-s3-caller.yml | 2 +-
 src/context/RecaptchaContext.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/cintegration-s3-caller.yml b/.github/workflows/cintegration-s3-caller.yml
index ea69ad99..62fce244 100644
--- a/.github/workflows/cintegration-s3-caller.yml
+++ b/.github/workflows/cintegration-s3-caller.yml
@@ -15,7 +15,7 @@ jobs:
   graasp-deploy-s3-workflow:
     name: Graasp auth
     # Reference reusable workflow file. Using the commit SHA is the safest for stability and security
-    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3.yml@179-include-recaptcha-env-vars-in-workflows
+    uses: graasp/graasp-deploy/.github/workflows/cintegration-s3.yml@v1
     with:
       build-folder: 'build'
     secrets:
diff --git a/src/context/RecaptchaContext.tsx b/src/context/RecaptchaContext.tsx
index 5a8519e9..44fabaf8 100644
--- a/src/context/RecaptchaContext.tsx
+++ b/src/context/RecaptchaContext.tsx
@@ -17,7 +17,7 @@ type RecaptchaContextType = {
 };
 
 const RecaptchaContext = createContext<RecaptchaContextType>({
-  executeCaptcha: () => Promise.reject(),
+  executeCaptcha: () => Promise.reject('No Recaptcha context provider found'),
 });
 
 type Props = {

From 29958749e64af3f980528366c58a338df6a2c289 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 14:25:00 +0200
Subject: [PATCH 08/12] fix: add env variables

---
 .github/workflows/cdelivery-s3-caller.yml    |  1 +
 .github/workflows/cdeployment-s3-caller.yml  |  1 +
 .github/workflows/cintegration-s3-caller.yml |  1 +
 package.json                                 |  5 ++-
 src/components/SignIn.tsx                    |  8 ++--
 src/components/SignUp.tsx                    |  4 +-
 yarn.lock                                    | 44 +++-----------------
 7 files changed, 17 insertions(+), 47 deletions(-)

diff --git a/.github/workflows/cdelivery-s3-caller.yml b/.github/workflows/cdelivery-s3-caller.yml
index 11caabda..d1cfb0b4 100644
--- a/.github/workflows/cdelivery-s3-caller.yml
+++ b/.github/workflows/cdelivery-s3-caller.yml
@@ -24,5 +24,6 @@ jobs:
       show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
       graasp-compose-host: ${{ secrets.REACT_APP_GRAASP_COMPOSE_HOST_STAGE }}
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_STAGE }}
+      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_STAGE }}
       recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
       domain: ${{ secrets.REACT_APP_DOMAIN_STAGE }}
diff --git a/.github/workflows/cdeployment-s3-caller.yml b/.github/workflows/cdeployment-s3-caller.yml
index ad7b6c33..677bbe45 100644
--- a/.github/workflows/cdeployment-s3-caller.yml
+++ b/.github/workflows/cdeployment-s3-caller.yml
@@ -30,5 +30,6 @@ jobs:
       show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
       graasp-compose-host: ${{ secrets.REACT_APP_GRAASP_COMPOSE_HOST_PROD }}
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_PROD }}
+      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_PROD }}
       recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
       domain: ${{ secrets.REACT_APP_DOMAIN_PROD }}
diff --git a/.github/workflows/cintegration-s3-caller.yml b/.github/workflows/cintegration-s3-caller.yml
index 62fce244..cee6d508 100644
--- a/.github/workflows/cintegration-s3-caller.yml
+++ b/.github/workflows/cintegration-s3-caller.yml
@@ -25,6 +25,7 @@ jobs:
       aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME_GRAASP_AUTH_DEV }}
       cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION_GRAASP_AUTH_DEV }}
       api-host: ${{ secrets.REACT_APP_API_HOST_DEV }}
+      authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_DEV }}
       show-notifications: ${{ secrets.REACT_APP_SHOW_NOTIFICATIONS }}
       graasp-compose-host: ${{ secrets.REACT_APP_GRAASP_COMPOSE_HOST_DEV }}
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_DEV }}
diff --git a/package.json b/package.json
index 43f05824..3c4ba386 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
     "@graasp/query-client": "0.2.0",
-    "@graasp/sdk": "github:graasp/graasp-sdk#122-add-actiontype-for-recaptcha",
+    "@graasp/sdk": "0.10.0",
     "@graasp/translations": "1.8.0",
     "@graasp/ui": "0.11.1",
     "@mui/icons-material": "5.11.0",
@@ -106,5 +106,8 @@
     "typescript": "4.9.4",
     "wait-on": "7.0.1"
   },
+  "resolutions": {
+    "@graasp/sdk": "0.10.0"
+  },
   "packageManager": "yarn@3.2.1"
 }
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index 7db83127..a9d25965 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { RecaptchaActionType } from '@graasp/sdk';
+import { RecaptchaAction } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
@@ -73,7 +73,7 @@ const SignIn: FC = () => {
     if (checkingEmail) {
       setShouldValidate(true);
     } else {
-      const token = await executeCaptcha(RecaptchaActionType.SignIn);
+      const token = await executeCaptcha(RecaptchaAction.SignIn);
       await signIn({ email: lowercaseEmail, captcha: token });
       setSuccessView(true);
     }
@@ -89,9 +89,7 @@ const SignIn: FC = () => {
         setPasswordError(checkingPassword);
       }
     } else {
-      const token = await executeCaptcha(
-        RecaptchaActionType.SignInWithPassword,
-      );
+      const token = await executeCaptcha(RecaptchaAction.SignInWithPassword);
       const { data } = await signInWithPassword({
         email: lowercaseEmail,
         password,
diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index c83ef72c..7216a3a6 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -2,7 +2,7 @@ import { ChangeEventHandler, useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { RecaptchaActionType } from '@graasp/sdk';
+import { RecaptchaAction } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
 import { Button, Loader } from '@graasp/ui';
 
@@ -82,7 +82,7 @@ const SignUp = () => {
       setNameError(checkingUsername);
       setShouldValidate(true);
     } else {
-      const token = await executeCaptcha(RecaptchaActionType.SignUp);
+      const token = await executeCaptcha(RecaptchaAction.SignUp);
       await signUp({ name, email: lowercaseEmail, captcha: token });
       setSuccessView(true);
     }
diff --git a/yarn.lock b/yarn.lock
index a8652c8d..312b833c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2314,43 +2314,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/sdk@github:graasp/graasp-sdk#122-add-actiontype-for-recaptcha":
-  version: 0.9.3
-  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=04af6ccec3fe3bbbde497ddac42741d2f3702d6d"
-  dependencies:
-    "@fastify/secure-session": 5.3.0
-    aws-sdk: 2.1310.0
-    fastify: 3.29.5
-    fluent-json-schema: 3.1.0
-    immutable: 4.2.4
-    js-cookie: 3.0.1
-    qs: 6.11.0
-    slonik: 28.1.1
-    uuid: 9.0.0
-  checksum: 03a1e69dca2ca525b2938b0efbbef9019ba00ee3dbc1fb6c11b5b451f1635655a591fae3c7be13a7fe05b992ed449e61d84b95173a74d881c5ec6b8c20e6a388
-  languageName: node
-  linkType: hard
-
-"@graasp/sdk@npm:0.4.0":
-  version: 0.4.0
-  resolution: "@graasp/sdk@npm:0.4.0"
-  dependencies:
-    "@fastify/secure-session": 5.3.0
-    aws-sdk: 2.1310.0
-    fastify: 3.29.5
-    fluent-json-schema: 3.1.0
-    immutable: 4.2.4
-    js-cookie: 3.0.1
-    qs: 6.11.0
-    slonik: 28.1.1
-    uuid: 9.0.0
-  checksum: cf57c9e782b00c6406fbd4563e56b797bd78e8928cc4e1624601968541f6f72b7784c9d9e66bbcc46180030a7ff31f8089d8aca4ae393e57d3d5f1e8e6c614d6
-  languageName: node
-  linkType: hard
-
-"@graasp/sdk@npm:0.4.1":
-  version: 0.4.1
-  resolution: "@graasp/sdk@npm:0.4.1"
+"@graasp/sdk@npm:0.10.0":
+  version: 0.10.0
+  resolution: "@graasp/sdk@npm:0.10.0"
   dependencies:
     "@fastify/secure-session": 5.3.0
     aws-sdk: 2.1310.0
@@ -2361,7 +2327,7 @@ __metadata:
     qs: 6.11.0
     slonik: 28.1.1
     uuid: 9.0.0
-  checksum: dc65bdad6db5d8647c5753fa03c7d88cd894b3e3dc9da55c19e92da4bbc77cd85b542beb93ec5db46b75a8a7ac65ba8901258a667a3bedccb8fdfa6b4f13df14
+  checksum: 5b7d89d72c12be75d9fcba69c9545be4d5caf38685270f66934c9b0c221968d33f4ee20c4c18573e3ed89641461faa12ae28acfcb9511ca45f50b61bb6068631
   languageName: node
   linkType: hard
 
@@ -9407,7 +9373,7 @@ __metadata:
     "@emotion/react": 11.10.5
     "@emotion/styled": 11.10.5
     "@graasp/query-client": 0.2.0
-    "@graasp/sdk": "github:graasp/graasp-sdk#122-add-actiontype-for-recaptcha"
+    "@graasp/sdk": 0.10.0
     "@graasp/translations": 1.8.0
     "@graasp/ui": 0.11.1
     "@mui/icons-material": 5.11.0

From bb39a95753a9efad769d142a9e7c66f2e2411482 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 15:21:35 +0200
Subject: [PATCH 09/12] fix: catch throw

---
 package.json              |  6 +++---
 src/components/SignIn.tsx | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 3c4ba386..fd8d1893 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
     "validator": "13.7.0"
   },
   "scripts": {
-    "start": "env-cmd -f ./.env.local react-scripts start",
-    "start:test": "env-cmd -f ./.env.test react-scripts start",
+    "start": "env-cmd -f ./.env.local react-scripts -r @cypress/instrument-cra start",
+    "start:test": "env-cmd -f ./.env.test react-scripts -r @cypress/instrument-cra start",
     "start:ci": "react-scripts -r @cypress/instrument-cra start",
     "build": "react-scripts build",
     "dist:dev": "env-cmd -f ./.env.development react-scripts build",
@@ -46,7 +46,7 @@
     "prettier:write": "prettier --write {src,cypress}/**/*.{js,ts,tsx}",
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
-    "cypress:open": "env-cmd -f ./.env.local cypress open",
+    "cypress:open": "env-cmd -f ./.env.test cypress open",
     "cypress": "concurrently \"yarn start:test\" \"wait-on http://localhost:3001 && yarn cypress:run\"",
     "cypress:run": "env-cmd -f ./.env.test cypress run --headless --browser chrome",
     "postinstall": "husky install",
diff --git a/src/components/SignIn.tsx b/src/components/SignIn.tsx
index a9d25965..c962b27b 100644
--- a/src/components/SignIn.tsx
+++ b/src/components/SignIn.tsx
@@ -73,9 +73,13 @@ const SignIn: FC = () => {
     if (checkingEmail) {
       setShouldValidate(true);
     } else {
-      const token = await executeCaptcha(RecaptchaAction.SignIn);
-      await signIn({ email: lowercaseEmail, captcha: token });
-      setSuccessView(true);
+      try {
+        const token = await executeCaptcha(RecaptchaAction.SignIn);
+        await signIn({ email: lowercaseEmail, captcha: token });
+        setSuccessView(true);
+      } catch (e) {
+        console.error(e);
+      }
     }
   };
 

From 754283f9ae82eccb3d800cec6eef0ab53abb3980 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 15:57:29 +0200
Subject: [PATCH 10/12] fix: make changes for PR

---
 README.md                         |  1 +
 public/index.html                 |  4 ++++
 src/components/SuccessContent.tsx | 14 ++++++++++----
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index eadb2c11..91624058 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ REACT_APP_API_HOST=http://localhost:3000
 PORT=3001
 REACT_APP_DOMAIN=localhost:3001
 REACT_APP_SHOW_NOTIFICATIONS=true
+REACT_APP_AUTHENTICATION_HOST=http://localhost:3001
 
 REACT_APP_RECAPTCHA_SITE_KEY=
 ```
diff --git a/public/index.html b/public/index.html
index 36ac050e..e95729ae 100644
--- a/public/index.html
+++ b/public/index.html
@@ -27,6 +27,10 @@
       href="%PUBLIC_URL%/favicon-16x16.png"
     />
 
+    <!--
+      This is to load the reCAPTCHA script
+      The REACT_APP_RECAPTCHA_SITE_KEY value is replaced at build time by CRA
+    -->
     <script src="https://www.google.com/recaptcha/api.js?render=%REACT_APP_RECAPTCHA_SITE_KEY%"></script>
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
diff --git a/src/components/SuccessContent.tsx b/src/components/SuccessContent.tsx
index ae38b4f6..3c4dc10b 100644
--- a/src/components/SuccessContent.tsx
+++ b/src/components/SuccessContent.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Trans } from 'react-i18next';
 
 import { MUTATION_KEYS } from '@graasp/query-client';
+import { RecaptchaAction } from '@graasp/sdk';
 import { AUTH, namespaces } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
@@ -12,6 +13,7 @@ import { useAuthTranslation } from '../config/i18n';
 import { useMutation } from '../config/queryClient';
 import { SUCCESS_CONTENT_ID } from '../config/selectors';
 import { BACK_BUTTON_ID, RESEND_EMAIL_BUTTON_ID } from '../config/selectors';
+import { useRecaptcha } from '../context/RecaptchaContext';
 
 type Props = {
   title: string;
@@ -25,17 +27,21 @@ const SuccessContent = ({
   handleBackButtonClick = null,
 }: Props) => {
   const { t } = useAuthTranslation();
+  const { executeCaptcha } = useRecaptcha();
   const [isEmailSent, setIsEmailSent] = useState(false);
 
   // used for resend email
-  const { mutate: signIn } = useMutation<unknown, unknown, { email: string }>(
-    MUTATION_KEYS.SIGN_IN,
-  );
+  const { mutate: signIn } = useMutation<
+    unknown,
+    unknown,
+    { email: string; captcha: string }
+  >(MUTATION_KEYS.SIGN_IN);
 
   // used for resend email
   const handleResendEmail = async () => {
     const lowercaseEmail = email.toLowerCase();
-    signIn({ email: lowercaseEmail });
+    const token = await executeCaptcha(RecaptchaAction.SignInWithPassword);
+    signIn({ email: lowercaseEmail, captcha: token });
   };
 
   const onClickResendEmail = () => {

From a8b140710cc56ce19506d83a6f203a45e5304b3e Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 16:48:11 +0200
Subject: [PATCH 11/12] feat: add sentry tracing

---
 .github/workflows/cdelivery-s3-caller.yml    |   1 +
 .github/workflows/cdeployment-s3-caller.yml  |   1 +
 .github/workflows/cintegration-s3-caller.yml |   1 +
 package.json                                 |   6 +-
 src/components/App.tsx                       |  22 ++--
 src/components/ErrorFallback.tsx             |  11 ++
 src/components/SuccessContent.tsx            |   2 +-
 src/config/constants.ts                      |   3 +
 src/config/i18n.ts                           |   1 +
 src/index.tsx                                |  32 +++++-
 yarn.lock                                    | 107 ++++++++++++++++---
 11 files changed, 162 insertions(+), 25 deletions(-)
 create mode 100644 src/components/ErrorFallback.tsx

diff --git a/.github/workflows/cdelivery-s3-caller.yml b/.github/workflows/cdelivery-s3-caller.yml
index d1cfb0b4..992b842d 100644
--- a/.github/workflows/cdelivery-s3-caller.yml
+++ b/.github/workflows/cdelivery-s3-caller.yml
@@ -26,4 +26,5 @@ jobs:
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_STAGE }}
       authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_STAGE }}
       recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
+      sentry-dsn: ${{ secrets.REACT_APP_SENTRY_DSN }}
       domain: ${{ secrets.REACT_APP_DOMAIN_STAGE }}
diff --git a/.github/workflows/cdeployment-s3-caller.yml b/.github/workflows/cdeployment-s3-caller.yml
index 677bbe45..73b37f14 100644
--- a/.github/workflows/cdeployment-s3-caller.yml
+++ b/.github/workflows/cdeployment-s3-caller.yml
@@ -32,4 +32,5 @@ jobs:
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_PROD }}
       authentication-host: ${{ secrets.REACT_APP_AUTHENTICATION_HOST_PROD }}
       recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
+      sentry-dsn: ${{ secrets.REACT_APP_SENTRY_DSN }}
       domain: ${{ secrets.REACT_APP_DOMAIN_PROD }}
diff --git a/.github/workflows/cintegration-s3-caller.yml b/.github/workflows/cintegration-s3-caller.yml
index cee6d508..4f414ccd 100644
--- a/.github/workflows/cintegration-s3-caller.yml
+++ b/.github/workflows/cintegration-s3-caller.yml
@@ -30,4 +30,5 @@ jobs:
       graasp-compose-host: ${{ secrets.REACT_APP_GRAASP_COMPOSE_HOST_DEV }}
       graasp-explorer-host: ${{ secrets.REACT_APP_GRAASP_EXPLORE_HOST_DEV }}
       recaptcha-site-key: ${{ secrets.REACT_APP_RECAPTCHA_SITE_KEY }}
+      sentry-dsn: ${{ secrets.REACT_APP_SENTRY_DSN }}
       domain: ${{ secrets.REACT_APP_DOMAIN_DEV }}
diff --git a/package.json b/package.json
index fd8d1893..0bc80f3b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,9 @@
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.119",
     "@mui/material": "5.11.8",
+    "@sentry/browser": "7.45.0",
+    "@sentry/react": "7.45.0",
+    "@sentry/tracing": "7.45.0",
     "http-status-codes": "2.2.0",
     "qs": "6.11.0",
     "react": "17.0.2",
@@ -107,7 +110,8 @@
     "wait-on": "7.0.1"
   },
   "resolutions": {
-    "@graasp/sdk": "0.10.0"
+    "@graasp/sdk": "0.10.0",
+    "@types/react": "17.0.30"
   },
   "packageManager": "yarn@3.2.1"
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
index f4dde17f..a7af3418 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,20 +1,24 @@
+import * as Sentry from '@sentry/react';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 
 import { HOME_PATH, SIGN_UP_PATH, buildSignInPath } from '../config/paths';
+import ErrorFallback from './ErrorFallback';
 import Redirection from './Redirection';
 import SignIn from './SignIn';
 import SignUp from './SignUp';
 
 const App = () => (
-  <Router>
-    <Redirection>
-      <Routes>
-        <Route path={buildSignInPath()} element={<SignIn />} />
-        <Route path={SIGN_UP_PATH} element={<SignUp />} />
-        <Route path={HOME_PATH} element={<SignIn />} />
-      </Routes>
-    </Redirection>
-  </Router>
+  <Sentry.ErrorBoundary fallback={<ErrorFallback />} showDialog>
+    <Router>
+      <Redirection>
+        <Routes>
+          <Route path={buildSignInPath()} element={<SignIn />} />
+          <Route path={SIGN_UP_PATH} element={<SignUp />} />
+          <Route path={HOME_PATH} element={<SignIn />} />
+        </Routes>
+      </Redirection>
+    </Router>
+  </Sentry.ErrorBoundary>
 );
 
 export default App;
diff --git a/src/components/ErrorFallback.tsx b/src/components/ErrorFallback.tsx
new file mode 100644
index 00000000..35b2e279
--- /dev/null
+++ b/src/components/ErrorFallback.tsx
@@ -0,0 +1,11 @@
+import { FAILURE_MESSAGES } from '@graasp/translations';
+
+import { Alert } from '@mui/material';
+
+import { useMessagesTranslation } from '../config/i18n';
+
+const ErrorFallback = () => {
+  const { t } = useMessagesTranslation();
+  return <Alert severity="error">{t(FAILURE_MESSAGES.UNEXPECTED_ERROR)}</Alert>;
+};
+export default ErrorFallback;
diff --git a/src/components/SuccessContent.tsx b/src/components/SuccessContent.tsx
index 3c4dc10b..b9c38809 100644
--- a/src/components/SuccessContent.tsx
+++ b/src/components/SuccessContent.tsx
@@ -40,7 +40,7 @@ const SuccessContent = ({
   // used for resend email
   const handleResendEmail = async () => {
     const lowercaseEmail = email.toLowerCase();
-    const token = await executeCaptcha(RecaptchaAction.SignInWithPassword);
+    const token = await executeCaptcha(RecaptchaAction.SignIn);
     signIn({ email: lowercaseEmail, captcha: token });
   };
 
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 474ddc11..81a0f842 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -19,6 +19,9 @@ export const GRAASP_COMPOSE_HOST =
 export const AUTHENTICATION_HOST =
   process.env.REACT_APP_AUTHENTICATION_HOST || 'http://localhost:3001';
 
+export const SENRY_DSN = process.env.REACT_APP_SENTRY_DSN;
+export const APP_VERSION = process.env.REACT_APP_VERSION;
+
 export const RECAPTCHA_SITE_KEY = process.env.REACT_APP_RECAPTCHA_SITE_KEY;
 
 export const NAME_MAXIMUM_LENGTH = 300;
diff --git a/src/config/i18n.ts b/src/config/i18n.ts
index bee7f383..9900e9ff 100644
--- a/src/config/i18n.ts
+++ b/src/config/i18n.ts
@@ -8,5 +8,6 @@ i18n.use(initReactI18next);
 export const useAuthTranslation = () => useTranslation(namespaces.auth);
 export const useBuilderTranslation = () => useTranslation(namespaces.builder);
 export const useCommonTranslation = () => useTranslation(namespaces.common);
+export const useMessagesTranslation = () => useTranslation(namespaces.messages);
 
 export default i18n;
diff --git a/src/index.tsx b/src/index.tsx
index 717566e5..4f95acfb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,18 @@
+import * as Sentry from '@sentry/react';
+import { BrowserTracing } from '@sentry/tracing';
 import { render } from 'react-dom';
 import ReactGA from 'react-ga4';
 
 import { hasAcceptedCookies } from '@graasp/sdk';
 
 import Root from './components/Root';
-import { GA_MEASUREMENT_ID, NODE_ENV } from './config/constants';
+import {
+  APP_VERSION,
+  DOMAIN,
+  GA_MEASUREMENT_ID,
+  NODE_ENV,
+  SENRY_DSN,
+} from './config/constants';
 import './index.css';
 import './index.css';
 
@@ -13,5 +21,27 @@ if (GA_MEASUREMENT_ID && hasAcceptedCookies() && NODE_ENV !== 'test') {
   ReactGA.send('pageview');
 }
 
+Sentry.init({
+  dsn: SENRY_DSN,
+  integrations: [
+    new BrowserTracing(),
+    new Sentry.Replay({
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+  release: APP_VERSION,
+  environment: DOMAIN,
+  tracesSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // If the entire session is not sampled, use the below sample rate to sample
+  // sessions when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+});
+
 const root = document.getElementById('root');
 render(<Root />, root);
diff --git a/yarn.lock b/yarn.lock
index 312b833c..b873b7b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3207,6 +3207,95 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry-internal/tracing@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry-internal/tracing@npm:7.45.0"
+  dependencies:
+    "@sentry/core": 7.45.0
+    "@sentry/types": 7.45.0
+    "@sentry/utils": 7.45.0
+    tslib: ^1.9.3
+  checksum: 64cb8ddca80d4c3a8b7d7fab8ebfc38e5eeb56753b72fc7fbcc6003a190f0492fe89075f7e7d7a2621f4746c52613c79eec2695368cc44da134b0be42bd0f71b
+  languageName: node
+  linkType: hard
+
+"@sentry/browser@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry/browser@npm:7.45.0"
+  dependencies:
+    "@sentry-internal/tracing": 7.45.0
+    "@sentry/core": 7.45.0
+    "@sentry/replay": 7.45.0
+    "@sentry/types": 7.45.0
+    "@sentry/utils": 7.45.0
+    tslib: ^1.9.3
+  checksum: 6f9328e32fbe92a31e891ec00f6fbd72397d6e6f9a53ec4025da8682bcb484fda49ad05ee73a95b1f0554f9a4543d9d5f40e26273eb9c70617a475939dfd29ad
+  languageName: node
+  linkType: hard
+
+"@sentry/core@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry/core@npm:7.45.0"
+  dependencies:
+    "@sentry/types": 7.45.0
+    "@sentry/utils": 7.45.0
+    tslib: ^1.9.3
+  checksum: c0453edf833b7ed86bcde6d341090bd3f4cfdb08b50a5e96cbe9d240d3955ea90c4af5550af37f95e8b987c13fa178cb004dd7bea9071145e63ce0dc7c635ec6
+  languageName: node
+  linkType: hard
+
+"@sentry/react@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry/react@npm:7.45.0"
+  dependencies:
+    "@sentry/browser": 7.45.0
+    "@sentry/types": 7.45.0
+    "@sentry/utils": 7.45.0
+    hoist-non-react-statics: ^3.3.2
+    tslib: ^1.9.3
+  peerDependencies:
+    react: 15.x || 16.x || 17.x || 18.x
+  checksum: 2b2a3014f85f693ac8c30af8e86e0fa843805ad123c9093d16bc89a4299f2c9942997145db8350421893e6bac3aaf18bee1633ec7a012ca02e82c07f3ddf4485
+  languageName: node
+  linkType: hard
+
+"@sentry/replay@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry/replay@npm:7.45.0"
+  dependencies:
+    "@sentry/core": 7.45.0
+    "@sentry/types": 7.45.0
+    "@sentry/utils": 7.45.0
+  checksum: 6e960f50cb1b3fae97482edfc2458542a254af0060481e369740c1e9f93093ca662f130c400fafff092e75079929c21f59ea78d85a095b59a07250976d478b84
+  languageName: node
+  linkType: hard
+
+"@sentry/tracing@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry/tracing@npm:7.45.0"
+  dependencies:
+    "@sentry-internal/tracing": 7.45.0
+  checksum: 21cfa98152f66c588124b368cc2883688e4d12a6a1d3a48519522b4d165ba56f8b72d2154686e278ecedc7b6afe5c6f469d256a31745fa9b8140a1040064e9f5
+  languageName: node
+  linkType: hard
+
+"@sentry/types@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry/types@npm:7.45.0"
+  checksum: feb7de474f486f52f8f2594dc0559872c51c770b8511d90383eb4aadac8dffc2ddfb8fd7747cfd1486e629eba47bc7c9fae72fdad28cddaaeaf8dd1a52fabdfa
+  languageName: node
+  linkType: hard
+
+"@sentry/utils@npm:7.45.0":
+  version: 7.45.0
+  resolution: "@sentry/utils@npm:7.45.0"
+  dependencies:
+    "@sentry/types": 7.45.0
+    tslib: ^1.9.3
+  checksum: 5d4d2ab4fe85d7231a35859cbeecc3d0c95368c818f15d8d6332f8c57604a67c0e12d5a81c23e5dcb1c53b4e44faf753028592792eb98e4af1440ee375b2292e
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.3":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
@@ -3919,17 +4008,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*":
-  version: 18.0.28
-  resolution: "@types/react@npm:18.0.28"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: e752df961105e5127652460504785897ca6e77259e0da8f233f694f9e8f451cde7fa0709d4456ade0ff600c8ce909cfe29f9b08b9c247fa9b734e126ec53edd7
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:17.0.30":
   version: 17.0.30
   resolution: "@types/react@npm:17.0.30"
@@ -9379,6 +9457,9 @@ __metadata:
     "@mui/icons-material": 5.11.0
     "@mui/lab": 5.0.0-alpha.119
     "@mui/material": 5.11.8
+    "@sentry/browser": 7.45.0
+    "@sentry/react": 7.45.0
+    "@sentry/tracing": 7.45.0
     "@testing-library/jest-dom": 5.16.4
     "@testing-library/react": 13.2.0
     "@testing-library/user-event": 14.2.0
@@ -9577,7 +9658,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -16856,7 +16937,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1":
+"tslib@npm:^1.8.1, tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd

From 8ec9421b624cbf616c9ccf47f47d9a7e71d52d4b Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 27 Mar 2023 17:16:34 +0200
Subject: [PATCH 12/12] fix: add trim to name field

---
 src/components/SignUp.tsx | 6 +++++-
 src/index.tsx             | 8 +-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/SignUp.tsx b/src/components/SignUp.tsx
index 7216a3a6..a52b1f45 100644
--- a/src/components/SignUp.tsx
+++ b/src/components/SignUp.tsx
@@ -83,7 +83,11 @@ const SignUp = () => {
       setShouldValidate(true);
     } else {
       const token = await executeCaptcha(RecaptchaAction.SignUp);
-      await signUp({ name, email: lowercaseEmail, captcha: token });
+      await signUp({
+        name: name.trim(),
+        email: lowercaseEmail,
+        captcha: token,
+      });
       setSuccessView(true);
     }
   };
diff --git a/src/index.tsx b/src/index.tsx
index 4f95acfb..eabdd0fb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,13 +23,7 @@ if (GA_MEASUREMENT_ID && hasAcceptedCookies() && NODE_ENV !== 'test') {
 
 Sentry.init({
   dsn: SENRY_DSN,
-  integrations: [
-    new BrowserTracing(),
-    new Sentry.Replay({
-      maskAllText: true,
-      blockAllMedia: true,
-    }),
-  ],
+  integrations: [new BrowserTracing(), new Sentry.Replay()],
   release: APP_VERSION,
   environment: DOMAIN,
   tracesSampleRate: 1.0,