diff --git a/apps/Conduit-UI/src/features/authentication/components/AuthenticationConfig.tsx b/apps/Conduit-UI/src/features/authentication/components/AuthenticationConfig.tsx
index 499446b24..e4a8e60c3 100644
--- a/apps/Conduit-UI/src/features/authentication/components/AuthenticationConfig.tsx
+++ b/apps/Conduit-UI/src/features/authentication/components/AuthenticationConfig.tsx
@@ -1,10 +1,10 @@
import React, { useEffect, useMemo, useState } from 'react';
-import { useForm, FormProvider, useWatch } from 'react-hook-form';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
-import { IAuthenticationConfig } from '../models/AuthModels';
+import { CaptchaProvider, IAuthenticationConfig } from '../models/AuthModels';
import { FormInputSwitch } from '../../../components/common/FormComponents/FormInputSwitch';
import { FormInputText } from '../../../components/common/FormComponents/FormInputText';
import { useAppDispatch, useAppSelector } from '../../../redux/store';
@@ -12,7 +12,9 @@ import { asyncUpdateAuthenticationConfig } from '../store/authenticationSlice';
import { ConduitTooltip, ConfigContainer, ConfigSaveSection } from '@conduitplatform/ui-components';
import { InfoOutlined } from '@mui/icons-material';
import { Icon, useTheme } from '@mui/material';
+import { FormInputSelect } from '../../../components/common/FormComponents/FormInputSelect';
+const captchaProviders = [CaptchaProvider.recaptcha, CaptchaProvider.hcaptcha];
const AuthenticationConfig: React.FC = () => {
const theme = useTheme();
const dispatch = useAppDispatch();
@@ -53,6 +55,11 @@ const AuthenticationConfig: React.FC = () => {
name: 'refreshTokens.setCookie',
});
+ const captchaEnabled = useWatch({
+ control,
+ name: 'captcha.enabled',
+ });
+
const handleCancel = () => {
setEdit(!edit);
methods.reset();
@@ -341,7 +348,7 @@ const AuthenticationConfig: React.FC = () => {
)}
-
+
{
+
+ >
+ )}
+ {isActive && (
+ <>
+
+
+
+
+ Captcha
+
+
+
+
+ {captchaEnabled && (
+ <>
+
+
+
+ Provider:
+
+
+
+ ({
+ label: template,
+ value: template,
+ }))}
+ />
+
+
-
+
+
+ Platforms
+
+
+
+
+
+
+ Android
+
+
+
+
+
+
+
+ Web
+
+
+
+
+
+
+ Routes
+
+
+
+
+
+ Login
+
+
+
+
+
+
+
+ Register
+
+
+
+
+
+
+
+ oAuth2
+
+
+
+
+
+
+ Secret key:
+
+
+
+
+
+ >
+ )}
+
>
)}
diff --git a/apps/Conduit-UI/src/features/authentication/models/AuthModels.ts b/apps/Conduit-UI/src/features/authentication/models/AuthModels.ts
index c14969a2c..e3f45ef25 100644
--- a/apps/Conduit-UI/src/features/authentication/models/AuthModels.ts
+++ b/apps/Conduit-UI/src/features/authentication/models/AuthModels.ts
@@ -86,6 +86,11 @@ export interface CookieOptions {
sameSite: string;
}
+export enum CaptchaProvider {
+ recaptcha = 'recaptcha',
+ hcaptcha = 'hcaptcha',
+}
+
export interface IAuthenticationConfig {
facebook: SignInTypes;
google: SignInTypes;
@@ -119,4 +124,18 @@ export interface IAuthenticationConfig {
phoneAuthentication: { enabled: boolean };
clients: { multipleUserSessions: boolean; multipleClientLogins: boolean };
active: boolean;
+ captcha: {
+ enabled: boolean;
+ acceptablePlatform: {
+ android: boolean;
+ web: boolean;
+ };
+ provider: CaptchaProvider;
+ routes: {
+ login: boolean;
+ register: boolean;
+ oAuth2: boolean;
+ };
+ secretKey?: string;
+ };
}
diff --git a/apps/Conduit-UI/src/features/authentication/store/authenticationSlice.ts b/apps/Conduit-UI/src/features/authentication/store/authenticationSlice.ts
index 92b8a122c..564f59e62 100644
--- a/apps/Conduit-UI/src/features/authentication/store/authenticationSlice.ts
+++ b/apps/Conduit-UI/src/features/authentication/store/authenticationSlice.ts
@@ -1,5 +1,5 @@
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { AuthUser, IAuthenticationConfig } from '../models/AuthModels';
+import { AuthUser, CaptchaProvider, IAuthenticationConfig } from '../models/AuthModels';
import {
blockUnblockUsers,
blockUser,
@@ -98,7 +98,20 @@ const initialState: IAuthenticationSlice = {
verification_redirect_uri: '',
},
service: { enabled: false },
-
+ captcha: {
+ enabled: false,
+ acceptablePlatform: {
+ android: false,
+ web: false,
+ },
+ provider: CaptchaProvider.recaptcha,
+ routes: {
+ login: false,
+ register: false,
+ oAuth2: false,
+ },
+ secretKey: '',
+ },
twitch: {
accountLinking: false,
enabled: false,