ordering-ui-react-native 0.15.93-release → 0.15.94-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.93-release",
+  "version": "0.15.94-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -33,6 +33,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@fatnlazycat/react-native-recaptcha-v3": "^1.0.3",
     "@invertase/react-native-apple-authentication": "^2.1.5",
     "@react-native-async-storage/async-storage": "^1.15.5",
     "@react-native-clipboard/clipboard": "^1.8.4",

package/src/types/@fatnlazycat/react-native-recaptcha-v3/index.d.ts

@@ -0,0 +1 @@
+declare module '@fatnlazycat/react-native-recaptcha-v3'

package/themes/business/src/components/LoginForm/index.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
@@ -52,8 +53,8 @@ const LoginFormUI = (props: LoginParams) => {
     allowedLevels,
     useRootPoint,
     notificationState,
-		handleReCaptcha,
-		enableReCaptcha
+    handleReCaptcha,
+    enableReCaptcha
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -67,7 +68,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
-  const [projectName, setProjectName] = useState({name: '', isFocued: false});
+  const [projectName, setProjectName] = useState({ name: '', isFocued: false });
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -92,36 +93,50 @@ const LoginFormUI = (props: LoginParams) => {
   const [formValues, setFormValues] = useState(null);
 
   const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
-	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
   const recaptchaRef = useRef<any>({});
 
   const handleOpenRecaptcha = () => {
-		setRecaptchaVerified(false)
-	  	if (!recaptchaConfig?.siteKey) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			return
-		}
-		if (!recaptchaConfig?.baseUrl) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			return
-		}
-		recaptchaRef.current.open()
-  	}
-
-	const onRecaptchaVerify = (token: any) => {
-		setRecaptchaVerified(true)
-		handleReCaptcha(token)
-	}
-
-	useEffect(() => {
-		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
-		}
-	}, [configs, enableReCaptcha])
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      return
+    }
+    recaptchaRef.current.open()
+  }
+
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    handleReCaptcha({ code: token, version: recaptchaConfig?.version })
+  }
+
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaConfig({
+          version: 'v3',
+          siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+      }
+    }
+  }, [configs, enableReCaptcha])
 
   useEffect(() => {
     const projectInputInterval = setInterval(() => {
@@ -245,6 +260,17 @@ const LoginFormUI = (props: LoginParams) => {
 
   useEffect(() => {
     if (!formState?.loading && formState?.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setSubmitted(false)
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+        return
+      }
       formState?.result?.result &&
         showToast(
           ToastType.Error,
@@ -252,17 +278,17 @@ const LoginFormUI = (props: LoginParams) => {
             ? getTraduction(formState.result?.result)
             : loginTab === 'email' &&
               typeof formState.result?.result !== 'string'
-            ? getTraduction(formState.result?.result[0])
-            : loginTab === 'cellphone' &&
-              typeof formState.result?.result === 'string'
-            ? getTraduction(formState.result?.result).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              )
-            : getTraduction(formState.result?.result[0]).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              ),
+              ? getTraduction(formState.result?.result[0])
+              : loginTab === 'cellphone' &&
+                typeof formState.result?.result === 'string'
+                ? getTraduction(formState.result?.result).replace(
+                  t('USER', 'user').toLowerCase(),
+                  t('PHONE_NUMER', 'Phone number'),
+                )
+                : getTraduction(formState.result?.result[0]).replace(
+                  t('USER', 'user').toLowerCase(),
+                  t('PHONE_NUMER', 'Phone number'),
+                ),
         );
       setSubmitted(false)
     }
@@ -516,7 +542,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({name: e?.target?.value, isFocued: true})
+                    setProjectName({ name: e?.target?.value, isFocued: true })
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -545,7 +571,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({...projectName, isFocued: false})
+                    setProjectName({ ...projectName, isFocued: false })
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}
@@ -650,40 +676,50 @@ const LoginFormUI = (props: LoginParams) => {
               </OText>
             </Pressable>
           )}
-
-          {enableReCaptcha && (
+          {(enableReCaptcha && recaptchaConfig?.version) && (
             <>
-              <TouchableOpacity
-                style={{ marginBottom: 15 }}
-                onPress={handleOpenRecaptcha}
-              >
-                <RecaptchaButton>
-                  {recaptchaVerified ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={26}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={26}
-                      color={theme.colors.mediumGray}
-                    />
-                  )}
-                  <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-                </RecaptchaButton>
-              </TouchableOpacity>
-              <Recaptcha
-                ref={recaptchaRef}
-                siteKey={recaptchaConfig?.siteKey}
-                baseUrl={recaptchaConfig?.baseUrl}
-                onVerify={onRecaptchaVerify}
-                onExpire={() => setRecaptchaVerified(false)}
-              />
+              {recaptchaConfig?.version === 'v3' ? (
+                <ReCaptcha
+                  url={recaptchaConfig?.baseUrl}
+                  siteKey={recaptchaConfig?.siteKey}
+                  containerStyle={{ height: 40 }}
+                  onExecute={onRecaptchaVerify}
+                  reCaptchaType={1}
+                />
+              ) : (
+                <>
+                  <TouchableOpacity
+                    style={{ marginBottom: 15 }}
+                    onPress={handleOpenRecaptcha}
+                  >
+                    <RecaptchaButton>
+                      {recaptchaVerified ? (
+                        <MaterialCommunityIcons
+                          name="checkbox-marked"
+                          size={26}
+                          color={theme.colors.primary}
+                        />
+                      ) : (
+                        <MaterialCommunityIcons
+                          name="checkbox-blank-outline"
+                          size={26}
+                          color={theme.colors.mediumGray}
+                        />
+                      )}
+                      <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                    </RecaptchaButton>
+                  </TouchableOpacity>
+                  <Recaptcha
+                    ref={recaptchaRef}
+                    siteKey={recaptchaConfig?.siteKey}
+                    baseUrl={recaptchaConfig?.baseUrl}
+                    onVerify={onRecaptchaVerify}
+                    onExpire={() => setRecaptchaVerified(false)}
+                  />
+                </>)
+              }
             </>
-					)}
-
+          )}
           <OButton
             onClick={handleLogin}
             text={t('LOGIN', 'Login')}

package/themes/kiosk/src/components/LoginForm/index.tsx

@@ -1,10 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useTheme } from 'styled-components/native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
   LoginForm as LoginFormController,
+  useConfig,
   useLanguage,
   ToastType,
   useToast,
@@ -13,7 +18,8 @@ import {
 
 import {
   WelcomeTextContainer,
-  LogoWrapper
+  LogoWrapper,
+  RecaptchaButton
 } from './styles';
 
 import { OText, OButton, OInput, OIcon } from '../shared';
@@ -26,14 +32,20 @@ const LoginFormUI = (props: LoginParams) => {
     loginButtonText,
     formState,
     handleButtonLoginClick,
-    useRootPoint
+    useRootPoint,
+    handleReCaptcha,
+    enableReCaptcha
   } = props;
 
   const theme = useTheme()
+  const [{ configs }] = useConfig()
   const [ordering, { setOrdering }] = useApi();
   const [, { showToast }] = useToast();
   const [, t] = useLanguage();
-  const {control, handleSubmit, formState: {errors}} = useForm();
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const recaptchaRef = useRef<any>({});
+  const { control, handleSubmit, formState: { errors } } = useForm();
   const [orientationState] = useDeviceOrientation();
 
   const [formsStateValues, setFormsStateValues] = useState<any>({ isSubmitted: false })
@@ -60,6 +72,25 @@ const LoginFormUI = (props: LoginParams) => {
     onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
   };
 
+  const handleOpenRecaptcha = () => {
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      return
+    }
+
+    recaptchaRef.current.open()
+  }
+
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
+  }
+
   const styles = StyleSheet.create({
     logo: {
       height: 80,
@@ -87,6 +118,20 @@ const LoginFormUI = (props: LoginParams) => {
 
   useEffect(() => {
     if (!formState.loading && formState.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+        setFormsStateValues({
+          ...formsStateValues,
+          isSubmitted: false,
+        })
+        return
+      }
       formState.result?.result && showToast(
         ToastType.Error,
         typeof formState.result?.result === 'string'
@@ -122,9 +167,32 @@ const LoginFormUI = (props: LoginParams) => {
     }
   }, [errors]);
 
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaConfig({
+          version: 'v3',
+          siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+      }
+    }
+  }, [configs, enableReCaptcha])
+
   const logo = (
     <LogoWrapper>
-      <OIcon src={theme.images.logos.logotype} style={styles.logo}/>
+      <OIcon src={theme.images.logos.logotype} style={styles.logo} />
     </LogoWrapper>
   );
 
@@ -144,7 +212,7 @@ const LoginFormUI = (props: LoginParams) => {
               value={value}
               autoCapitalize='none'
               autoCorrect={false}
-              inputStyle={{textAlign: 'center'}}
+              inputStyle={{ textAlign: 'center' }}
               onChange={(e: any) => {
                 onChange(e?.target?.value);
                 setFormsStateValues({
@@ -167,7 +235,7 @@ const LoginFormUI = (props: LoginParams) => {
             autoCapitalize="none"
             autoCorrect={false}
             type="email-address"
-            inputStyle={{textAlign: 'center'}}
+            inputStyle={{ textAlign: 'center' }}
             onChange={(e: any) => {
               handleChangeInputEmail(e, onChange);
             }}
@@ -199,7 +267,7 @@ const LoginFormUI = (props: LoginParams) => {
             style={styles.inputStyle}
             value={value}
             onChange={(val: any) => onChange(val)}
-            inputStyle={{textAlign: 'center'}}
+            inputStyle={{ textAlign: 'center' }}
           />
         )}
         name="password"
@@ -211,7 +279,49 @@ const LoginFormUI = (props: LoginParams) => {
         }}
         defaultValue=""
       />
-
+      {(recaptchaConfig?.version) && (
+        <>
+          {recaptchaConfig?.version === 'v3' ? (
+            <ReCaptcha
+              url={recaptchaConfig?.baseUrl}
+              siteKey={recaptchaConfig?.siteKey}
+              containerStyle={{ height: 40 }}
+              onExecute={onRecaptchaVerify}
+              reCaptchaType={1}
+            />
+          ) : (
+            <>
+              <TouchableOpacity
+                onPress={handleOpenRecaptcha}
+              >
+                <RecaptchaButton>
+                  {recaptchaVerified ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={26}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={26}
+                      color={theme.colors.mediumGray}
+                    />
+                  )}
+                  <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                </RecaptchaButton>
+              </TouchableOpacity>
+              <Recaptcha
+                ref={recaptchaRef}
+                siteKey={recaptchaConfig?.siteKey}
+                baseUrl={recaptchaConfig?.baseUrl}
+                onVerify={onRecaptchaVerify}
+                onExpire={() => setRecaptchaVerified(false)}
+              />
+            </>)
+          }
+        </>
+      )}
       <OButton
         onClick={handleSubmit(onSubmit)}
         text={loginButtonText}
@@ -280,7 +390,7 @@ const LoginFormUI = (props: LoginParams) => {
               ? 0 : 0,
           }}
         >
-          { welcome }
+          {welcome}
           {orientationState?.orientation === LANDSCAPE && (
             <View style={{
               justifyContent: 'flex-end',
@@ -327,6 +437,7 @@ export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
     UIComponent: LoginFormUI,
+    isRecaptchaEnable: true
   };
   return <LoginFormController {...loginProps} />;
 };

package/themes/kiosk/src/components/LoginForm/styles.tsx

@@ -7,3 +7,8 @@ export const LogoWrapper = styled.View`
 export const WelcomeTextContainer = styled.View`
   margin-bottom: 30px;
 `;
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

package/themes/kiosk/src/types/index.d.ts

@@ -82,6 +82,8 @@ export interface LoginParams {
   handleSendVerifyCode?: any;
   handleCheckPhoneCode?: any;
   useRootPoint?: any;
+  enableReCaptcha?: boolean;
+  handleReCaptcha?: (vlaue: any) => void;
 }
 
 export interface ProductItemAccordionParams {

package/themes/original/src/components/LoginForm/index.tsx

@@ -5,6 +5,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	LoginForm as LoginFormController,
@@ -235,7 +236,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha(token)
+		handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	const handleChangeOtpType = (type: string) => {
@@ -272,15 +273,39 @@ const LoginFormUI = (props: LoginParams) => {
 
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
+			if (configs?.security_recaptcha_type?.value === 'v3' &&
+				configs?.security_recaptcha_score_v3?.value > 0 &&
+				configs?.security_recaptcha_site_key_v3?.value
+			) {
+				setRecaptchaConfig({
+					version: 'v3',
+					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				return
+			}
+			if (configs?.security_recaptcha_site_key?.value) {
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+			}
 		}
 	}, [configs, enableReCaptcha])
 
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
+			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+				setRecaptchaVerified(false)
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				return
+			}
 			formState.result?.result &&
 				showToast(
 					ToastType.Error,
@@ -596,35 +621,47 @@ const LoginFormUI = (props: LoginParams) => {
 							</TouchableOpacity>
 						)}
 
-						{enableReCaptcha && (
+						{(enableReCaptcha && recaptchaConfig?.version) && (
 							<>
-								<TouchableOpacity
-									onPress={handleOpenRecaptcha}
-								>
-									<RecaptchaButton>
-										{recaptchaVerified ? (
-											<MaterialCommunityIcons
-												name="checkbox-marked"
-												size={26}
-												color={theme.colors.primary}
-											/>
-										) : (
-											<MaterialCommunityIcons
-												name="checkbox-blank-outline"
-												size={26}
-												color={theme.colors.mediumGray}
-											/>
-										)}
-										<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-									</RecaptchaButton>
-								</TouchableOpacity>
-								<Recaptcha
-									ref={recaptchaRef}
-									siteKey={recaptchaConfig?.siteKey}
-									baseUrl={recaptchaConfig?.baseUrl}
-									onVerify={onRecaptchaVerify}
-									onExpire={() => setRecaptchaVerified(false)}
-								/>
+								{recaptchaConfig?.version === 'v3' ? (
+									<ReCaptcha
+										url={recaptchaConfig?.baseUrl}
+										siteKey={recaptchaConfig?.siteKey}
+										containerStyle={{ height: 40 }}
+										onExecute={onRecaptchaVerify}
+										reCaptchaType={1}
+									/>
+								) : (
+									<>
+										<TouchableOpacity
+											onPress={handleOpenRecaptcha}
+										>
+											<RecaptchaButton>
+												{recaptchaVerified ? (
+													<MaterialCommunityIcons
+														name="checkbox-marked"
+														size={26}
+														color={theme.colors.primary}
+													/>
+												) : (
+													<MaterialCommunityIcons
+														name="checkbox-blank-outline"
+														size={26}
+														color={theme.colors.mediumGray}
+													/>
+												)}
+												<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+											</RecaptchaButton>
+										</TouchableOpacity>
+										<Recaptcha
+											ref={recaptchaRef}
+											siteKey={recaptchaConfig?.siteKey}
+											baseUrl={recaptchaConfig?.baseUrl}
+											onVerify={onRecaptchaVerify}
+											onExpire={() => setRecaptchaVerified(false)}
+										/>
+									</>)
+								}
 							</>
 						)}
 						<OButton

package/themes/original/src/components/SignupForm/index.tsx

@@ -7,6 +7,7 @@ import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	SignupForm as SignUpController,
@@ -347,20 +348,44 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha && handleReCaptcha(token)
+		handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
+			if (configs?.security_recaptcha_type?.value === 'v3' &&
+				configs?.security_recaptcha_score_v3?.value > 0 &&
+				configs?.security_recaptcha_site_key_v3?.value
+			) {
+				setRecaptchaConfig({
+					version: 'v3',
+					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				return
+			}
+			if (configs?.security_recaptcha_site_key?.value) {
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+			}
 		}
 	}, [configs, enableReCaptcha])
 
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
+			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+				setRecaptchaVerified(false)
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				return
+			}
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
 			setIsLoadingVerifyModal(false);
@@ -626,36 +651,49 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
-							{enableReCaptcha && (
+							{(enableReCaptcha && recaptchaConfig?.version) && (
 								<>
-									<TouchableOpacity
-										onPress={handleOpenRecaptcha}
-										style={{ marginHorizontal: 4, marginBottom: 10 }}
-									>
-										<RecaptchaButton>
-											{recaptchaVerified ? (
-												<MaterialCommunityIcons
-													name="checkbox-marked"
-													size={23}
-													color={theme.colors.primary}
-												/>
-											) : (
-												<MaterialCommunityIcons
-													name="checkbox-blank-outline"
-													size={23}
-													color={theme.colors.disabled}
-												/>
-											)}
-											<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-										</RecaptchaButton>
-									</TouchableOpacity>
-									<Recaptcha
-										ref={recaptchaRef}
-										siteKey={recaptchaConfig?.siteKey}
-										baseUrl={recaptchaConfig?.baseUrl}
-										onVerify={onRecaptchaVerify}
-										onExpire={() => setRecaptchaVerified(false)}
-									/>
+									{recaptchaConfig?.version === 'v3' ? (
+										<ReCaptcha
+											url={recaptchaConfig?.baseUrl}
+											siteKey={recaptchaConfig?.siteKey}
+											containerStyle={{ height: 40 }}
+											onExecute={onRecaptchaVerify}
+											reCaptchaType={1}
+										/>
+									) : (
+										<>
+											<TouchableOpacity
+												onPress={handleOpenRecaptcha}
+												style={{ marginHorizontal: 4, marginBottom: 10 }}
+											>
+												<RecaptchaButton>
+													{recaptchaVerified ? (
+														<MaterialCommunityIcons
+															name="checkbox-marked"
+															size={23}
+															color={theme.colors.primary}
+														/>
+													) : (
+														<MaterialCommunityIcons
+															name="checkbox-blank-outline"
+															size={23}
+															color={theme.colors.disabled}
+														/>
+													)}
+													<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+												</RecaptchaButton>
+											</TouchableOpacity>
+											<Recaptcha
+												ref={recaptchaRef}
+												siteKey={recaptchaConfig?.siteKey}
+												baseUrl={recaptchaConfig?.baseUrl}
+												onVerify={onRecaptchaVerify}
+												onExpire={() => setRecaptchaVerified(false)}
+											/>
+										</>
+									)}
+
 								</>
 							)}
 							{(signUpTab === 'default') && (