pass ReCaptcha token to API request when signing in with wallet

ui/shared/reCaptcha/useReCaptcha.tsx

@@ -7,10 +7,10 @@ export default function useReCaptcha() {
 
   const [ isOpen, setIsOpen ] = React.useState(false);
 
-  const executeAsync = React.useCallback(async() => {
+  const executeAsync: () => Promise<string | null> = React.useCallback(async() => {
     setIsOpen(true);
     const tokenPromise = ref.current?.executeAsync() || Promise.reject(new Error('Unable to execute ReCaptcha'));
-    const modalOpenPromise = new Promise<void>((resolve, reject) => {
+    const modalOpenPromise = new Promise<null>((resolve, reject) => {
       rejectCb.current = reject;
     });
 

ui/snippets/auth/screens/AuthModalScreenConnectWallet.tsx

@@ -5,6 +5,8 @@ import type { ScreenSuccess } from '../types';
 import type { UserInfo } from 'types/api/account';
 
 import type * as mixpanel from 'lib/mixpanel';
+import ReCaptcha from 'ui/shared/reCaptcha/ReCaptcha';
+import useReCaptcha from 'ui/shared/reCaptcha/useReCaptcha';
 
 import useSignInWithWallet from '../useSignInWithWallet';
 
@@ -17,6 +19,7 @@ interface Props {
 
 const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth, source }: Props) => {
   const isStartedRef = React.useRef(false);
+  const recaptcha = useReCaptcha();
 
   const handleSignInSuccess = React.useCallback(({ address, profile }: { address: string; profile: UserInfo }) => {
     onSuccess({ type: 'success_wallet', address, isAuth, profile });
@@ -26,7 +29,13 @@ const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth, source }: Pr
     onError(isAuth);
   }, [ onError, isAuth ]);
 
-  const { start } = useSignInWithWallet({ onSuccess: handleSignInSuccess, onError: handleSignInError, source, isAuth });
+  const { start } = useSignInWithWallet({
+    onSuccess: handleSignInSuccess,
+    onError: handleSignInError,
+    source,
+    isAuth,
+    executeRecaptchaAsync: recaptcha.executeAsync,
+  });
 
   React.useEffect(() => {
     if (!isStartedRef.current) {
@@ -35,7 +44,12 @@ const AuthModalScreenConnectWallet = ({ onSuccess, onError, isAuth, source }: Pr
     }
   }, [ start ]);
 
-  return <Center h="100px"><Spinner/></Center>;
+  return (
+    <Center h="100px">
+      <Spinner/>
+      <ReCaptcha ref={ recaptcha.ref }/>
+    </Center>
+  );
 };
 
 export default React.memo(AuthModalScreenConnectWallet);

ui/snippets/auth/useSignInWithWallet.ts

@@ -17,9 +17,10 @@ interface Props {
   onError?: () => void;
   source?: mixpanel.EventPayload<mixpanel.EventTypes.WALLET_CONNECT>['Source'];
   isAuth?: boolean;
+  executeRecaptchaAsync: () => Promise<string | null>;
 }
 
-function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth }: Props) {
+function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth, executeRecaptchaAsync }: Props) {
   const [ isPending, setIsPending ] = React.useState(false);
   const isConnectingWalletRef = React.useRef(false);
 
@@ -32,11 +33,17 @@ function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth }: P
     try {
       const siweMessage = await apiFetch('auth_siwe_message', { queryParams: { address } }) as { siwe_message: string };
       const signature = await signMessageAsync({ message: siweMessage.siwe_message });
+      const recaptchaToken = await executeRecaptchaAsync();
+
+      if (!recaptchaToken) {
+        throw new Error('ReCaptcha is not solved');
+      }
+
       const resource = isAuth ? 'auth_link_address' : 'auth_siwe_verify';
       const response = await apiFetch<typeof resource, UserInfo, unknown>(resource, {
         fetchParams: {
           method: 'POST',
-          body: { message: siweMessage.siwe_message, signature },
+          body: { message: siweMessage.siwe_message, signature, recaptcha_response: recaptchaToken },
         },
       });
       if (!('name' in response)) {
@@ -56,7 +63,7 @@ function useSignInWithWallet({ onSuccess, onError, source = 'Login', isAuth }: P
     } finally {
       setIsPending(false);
     }
-  }, [ apiFetch, isAuth, onError, onSuccess, signMessageAsync, toast ]);
+  }, [ apiFetch, isAuth, onError, onSuccess, signMessageAsync, toast, executeRecaptchaAsync ]);
 
   const start = React.useCallback(() => {
     setIsPending(true);