feat: error handling and code refactor

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -1,14 +1,27 @@
 import { useState } from 'react';
 import { Button, Form, Modal } from 'antd';
-import put from 'api/v1/domains/id/put';
-import post from 'api/v1/domains/post';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import {
+	useCreateAuthDomain,
+	useUpdateAuthDomain,
+} from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	AuthtypesGoogleConfigDTO,
+	AuthtypesOIDCConfigDTO,
+	AuthtypesPostableAuthDomainDTO,
+	AuthtypesRoleMappingDTO,
+	AuthtypesSamlConfigDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import { FeatureKeys } from 'constants/features';
+import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
-import { PostableAuthDomain } from 'types/api/v1/domains/post';
 
 import AuthnProviderSelector from './AuthnProviderSelector';
 import ConfigureGoogleAuthAuthnProvider from './Providers/AuthnGoogleAuth';
@@ -20,7 +33,22 @@ import './CreateEdit.styles.scss';
 interface CreateOrEditProps {
 	isCreate: boolean;
 	onClose: () => void;
-	record?: GettableAuthDomain;
+	record?: AuthtypesGettableAuthDomainDTO;
+}
+
+// Form values interface for internal use (includes array-based fields for UI)
+interface FormValues {
+	name?: string;
+	ssoEnabled?: boolean;
+	ssoType?: string;
+	googleAuthConfig?: AuthtypesGoogleConfigDTO & {
+		domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>;
+	};
+	samlConfig?: AuthtypesSamlConfigDTO;
+	oidcConfig?: AuthtypesOIDCConfigDTO;
+	roleMapping?: AuthtypesRoleMappingDTO & {
+		groupMappingsList?: Array<{ groupName?: string; role?: string }>;
+	};
 }
 
 function configureAuthnProvider(
@@ -39,64 +67,282 @@ function configureAuthnProvider(
 	}
 }
 
+/**
+ * Converts groupMappingsList array to groupMappings Record for API
+ */
+function convertGroupMappingsToRecord(
+	groupMappingsList?: Array<{ groupName?: string; role?: string }>,
+): Record<string, string> | undefined {
+	if (!Array.isArray(groupMappingsList) || groupMappingsList.length === 0) {
+		return undefined;
+	}
+
+	const groupMappings: Record<string, string> = {};
+	groupMappingsList.forEach((item) => {
+		if (item.groupName && item.role) {
+			groupMappings[item.groupName] = item.role;
+		}
+	});
+
+	return Object.keys(groupMappings).length > 0 ? groupMappings : undefined;
+}
+
+/**
+ * Converts groupMappings Record to groupMappingsList array for form
+ */
+function convertGroupMappingsToList(
+	groupMappings?: Record<string, string> | null,
+): Array<{ groupName: string; role: string }> {
+	if (!groupMappings) {
+		return [];
+	}
+
+	return Object.entries(groupMappings).map(([groupName, role]) => ({
+		groupName,
+		role,
+	}));
+}
+
+/**
+ * Converts domainToAdminEmailList array to domainToAdminEmail Record for API
+ */
+function convertDomainMappingsToRecord(
+	domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>,
+): Record<string, string> | undefined {
+	if (
+		!Array.isArray(domainToAdminEmailList) ||
+		domainToAdminEmailList.length === 0
+	) {
+		return undefined;
+	}
+
+	const domainToAdminEmail: Record<string, string> = {};
+	domainToAdminEmailList.forEach((item) => {
+		if (item.domain && item.adminEmail) {
+			domainToAdminEmail[item.domain] = item.adminEmail;
+		}
+	});
+
+	return Object.keys(domainToAdminEmail).length > 0
+		? domainToAdminEmail
+		: undefined;
+}
+
+/**
+ * Converts domainToAdminEmail Record to domainToAdminEmailList array for form
+ */
+function convertDomainMappingsToList(
+	domainToAdminEmail?: Record<string, string>,
+): Array<{ domain: string; adminEmail: string }> {
+	if (!domainToAdminEmail) {
+		return [];
+	}
+
+	return Object.entries(domainToAdminEmail).map(([domain, adminEmail]) => ({
+		domain,
+		adminEmail,
+	}));
+}
+
+/**
+ * Prepares initial form values from API record
+ */
+function prepareInitialValues(
+	record?: AuthtypesGettableAuthDomainDTO,
+): FormValues {
+	if (!record) {
+		return {
+			name: '',
+			ssoEnabled: false,
+			ssoType: '',
+		};
+	}
+
+	return {
+		...record,
+		googleAuthConfig: record.googleAuthConfig
+			? {
+					...record.googleAuthConfig,
+					domainToAdminEmailList: convertDomainMappingsToList(
+						record.googleAuthConfig.domainToAdminEmail,
+					),
+			  }
+			: undefined,
+		roleMapping: record.roleMapping
+			? {
+					...record.roleMapping,
+					groupMappingsList: convertGroupMappingsToList(
+						record.roleMapping.groupMappings,
+					),
+			  }
+			: undefined,
+	};
+}
+
 function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 	const { isCreate, record, onClose } = props;
-	const [form] = Form.useForm<PostableAuthDomain>();
+	const [form] = Form.useForm<AuthtypesPostableAuthDomainDTO>();
 	const [authnProvider, setAuthnProvider] = useState<string>(
 		record?.ssoType || '',
 	);
 
+	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
 	const { featureFlags } = useAppContext();
+
+	const handleError = (error: AxiosError<RenderErrorResponseDTO>): void => {
+		try {
+			ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		} catch (apiError) {
+			showErrorModal(apiError as APIError);
+		}
+	};
 	const samlEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.SSO)?.active || false;
 
+	const {
+		mutate: createAuthDomain,
+		isLoading: isCreating,
+	} = useCreateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
+
+	const {
+		mutate: updateAuthDomain,
+		isLoading: isUpdating,
+	} = useUpdateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
+
+	/**
+	 * Prepares Google Auth config for API payload
+	 */
+	const getGoogleAuthConfig = (): AuthtypesGoogleConfigDTO | undefined => {
+		const config = form.getFieldValue('googleAuthConfig');
+		if (!config) {
+			return undefined;
+		}
+
+		const { domainToAdminEmailList, ...rest } = config;
+		const domainToAdminEmail = convertDomainMappingsToRecord(
+			domainToAdminEmailList,
+		);
+
+		return {
+			...rest,
+			...(domainToAdminEmail && { domainToAdminEmail }),
+		};
+	};
+
+	/**
+	 * Prepares role mapping for API payload
+	 */
+	const getRoleMapping = (): AuthtypesRoleMappingDTO | undefined => {
+		const roleMapping = form.getFieldValue('roleMapping');
+		if (!roleMapping) {
+			return undefined;
+		}
+
+		const { groupMappingsList, ...rest } = roleMapping;
+		const groupMappings = convertGroupMappingsToRecord(groupMappingsList);
+
+		// Only return roleMapping if there's meaningful content
+		const hasDefaultRole = rest.defaultRole && rest.defaultRole !== 'VIEWER';
+		const hasUseRoleAttribute = rest.useRoleAttribute === true;
+		const hasGroupMappings =
+			groupMappings && Object.keys(groupMappings).length > 0;
+
+		if (!hasDefaultRole && !hasUseRoleAttribute && !hasGroupMappings) {
+			return undefined;
+		}
+
+		return {
+			...rest,
+			...(groupMappings && { groupMappings }),
+		};
+	};
+
 	const onSubmitHandler = async (): Promise<void> => {
+		try {
+			await form.validateFields();
+		} catch {
+			return;
+		}
+
 		const name = form.getFieldValue('name');
-		const googleAuthConfig = form.getFieldValue('googleAuthConfig');
+		const googleAuthConfig = getGoogleAuthConfig();
 		const samlConfig = form.getFieldValue('samlConfig');
 		const oidcConfig = form.getFieldValue('oidcConfig');
+		const roleMapping = getRoleMapping();
 
-		try {
-			if (isCreate) {
-				await post({
-					name,
-					config: {
-						ssoEnabled: true,
-						ssoType: authnProvider,
-						googleAuthConfig,
-						samlConfig,
-						oidcConfig,
+		if (isCreate) {
+			createAuthDomain(
+				{
+					data: {
+						name,
+						config: {
+							ssoEnabled: true,
+							ssoType: authnProvider,
+							googleAuthConfig,
+							samlConfig,
+							oidcConfig,
+							roleMapping,
+						},
 					},
-				});
-			} else {
-				await put({
-					id: record?.id || '',
-					config: {
-						ssoEnabled: form.getFieldValue('ssoEnabled'),
-						ssoType: authnProvider,
-						googleAuthConfig,
-						samlConfig,
-						oidcConfig,
+				},
+				{
+					onSuccess: () => {
+						notifications.success({
+							message: 'Domain created successfully',
+						});
+						onClose();
 					},
-				});
+					onError: handleError,
+				},
+			);
+		} else {
+			if (!record?.id) {
+				return;
 			}
 
-			onClose();
-		} catch (error) {
-			showErrorModal(error as APIError);
+			updateAuthDomain(
+				{
+					pathParams: { id: record.id },
+					data: {
+						config: {
+							ssoEnabled: form.getFieldValue('ssoEnabled'),
+							ssoType: authnProvider,
+							googleAuthConfig,
+							samlConfig,
+							oidcConfig,
+							roleMapping,
+						},
+					},
+				},
+				{
+					onSuccess: () => {
+						notifications.success({
+							message: 'Domain updated successfully',
+						});
+						onClose();
+					},
+					onError: handleError,
+				},
+			);
 		}
 	};
 
 	const onBackHandler = (): void => {
+		form.resetFields();
 		setAuthnProvider('');
 	};
 
 	return (
-		<Modal open footer={null} onCancel={onClose}>
+		<Modal
+			open
+			footer={null}
+			onCancel={onClose}
+			width={authnProvider ? 980 : undefined}
+		>
 			<Form
 				name="auth-domain"
-				initialValues={defaultTo(record, {
+				initialValues={defaultTo(prepareInitialValues(record), {
 					name: '',
 					ssoEnabled: false,
 					ssoType: '',
@@ -116,7 +362,11 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 						<section className="action-buttons">
 							{isCreate && <Button onClick={onBackHandler}>Back</Button>}
 							{!isCreate && <Button onClick={onClose}>Cancel</Button>}
-							<Button onClick={onSubmitHandler} type="primary">
+							<Button
+								onClick={onSubmitHandler}
+								type="primary"
+								loading={isCreating || isUpdating}
+							>
 								Save Changes
 							</Button>
 						</section>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -1,20 +1,48 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
+
+import DomainMappingList from './components/DomainMappingList';
+import EmailTagInput from './components/EmailTagInput';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'workspace-groups' | 'role-mapping' | null;
+
 function ConfigureGoogleAuthAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+	const fetchGroups = Form.useWatch(['googleAuthConfig', 'fetchGroups'], form);
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleWorkspaceGroupsChange = useCallback(
+		(keys: string | string[]): void => {
+			const isExpanding = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			setExpandedSection(isExpanding ? 'workspace-groups' : null);
+		},
+		[],
+	);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
 	return (
 		<div className="google-auth">
-			<section className="header">
-				<Typography.Text className="title">
+			<section className="google-auth__header">
+				<h3 className="google-auth__title typography-label-medium-600">
 					Edit Google Authentication
-				</Typography.Text>
-				<Typography.Paragraph className="description">
+				</h3>
+				<p className="google-auth__description typography-paragraph-base-400">
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
@@ -25,50 +53,243 @@ function ConfigureGoogleAuthAuthnProvider({
 						docs
 					</a>{' '}
 					for more information.
-				</Typography.Paragraph>
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				className="field"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="google-auth__columns">
+				{/* Left Column - Core OAuth Settings */}
+				<div className="google-auth__left">
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="google-domain"
+						>
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="google-auth__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="google-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client ID"
-				name={['googleAuthConfig', 'clientId']}
-				className="field"
-				tooltip={{
-					title: `ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="google-client-id"
+						>
+							Client ID
+							<Tooltip title="ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientId']}
+							className="google-auth__form-item"
+							rules={[
+								{ required: true, message: 'Client ID is required', whitespace: true },
+							]}
+						>
+							<Input id="google-client-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client Secret"
-				name={['googleAuthConfig', 'clientSecret']}
-				className="field"
-				tooltip={{
-					title: `It is the application's secret.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="google-client-secret"
+						>
+							Client Secret
+							<Tooltip title="It is the application's secret.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientSecret']}
+							className="google-auth__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'Client Secret is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="google-client-secret" />
+						</Form.Item>
+					</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="Google OAuth2 won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+					<div className="google-auth__checkbox-row">
+						<Form.Item
+							name={['googleAuthConfig', 'insecureSkipEmailVerified']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="google-skip-email-verification"
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['googleAuthConfig', 'insecureSkipEmailVerified'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
+							<CircleHelp size={14} className="google-auth__label-icon" />
+						</Tooltip>
+					</div>
+
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="Google OAuth2 won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
+
+				{/* Right Column - Google Workspace Groups (Advanced) */}
+				<div className="google-auth__right">
+					<Collapse
+						bordered={false}
+						activeKey={
+							expandedSection === 'workspace-groups' ? ['workspace-groups'] : []
+						}
+						onChange={handleWorkspaceGroupsChange}
+						className="google-auth__collapse"
+						expandIcon={(): null => null}
+					>
+						<Collapse.Panel
+							key="workspace-groups"
+							header={
+								<div className="google-auth__collapse-header">
+									{expandedSection !== 'workspace-groups' ? (
+										<ChevronRight size={16} />
+									) : (
+										<ChevronDown size={16} />
+									)}
+									<div className="google-auth__collapse-header-text">
+										<h4 className="google-auth__section-title typography-label-base-600">
+											Google Workspace Groups (Advanced)
+										</h4>
+										<p className="google-auth__section-description typography-paragraph-small-400">
+											Enable group fetching to retrieve user groups from Google Workspace.
+											Requires a Service Account with domain-wide delegation.
+										</p>
+									</div>
+								</div>
+							}
+						>
+							<div className="google-auth__group-content">
+								<div className="google-auth__checkbox-row">
+									<Form.Item
+										name={['googleAuthConfig', 'fetchGroups']}
+										valuePropName="checked"
+										noStyle
+									>
+										<Checkbox
+											id="google-fetch-groups"
+											labelName="Fetch Groups"
+											onCheckedChange={(checked: boolean): void => {
+												form.setFieldValue(['googleAuthConfig', 'fetchGroups'], checked);
+											}}
+										/>
+									</Form.Item>
+									<Tooltip title="Enable fetching Google Workspace groups for the user. Requires service account configuration.">
+										<CircleHelp size={14} className="google-auth__label-icon" />
+									</Tooltip>
+								</div>
+
+								{fetchGroups && (
+									<div className="google-auth__group-fields">
+										<div className="google-auth__field-group">
+											<label
+												className="google-auth__label typography-label-base-500"
+												htmlFor="google-service-account-json"
+											>
+												Service Account JSON
+												<Tooltip title="The JSON content of the Google Service Account credentials file. Required for group fetching.">
+													<CircleHelp size={14} className="google-auth__label-icon" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'serviceAccountJson']}
+												className="google-auth__form-item"
+											>
+												<TextArea
+													id="google-service-account-json"
+													rows={3}
+													placeholder="Paste service account JSON"
+													className="google-auth__textarea"
+												/>
+											</Form.Item>
+										</div>
+
+										<DomainMappingList
+											fieldNamePrefix={['googleAuthConfig', 'domainToAdminEmailList']}
+										/>
+
+										<div className="google-auth__checkbox-row">
+											<Form.Item
+												name={['googleAuthConfig', 'fetchTransitiveGroupMembership']}
+												valuePropName="checked"
+												noStyle
+											>
+												<Checkbox
+													id="google-transitive-membership"
+													labelName="Fetch Transitive Group Membership"
+													onCheckedChange={(checked: boolean): void => {
+														form.setFieldValue(
+															['googleAuthConfig', 'fetchTransitiveGroupMembership'],
+															checked,
+														);
+													}}
+												/>
+											</Form.Item>
+											<Tooltip title="If enabled, recursively fetch groups that contain other groups (transitive membership).">
+												<CircleHelp size={14} className="google-auth__label-icon" />
+											</Tooltip>
+										</div>
+
+										<div className="google-auth__field-group">
+											<label
+												className="google-auth__label typography-label-base-500"
+												htmlFor="google-allowed-groups"
+											>
+												Allowed Groups
+												<Tooltip title="Optional list of allowed groups. If configured, only users belonging to one of these groups will be allowed to login.">
+													<CircleHelp size={14} className="google-auth__label-icon" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'allowedGroups']}
+												className="google-auth__form-item"
+											>
+												<EmailTagInput placeholder="Type a group email and press Enter" />
+											</Form.Item>
+										</div>
+									</div>
+								)}
+							</div>
+						</Collapse.Panel>
+					</Collapse>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -1,110 +1,228 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox, Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { Input } from '@signozhq/input';
+import { Form, Tooltip } from 'antd';
+import { CircleHelp } from 'lucide-react';
+
+import ClaimMappingSection from './components/ClaimMappingSection';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'claim-mapping' | 'role-mapping' | null;
+
 function ConfigureOIDCAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleClaimMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'claim-mapping' : null);
+	}, []);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
 	return (
-		<div className="saml">
-			<section className="header">
-				<Typography.Text className="title">
+		<div className="google-auth">
+			<section className="google-auth__header">
+				<h3 className="google-auth__title typography-label-medium-600">
 					Edit OIDC Authentication
-				</Typography.Text>
+				</h3>
+				<p className="google-auth__description typography-paragraph-base-400">
+					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
+					the{' '}
+					<a
+						href="https://signoz.io/docs/userguide/sso-authentication"
+						target="_blank"
+						rel="noreferrer"
+					>
+						docs
+					</a>{' '}
+					for more information.
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="google-auth__columns">
+				{/* Left Column - Core OIDC Settings */}
+				<div className="google-auth__left">
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="oidc-domain"
+						>
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="google-auth__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Issuer URL"
-				name={['oidcConfig', 'issuer']}
-				tooltip={{
-					title: `It is the URL identifier for the service. For example: "https://accounts.google.com" or "https://login.salesforce.com".`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="oidc-issuer"
+						>
+							Issuer URL
+							<Tooltip title='The URL identifier for the OIDC provider. For example: "https://accounts.google.com" or "https://login.salesforce.com".'>
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuer']}
+							className="google-auth__form-item"
+							rules={[
+								{ required: true, message: 'Issuer URL is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-issuer" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Issuer Alias"
-				name={['oidcConfig', 'issuerAlias']}
-				tooltip={{
-					title: `Some offspec providers like Azure, Oracle IDCS have oidc discovery url different from issuer url which causes issuerValidation to fail.
-					This provides a way to override the Issuer url from the .well-known/openid-configuration issuer`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="oidc-issuer-alias"
+						>
+							Issuer Alias
+							<Tooltip title="Optional: Override the issuer URL from .well-known/openid-configuration for providers like Azure or Oracle IDCS.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuerAlias']}
+							className="google-auth__form-item"
+						>
+							<Input id="oidc-issuer-alias" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client ID"
-				name={['oidcConfig', 'clientId']}
-				tooltip={{ title: `It is the application's ID.` }}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="oidc-client-id"
+						>
+							Client ID
+							<Tooltip title="The application's client ID from your OIDC provider.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientId']}
+							className="google-auth__form-item"
+							rules={[
+								{ required: true, message: 'Client ID is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-client-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client Secret"
-				name={['oidcConfig', 'clientSecret']}
-				tooltip={{ title: `It is the application's secret.` }}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="oidc-client-secret"
+						>
+							Client Secret
+							<Tooltip title="The application's client secret from your OIDC provider.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientSecret']}
+							className="google-auth__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'Client Secret is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="oidc-client-secret" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Email Claim Mapping"
-				name={['oidcConfig', 'claimMapping', 'email']}
-				tooltip={{
-					title: `Mapping of email claims to the corresponding email field in the token.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__checkbox-row">
+						<Form.Item
+							name={['oidcConfig', 'insecureSkipEmailVerified']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="oidc-skip-email-verification"
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['oidcConfig', 'insecureSkipEmailVerified'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
+							<CircleHelp size={14} className="google-auth__label-icon" />
+						</Tooltip>
+					</div>
 
-			<Form.Item
-				label="Skip Email Verification"
-				name={['oidcConfig', 'insecureSkipEmailVerified']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Whether to skip email verification. Defaults to "false"`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<div className="google-auth__checkbox-row">
+						<Form.Item
+							name={['oidcConfig', 'getUserInfo']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="oidc-get-user-info"
+								labelName="Get User Info"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(['oidcConfig', 'getUserInfo'], checked);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title="Use the userinfo endpoint to get additional claims. Useful when providers return thin ID tokens.">
+							<CircleHelp size={14} className="google-auth__label-icon" />
+						</Tooltip>
+					</div>
 
-			<Form.Item
-				label="Get User Info"
-				name={['oidcConfig', 'getUserInfo']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Uses the userinfo endpoint to get additional claims for the token. This is especially useful where upstreams return "thin" id tokens`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="OIDC won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="OIDC won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+				{/* Right Column - Advanced Settings */}
+				<div className="google-auth__right">
+					<ClaimMappingSection
+						fieldNamePrefix={['oidcConfig', 'claimMapping']}
+						isExpanded={expandedSection === 'claim-mapping'}
+						onExpandChange={handleClaimMappingChange}
+					/>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -1,82 +1,204 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox, Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { Input } from '@signozhq/input';
+import { Form, Tooltip } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import { CircleHelp } from 'lucide-react';
+
+import AttributeMappingSection from './components/AttributeMappingSection';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'attribute-mapping' | 'role-mapping' | null;
+
 function ConfigureSAMLAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleAttributeMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'attribute-mapping' : null);
+	}, []);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
 	return (
-		<div className="saml">
-			<section className="header">
-				<Typography.Text className="title">
+		<div className="google-auth">
+			<section className="google-auth__header">
+				<h3 className="google-auth__title typography-label-medium-600">
 					Edit SAML Authentication
-				</Typography.Text>
+				</h3>
+				<p className="google-auth__description typography-paragraph-base-400">
+					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
+					<a
+						href="https://signoz.io/docs/userguide/sso-authentication"
+						target="_blank"
+						rel="noreferrer"
+					>
+						docs
+					</a>{' '}
+					for more information.
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="google-auth__columns">
+				{/* Left Column - Core SAML Settings */}
+				<div className="google-auth__left">
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="saml-domain"
+						>
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="google-auth__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="saml-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML ACS URL"
-				name={['samlConfig', 'samlIdp']}
-				tooltip={{
-					title: `The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider. Example: <md:SingleSignOnService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST" Location="{samlIdp}"/>`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="saml-acs-url"
+						>
+							SAML ACS URL
+							<Tooltip title="The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlIdp']}
+							className="google-auth__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML ACS URL is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="saml-acs-url" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML Entity ID"
-				name={['samlConfig', 'samlEntity']}
-				tooltip={{
-					title: `The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata of the identity provider. Example: <md:EntityDescriptor xmlns:md="urn:oasis:names:tc:SAML:2.0:metadata" entityID="{samlEntity}">`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="saml-entity-id"
+						>
+							SAML Entity ID
+							<Tooltip title="The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlEntity']}
+							className="google-auth__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML Entity ID is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="saml-entity-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML X.509 Certificate"
-				name={['samlConfig', 'samlCert']}
-				tooltip={{
-					title: `The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata of the identity provider. Example: <ds:X509Certificate><ds:X509Certificate>{samlCert}</ds:X509Certificate></ds:X509Certificate>`,
-				}}
-			>
-				<Input.TextArea rows={4} />
-			</Form.Item>
+					<div className="google-auth__field-group">
+						<label
+							className="google-auth__label typography-label-base-500"
+							htmlFor="saml-certificate"
+						>
+							SAML X.509 Certificate
+							<Tooltip title="The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata.">
+								<CircleHelp size={14} className="google-auth__label-icon" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlCert']}
+							className="google-auth__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML Certificate is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<TextArea
+								id="saml-certificate"
+								rows={3}
+								placeholder="Paste X.509 certificate"
+								className="google-auth__textarea"
+							/>
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Skip Signing AuthN Requests"
-				name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Whether to skip signing the SAML requests. It can typically be found in the WantAuthnRequestsSigned attribute of the IDPSSODescriptor element in the SAML metadata of the identity provider. Example: <md:IDPSSODescriptor WantAuthnRequestsSigned="false" protocolSupportEnumeration="urn:oasis:names:tc:SAML:2.0:protocol">
-					For providers like jumpcloud, this should be set to true.Note: This is the reverse of WantAuthnRequestsSigned. If WantAuthnRequestsSigned is false, then InsecureSkipAuthNRequestsSigned should be true.`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<div className="google-auth__checkbox-row">
+						<Form.Item
+							name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="saml-skip-signing"
+								labelName="Skip Signing AuthN Requests"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['samlConfig', 'insecureSkipAuthNRequestsSigned'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title="Whether to skip signing the SAML requests. For providers like JumpCloud, this should be enabled.">
+							<CircleHelp size={14} className="google-auth__label-icon" />
+						</Tooltip>
+					</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="SAML won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="SAML won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
+
+				{/* Right Column - Advanced Settings */}
+				<div className="google-auth__right">
+					<AttributeMappingSection
+						fieldNamePrefix={['samlConfig', 'attributeMapping']}
+						isExpanded={expandedSection === 'attribute-mapping'}
+						onExpandChange={handleAttributeMappingChange}
+					/>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/Providers.styles.scss

@@ -2,23 +2,248 @@
 	display: flex;
 	flex-direction: column;
 
-	.ant-form-item {
-		margin-bottom: 12px !important;
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		margin-bottom: 16px;
 	}
 
-	.header {
+	&__title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__description {
+		margin: 0;
+		color: var(--l2-foreground);
+
+		a {
+			color: var(--accent-primary);
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&__columns {
+		display: grid;
+		grid-template-columns: 0.9fr 1fr;
+		gap: 24px;
+	}
+
+	&__left {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__right {
+		border-left: 1px solid var(--l3-border);
+		padding-left: 24px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	// --- Form field layout ---
+	&__field-group {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
 		margin-bottom: 12px;
+	}
 
-		.title {
-			font-weight: bold;
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// --- Checkbox row: label on left, checkbox on right ---
+	&__checkbox-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin-bottom: 12px;
+	}
+
+	// --- Input styles (matching auth flow standards) ---
+	input,
+	textarea {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
 		}
 
-		.description {
-			margin-bottom: 0px !important;
+		&:hover {
+			border-color: var(--l3-border) !important;
 		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+
+	// Textarea should not have fixed height
+	textarea {
+		height: auto;
+	}
+
+	// --- Textarea specific styles ---
+	&__textarea {
+		min-height: 60px !important;
+		max-height: 200px;
+		resize: vertical;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+		font-family: 'SF Mono', monospace;
+		font-size: 12px;
+		line-height: 18px;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			font-family: Inter, sans-serif;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+
+	// --- Checkbox border visibility (lighter for dark modal bg) ---
+	button[role='checkbox'] {
+		border: 1px solid var(--l2-foreground) !important;
+		border-radius: 2px;
+
+		&[data-state='checked'] {
+			background-color: var(--bg-robin-500) !important;
+			border-color: var(--bg-robin-500) !important;
+		}
+	}
+
+	// --- Collapsible section ---
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	// --- Group fields that scroll when "Fetch Groups" is on ---
+	&__group-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	&__group-fields {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Remove bottom margins from children since we rely on gap
+		.google-auth__field-group,
+		.google-auth__checkbox-row {
+			margin-bottom: 0;
+		}
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		// Firefox thin scrollbar
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
 	}
 
 	.callout {
@@ -26,6 +251,37 @@
 	}
 }
 
+// --- Light mode overrides ---
+.lightMode {
+	.google-auth {
+		input,
+		textarea {
+			background: var(--bg-vanilla-200) !important;
+			border-color: var(--bg-vanilla-300) !important;
+			color: var(--text-ink-500) !important;
+
+			&::placeholder {
+				color: var(--text-neutral-light-200) !important;
+			}
+
+			&:focus,
+			&:focus-visible {
+				border-color: var(--bg-robin-500) !important;
+			}
+		}
+
+		&__textarea {
+			background: var(--bg-vanilla-200) !important;
+			border-color: var(--bg-vanilla-300) !important;
+			color: var(--text-ink-500) !important;
+
+			&::placeholder {
+				color: var(--text-neutral-light-200) !important;
+			}
+		}
+	}
+}
+
 .saml {
 	display: flex;
 	flex-direction: column;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.styles.scss

@@ -0,0 +1,151 @@
+.attribute-mapping-section {
+	display: flex;
+	flex-direction: column;
+
+	// --- Collapsible section ---
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	// --- Content area with scroll ---
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		// Firefox thin scrollbar
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	// --- Field group layout ---
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// --- Input styles ---
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}
+
+// --- Light mode overrides ---
+.lightMode {
+	.attribute-mapping-section {
+		input {
+			background: var(--bg-vanilla-200) !important;
+			border-color: var(--bg-vanilla-300) !important;
+			color: var(--text-ink-500) !important;
+
+			&::placeholder {
+				color: var(--text-neutral-light-200) !important;
+			}
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.tsx

@@ -0,0 +1,141 @@
+import { useCallback, useState } from 'react';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
+
+import './AttributeMappingSection.styles.scss';
+
+interface AttributeMappingSectionProps {
+	/** The form field name prefix for the attribute mapping configuration */
+	fieldNamePrefix: string[];
+	/** Whether the section is expanded (controlled mode) */
+	isExpanded?: boolean;
+	/** Callback when expand/collapse is toggled */
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function AttributeMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: AttributeMappingSectionProps): JSX.Element {
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['attribute-mapping'] : [];
+
+	return (
+		<div className="attribute-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="attribute-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="attribute-mapping"
+					header={
+						<div className="attribute-mapping-section__collapse-header">
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="attribute-mapping-section__collapse-header-text">
+								<h4 className="attribute-mapping-section__section-title typography-label-base-600">
+									Attribute Mapping (Advanced)
+								</h4>
+								<p className="attribute-mapping-section__section-description typography-paragraph-small-400">
+									Configure how SAML assertion attributes from your Identity Provider map
+									to SigNoz user attributes. Leave empty to use default values. Note:
+									Email is always extracted from the NameID assertion.
+								</p>
+							</div>
+						</div>
+					}
+				>
+					<div className="attribute-mapping-section__content">
+						{/* Name Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label typography-label-base-500"
+								htmlFor="name-attribute"
+							>
+								Name Attribute
+								<Tooltip title="The SAML attribute key that contains the user's display name. Default: 'name'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="name-attribute" placeholder="name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label typography-label-base-500"
+								htmlFor="groups-attribute"
+							>
+								Groups Attribute
+								<Tooltip title="The SAML attribute key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="groups-attribute" placeholder="groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label typography-label-base-500"
+								htmlFor="role-attribute"
+							>
+								Role Attribute
+								<Tooltip title="The SAML attribute key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp
+										size={14}
+										className="attribute-mapping-section__label-icon"
+									/>
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="role-attribute" placeholder="role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default AttributeMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.styles.scss

@@ -0,0 +1,151 @@
+.claim-mapping-section {
+	display: flex;
+	flex-direction: column;
+
+	// --- Collapsible section ---
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	// --- Content area with scroll ---
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		// Firefox thin scrollbar
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	// --- Field group layout ---
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// --- Input styles ---
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}
+
+// --- Light mode overrides ---
+.lightMode {
+	.claim-mapping-section {
+		input {
+			background: var(--bg-vanilla-200) !important;
+			border-color: var(--bg-vanilla-300) !important;
+			color: var(--text-ink-500) !important;
+
+			&::placeholder {
+				color: var(--text-neutral-light-200) !important;
+			}
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useState } from 'react';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
+
+import './ClaimMappingSection.styles.scss';
+
+interface ClaimMappingSectionProps {
+	/** The form field name prefix for the claim mapping configuration */
+	fieldNamePrefix: string[];
+	/** Whether the section is expanded (controlled mode) */
+	isExpanded?: boolean;
+	/** Callback when expand/collapse is toggled */
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function ClaimMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: ClaimMappingSectionProps): JSX.Element {
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['claim-mapping'] : [];
+
+	return (
+		<div className="claim-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="claim-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="claim-mapping"
+					header={
+						<div className="claim-mapping-section__collapse-header">
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="claim-mapping-section__collapse-header-text">
+								<h4 className="claim-mapping-section__section-title typography-label-base-600">
+									Claim Mapping (Advanced)
+								</h4>
+								<p className="claim-mapping-section__section-description typography-paragraph-small-400">
+									Configure how claims from your Identity Provider map to SigNoz user
+									attributes. Leave empty to use default values.
+								</p>
+							</div>
+						</div>
+					}
+				>
+					<div className="claim-mapping-section__content">
+						{/* Email Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label
+								className="claim-mapping-section__label typography-label-base-500"
+								htmlFor="email-claim"
+							>
+								Email Claim
+								<Tooltip title="The claim key that contains the user's email address. Default: 'email'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'email']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="email-claim" placeholder="email" />
+							</Form.Item>
+						</div>
+
+						{/* Name Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label
+								className="claim-mapping-section__label typography-label-base-500"
+								htmlFor="name-claim"
+							>
+								Name Claim
+								<Tooltip title="The claim key that contains the user's display name. Default: 'name'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="name-claim" placeholder="name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label
+								className="claim-mapping-section__label typography-label-base-500"
+								htmlFor="groups-claim"
+							>
+								Groups Claim
+								<Tooltip title="The claim key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="groups-claim" placeholder="groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label
+								className="claim-mapping-section__label typography-label-base-500"
+								htmlFor="role-claim"
+							>
+								Role Claim
+								<Tooltip title="The claim key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp size={14} className="claim-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="role-claim" placeholder="role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default ClaimMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.styles.scss

@@ -0,0 +1,118 @@
+.domain-mapping-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-bottom: 4px;
+	}
+
+	&__title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+	}
+
+	&__field {
+		flex: 1;
+	}
+
+	&__remove-btn {
+		flex-shrink: 0;
+		width: 32px !important;
+		height: 32px !important;
+		min-width: 32px !important;
+		padding: 0 !important;
+		border: none !important;
+		border-radius: 2px !important;
+		background: transparent !important;
+		color: #e5484d !important;
+		opacity: 0.6 !important;
+		cursor: pointer;
+		transition: background-color 0.2s, opacity 0.2s;
+		box-shadow: none !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			color: #e5484d !important;
+			width: 12px !important;
+			height: 12px !important;
+		}
+
+		&:hover {
+			background: rgba(229, 72, 77, 0.1) !important;
+			opacity: 0.9 !important;
+			color: #e5484d !important;
+
+			svg {
+				color: #e5484d !important;
+			}
+		}
+
+		&:active {
+			opacity: 0.7 !important;
+			background: rgba(229, 72, 77, 0.15) !important;
+		}
+	}
+
+	&__add-btn {
+		width: 100%;
+
+		// Ensure icon is visible
+		svg,
+		[class*='icon'] {
+			color: var(--l2-foreground) !important;
+			display: inline-block !important;
+			opacity: 1 !important;
+		}
+
+		&:hover {
+			color: var(--l1-foreground);
+
+			svg,
+			[class*='icon'] {
+				color: var(--l1-foreground) !important;
+			}
+		}
+	}
+}
+
+// Light mode overrides
+.lightMode {
+	.domain-mapping-list {
+		&__row input {
+			background: var(--bg-vanilla-200) !important;
+			border-color: var(--bg-vanilla-300) !important;
+			color: var(--text-ink-500) !important;
+
+			&::placeholder {
+				color: var(--text-neutral-light-200) !important;
+			}
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.tsx

@@ -0,0 +1,92 @@
+import { useCallback } from 'react';
+import { Button } from '@signozhq/button';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form } from 'antd';
+
+import './DomainMappingList.styles.scss';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface DomainMappingListProps {
+	/** The form field name prefix for the domain mapping list */
+	fieldNamePrefix: string[];
+}
+
+function DomainMappingList({
+	fieldNamePrefix,
+}: DomainMappingListProps): JSX.Element {
+	const validateEmail = useCallback(
+		(_: unknown, value: string): Promise<void> => {
+			if (!value) {
+				return Promise.reject(new Error('Admin email is required'));
+			}
+			if (!EMAIL_REGEX.test(value)) {
+				return Promise.reject(new Error('Please enter a valid email'));
+			}
+			return Promise.resolve();
+		},
+		[],
+	);
+
+	return (
+		<div className="domain-mapping-list">
+			<div className="domain-mapping-list__header">
+				<span className="domain-mapping-list__title">
+					Domain to Admin Email Mapping
+				</span>
+				<p className="domain-mapping-list__description">
+					Map workspace domains to admin emails for service account impersonation.
+					Use &quot;*&quot; as a wildcard for any domain.
+				</p>
+			</div>
+
+			<Form.List name={fieldNamePrefix}>
+				{(fields, { add, remove }): JSX.Element => (
+					<div className="domain-mapping-list__items">
+						{fields.map((field) => (
+							<div key={field.key} className="domain-mapping-list__row">
+								<Form.Item
+									name={[field.name, 'domain']}
+									className="domain-mapping-list__field"
+									rules={[{ required: true, message: 'Domain is required' }]}
+								>
+									<Input placeholder="Domain (e.g., example.com or *)" />
+								</Form.Item>
+
+								<Form.Item
+									name={[field.name, 'adminEmail']}
+									className="domain-mapping-list__field"
+									rules={[{ validator: validateEmail }]}
+								>
+									<Input placeholder="Admin Email" />
+								</Form.Item>
+
+								<Button
+									variant="ghost"
+									color="secondary"
+									className="domain-mapping-list__remove-btn"
+									onClick={(): void => remove(field.name)}
+									aria-label="Remove mapping"
+								>
+									<Trash2 size={12} />
+								</Button>
+							</div>
+						))}
+
+						<Button
+							variant="dashed"
+							onClick={(): void => add({ domain: '', adminEmail: '' })}
+							prefixIcon={<Plus size={14} />}
+							className="domain-mapping-list__add-btn"
+						>
+							Add Domain Mapping
+						</Button>
+					</div>
+				)}
+			</Form.List>
+		</div>
+	);
+}
+
+export default DomainMappingList;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.styles.scss

@@ -0,0 +1,30 @@
+.email-tag-input {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+
+	&__select {
+		width: 100%;
+
+		.ant-select-selector {
+			.ant-select-selection-search {
+				// margin-inline-start: 0 !important;
+
+				input {
+					height: 32px !important;
+					border: none !important;
+					background: transparent !important;
+					padding: 0 !important;
+					margin: 0 !important;
+					box-shadow: none !important;
+					font-family: inherit !important;
+				}
+			}
+		}
+	}
+
+	&__error {
+		margin: 0;
+		color: var(--bg-cherry-500);
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.tsx

@@ -0,0 +1,61 @@
+import { useCallback, useState } from 'react';
+import { Select, Tooltip } from 'antd';
+
+import './EmailTagInput.styles.scss';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface EmailTagInputProps {
+	/** Current value (array of email strings) */
+	value?: string[];
+	/** Change handler */
+	onChange?: (value: string[]) => void;
+	/** Placeholder text */
+	placeholder?: string;
+}
+
+function EmailTagInput({
+	value = [],
+	onChange,
+	placeholder = 'Type an email and press Enter',
+}: EmailTagInputProps): JSX.Element {
+	const [validationError, setValidationError] = useState('');
+
+	const handleChange = useCallback(
+		(newValues: string[]): void => {
+			const addedValues = newValues.filter((v) => !value.includes(v));
+			const invalidEmail = addedValues.find((v) => !EMAIL_REGEX.test(v));
+
+			if (invalidEmail) {
+				setValidationError(`"${invalidEmail}" is not a valid email`);
+				return;
+			}
+			setValidationError('');
+			onChange?.(newValues);
+		},
+		[onChange, value],
+	);
+
+	return (
+		<div className="email-tag-input">
+			<Tooltip
+				title={validationError}
+				open={!!validationError}
+				placement="topRight"
+			>
+				<Select
+					mode="tags"
+					value={value}
+					onChange={handleChange}
+					placeholder={placeholder}
+					tokenSeparators={[',', ' ']}
+					className="email-tag-input__select"
+					allowClear
+					status={validationError ? 'error' : undefined}
+				/>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default EmailTagInput;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.styles.scss

@@ -0,0 +1,328 @@
+.role-mapping-section {
+	display: flex;
+	flex-direction: column;
+	margin-top: 24px;
+
+	// --- Collapsible section ---
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	// --- Content area with scroll ---
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		// Firefox thin scrollbar
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	// --- Field group layout ---
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__label-icon {
+		color: var(--l3-foreground);
+		cursor: help;
+		flex-shrink: 0;
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// --- Checkbox row ---
+	&__checkbox-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	// --- Select styling ---
+	&__select {
+		width: 100%;
+
+		&.ant-select {
+			.ant-select-selector {
+				height: 32px;
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l3-border) !important;
+				border-radius: 2px;
+				color: var(--l1-foreground) !important;
+
+				.ant-select-selection-item {
+					color: var(--l1-foreground) !important;
+				}
+			}
+
+			&:hover .ant-select-selector {
+				border-color: var(--l3-border) !important;
+			}
+
+			&.ant-select-focused .ant-select-selector {
+				border-color: var(--bg-robin-500) !important;
+				box-shadow: none !important;
+			}
+
+			.ant-select-arrow {
+				color: var(--l3-foreground);
+			}
+		}
+	}
+
+	// --- Group mappings section ---
+	&__group-mappings {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__group-header {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-bottom: 4px;
+	}
+
+	&__group-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__group-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+	}
+
+	&__field {
+		&--group {
+			flex: 2;
+		}
+
+		&--role {
+			flex: 1;
+			min-width: 120px;
+		}
+	}
+
+	&__remove-btn {
+		flex-shrink: 0;
+		width: 32px !important;
+		height: 32px !important;
+		min-width: 32px !important;
+		padding: 0 !important;
+		border: none !important;
+		border-radius: 2px !important;
+		background: transparent !important;
+		color: #e5484d !important;
+		opacity: 0.6 !important;
+		cursor: pointer;
+		transition: background-color 0.2s, opacity 0.2s;
+		box-shadow: none !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			color: #e5484d !important;
+			width: 12px !important;
+			height: 12px !important;
+		}
+
+		&:hover {
+			background: rgba(229, 72, 77, 0.1) !important;
+			opacity: 0.9 !important;
+			color: #e5484d !important;
+
+			svg {
+				color: #e5484d !important;
+			}
+		}
+
+		&:active {
+			opacity: 0.7 !important;
+			background: rgba(229, 72, 77, 0.15) !important;
+		}
+	}
+
+	&__add-btn {
+		width: 100%;
+
+		// Ensure icon is visible
+		svg,
+		[class*='icon'] {
+			color: var(--l2-foreground) !important;
+			display: inline-block !important;
+			opacity: 1 !important;
+		}
+
+		&:hover {
+			color: var(--l1-foreground);
+
+			svg,
+			[class*='icon'] {
+				color: var(--l1-foreground) !important;
+			}
+		}
+	}
+
+	// --- Checkbox border visibility ---
+	button[role='checkbox'] {
+		border: 1px solid var(--l2-foreground) !important;
+		border-radius: 2px;
+
+		&[data-state='checked'] {
+			background-color: var(--bg-robin-500) !important;
+			border-color: var(--bg-robin-500) !important;
+		}
+	}
+
+	// --- Input styles ---
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--bg-robin-500) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}
+
+// --- Light mode overrides ---
+.lightMode {
+	.role-mapping-section {
+		input {
+			background: var(--bg-vanilla-200) !important;
+			border-color: var(--bg-vanilla-300) !important;
+			color: var(--text-ink-500) !important;
+
+			&::placeholder {
+				color: var(--text-neutral-light-200) !important;
+			}
+		}
+
+		&__select {
+			&.ant-select {
+				.ant-select-selector {
+					background: var(--bg-vanilla-200) !important;
+					border-color: var(--bg-vanilla-300) !important;
+					color: var(--text-ink-500) !important;
+
+					.ant-select-selection-item {
+						color: var(--text-ink-500) !important;
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Checkbox } from '@signozhq/checkbox';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Select, Tooltip } from 'antd';
+import { ChevronDown, ChevronRight, CircleHelp } from 'lucide-react';
+
+import './RoleMappingSection.styles.scss';
+
+const ROLE_OPTIONS = [
+	{ value: 'VIEWER', label: 'VIEWER' },
+	{ value: 'EDITOR', label: 'EDITOR' },
+	{ value: 'ADMIN', label: 'ADMIN' },
+];
+
+interface RoleMappingSectionProps {
+	/** The form field name prefix for the role mapping configuration */
+	fieldNamePrefix: string[];
+	/** Whether the section is expanded (controlled mode) */
+	isExpanded?: boolean;
+	/** Callback when expand/collapse is toggled */
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function RoleMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: RoleMappingSectionProps): JSX.Element {
+	const form = Form.useFormInstance();
+	const useRoleAttribute = Form.useWatch(
+		[...fieldNamePrefix, 'useRoleAttribute'],
+		form,
+	);
+
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['role-mapping'] : [];
+
+	return (
+		<div className="role-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="role-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="role-mapping"
+					header={
+						<div className="role-mapping-section__collapse-header">
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="role-mapping-section__collapse-header-text">
+								<h4 className="role-mapping-section__section-title typography-label-base-600">
+									Role Mapping (Advanced)
+								</h4>
+								<p className="role-mapping-section__section-description typography-paragraph-small-400">
+									Configure how user roles are determined from your Identity Provider.
+									You can either use a direct role attribute or map IDP groups to SigNoz
+									roles.
+								</p>
+							</div>
+						</div>
+					}
+				>
+					<div className="role-mapping-section__content">
+						{/* Default Role */}
+						<div className="role-mapping-section__field-group">
+							<label
+								className="role-mapping-section__label typography-label-base-500"
+								htmlFor="default-role"
+							>
+								Default Role
+								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "VIEWER"'>
+									<CircleHelp size={14} className="role-mapping-section__label-icon" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'defaultRole']}
+								className="role-mapping-section__form-item"
+								initialValue="VIEWER"
+							>
+								<Select
+									id="default-role"
+									options={ROLE_OPTIONS}
+									className="role-mapping-section__select"
+								/>
+							</Form.Item>
+						</div>
+
+						{/* Use Role Attribute */}
+						<div className="role-mapping-section__checkbox-row">
+							<Form.Item
+								name={[...fieldNamePrefix, 'useRoleAttribute']}
+								valuePropName="checked"
+								noStyle
+							>
+								<Checkbox
+									id="use-role-attribute"
+									labelName="Use Role Attribute Directly"
+									onCheckedChange={(checked: boolean): void => {
+										form.setFieldValue([...fieldNamePrefix, 'useRoleAttribute'], checked);
+									}}
+								/>
+							</Form.Item>
+							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
+								<CircleHelp size={14} className="role-mapping-section__label-icon" />
+							</Tooltip>
+						</div>
+
+						{/* Group to Role Mappings - only show when useRoleAttribute is false */}
+						{!useRoleAttribute && (
+							<div className="role-mapping-section__group-mappings">
+								<div className="role-mapping-section__group-header">
+									<span className="role-mapping-section__group-title">
+										Group to Role Mappings
+									</span>
+									<p className="role-mapping-section__group-description">
+										Map IDP group names to SigNoz roles. If a user belongs to multiple
+										groups, the highest privilege role will be assigned.
+									</p>
+								</div>
+
+								<Form.List name={[...fieldNamePrefix, 'groupMappingsList']}>
+									{(fields, { add, remove }): JSX.Element => (
+										<div className="role-mapping-section__items">
+											{fields.map((field) => (
+												<div key={field.key} className="role-mapping-section__row">
+													<Form.Item
+														name={[field.name, 'groupName']}
+														className="role-mapping-section__field role-mapping-section__field--group"
+														rules={[{ required: true, message: 'Group name is required' }]}
+													>
+														<Input placeholder="IDP Group Name" />
+													</Form.Item>
+
+													<Form.Item
+														name={[field.name, 'role']}
+														className="role-mapping-section__field role-mapping-section__field--role"
+														rules={[{ required: true, message: 'Role is required' }]}
+														initialValue="VIEWER"
+													>
+														<Select
+															options={ROLE_OPTIONS}
+															className="role-mapping-section__select"
+														/>
+													</Form.Item>
+
+													<Button
+														variant="ghost"
+														color="secondary"
+														className="role-mapping-section__remove-btn"
+														onClick={(): void => remove(field.name)}
+														aria-label="Remove mapping"
+													>
+														<Trash2 size={12} />
+													</Button>
+												</div>
+											))}
+
+											<Button
+												variant="dashed"
+												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
+												prefixIcon={<Plus size={14} />}
+												className="role-mapping-section__add-btn"
+											>
+												Add Group Mapping
+											</Button>
+										</div>
+									)}
+								</Form.List>
+							</div>
+						)}
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default RoleMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/Toggle.tsx

@@ -1,35 +1,60 @@
 import { useState } from 'react';
 import { Switch } from 'antd';
-import put from 'api/v1/domains/id/put';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { useUpdateAuthDomain } from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
+
+interface ToggleProps {
+	isDefaultChecked: boolean;
+	record: AuthtypesGettableAuthDomainDTO;
+}
 
 function Toggle({ isDefaultChecked, record }: ToggleProps): JSX.Element {
 	const [isChecked, setIsChecked] = useState<boolean>(isDefaultChecked);
-	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const { showErrorModal } = useErrorModal();
 
-	const onChangeHandler = async (checked: boolean): Promise<void> => {
-		setIsLoading(true);
+	const { mutate: updateAuthDomain, isLoading } = useUpdateAuthDomain<
+		AxiosError<RenderErrorResponseDTO>
+	>();
 
-		try {
-			await put({
-				id: record.id,
-				config: {
-					ssoEnabled: checked,
-					ssoType: record.ssoType,
-					googleAuthConfig: record.googleAuthConfig,
-					oidcConfig: record.oidcConfig,
-					samlConfig: record.samlConfig,
-				},
-			});
-			setIsChecked(checked);
-		} catch (error) {
-			showErrorModal(error as APIError);
+	const onChangeHandler = (checked: boolean): void => {
+		if (!record.id) {
+			return;
 		}
 
-		setIsLoading(false);
+		updateAuthDomain(
+			{
+				pathParams: { id: record.id },
+				data: {
+					config: {
+						ssoEnabled: checked,
+						ssoType: record.ssoType,
+						googleAuthConfig: record.googleAuthConfig,
+						oidcConfig: record.oidcConfig,
+						samlConfig: record.samlConfig,
+					},
+				},
+			},
+			{
+				onSuccess: () => {
+					setIsChecked(checked);
+				},
+				onError: (error) => {
+					try {
+						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+					} catch (apiError) {
+						showErrorModal(apiError as APIError);
+					}
+				},
+			},
+		);
 	};
 
 	return (
@@ -37,9 +62,4 @@ function Toggle({ isDefaultChecked, record }: ToggleProps): JSX.Element {
 	);
 }
 
-interface ToggleProps {
-	isDefaultChecked: boolean;
-	record: GettableAuthDomain;
-}
-
 export default Toggle;

frontend/src/container/OrganizationSettings/AuthDomain/index.tsx

@@ -1,22 +1,38 @@
-import { useState } from 'react';
-import { useQuery } from 'react-query';
+import { useMemo, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Table, Typography } from 'antd';
+import { Button } from '@signozhq/button';
+import { Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import deleteDomain from 'api/v1/domains/id/delete';
-import listAllDomain from 'api/v1/domains/list';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import {
+	useDeleteAuthDomain,
+	useListAuthDomains,
+} from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import { useNotifications } from 'hooks/useNotifications';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain, SSOType } from 'types/api/v1/domains/list';
 
 import CreateEdit from './CreateEdit/CreateEdit';
 import Toggle from './Toggle';
 
 import './AuthDomain.styles.scss';
 
-const columns: ColumnsType<GettableAuthDomain> = [
+export const SSOType = new Map<string, string>([
+	['google_auth', 'Google Auth'],
+	['saml', 'SAML'],
+	['email_password', 'Email Password'],
+	['oidc', 'OIDC'],
+]);
+
+const columns: ColumnsType<AuthtypesGettableAuthDomainDTO> = [
 	{
 		title: 'Domain',
 		dataIndex: 'name',
@@ -29,17 +45,18 @@ const columns: ColumnsType<GettableAuthDomain> = [
 		dataIndex: 'ssoEnabled',
 		key: 'ssoEnabled',
 		width: 80,
-		render: (value: boolean, record: GettableAuthDomain): JSX.Element => (
-			<Toggle isDefaultChecked={value} record={record} />
-		),
+		render: (
+			value: boolean,
+			record: AuthtypesGettableAuthDomainDTO,
+		): JSX.Element => <Toggle isDefaultChecked={value} record={record} />,
 	},
 	{
 		title: 'IDP Initiated SSO URL',
 		dataIndex: 'relayState',
 		key: 'relayState',
 		width: 80,
-		render: (_, record: GettableAuthDomain): JSX.Element => {
-			const relayPath = record.authNProviderInfo.relayStatePath;
+		render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => {
+			const relayPath = record.authNProviderInfo?.relayStatePath;
 			if (!relayPath) {
 				return (
 					<Typography.Text style={{ paddingLeft: '6px' }}>N/A</Typography.Text>
@@ -55,10 +72,10 @@ const columns: ColumnsType<GettableAuthDomain> = [
 		dataIndex: 'action',
 		key: 'action',
 		width: 100,
-		render: (_, record: GettableAuthDomain): JSX.Element => (
+		render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => (
 			<section className="auth-domain-list-column-action">
 				<Typography.Link data-column-action="configure">
-					Configure {SSOType.get(record.ssoType)}
+					Configure {SSOType.get(record.ssoType || '')}
 				</Typography.Link>
 				<Typography.Link type="danger" data-column-action="delete">
 					Delete
@@ -68,58 +85,81 @@ const columns: ColumnsType<GettableAuthDomain> = [
 	},
 ];
 
-async function deleteDomainById(
-	id: string,
-	showErrorModal: (error: APIError) => void,
-	refetchAuthDomainListResponse: () => void,
-): Promise<void> {
-	try {
-		await deleteDomain(id);
-		refetchAuthDomainListResponse();
-	} catch (error) {
-		showErrorModal(error as APIError);
-	}
-}
-
 function AuthDomain(): JSX.Element {
-	const [record, setRecord] = useState<GettableAuthDomain>();
+	const [record, setRecord] = useState<AuthtypesGettableAuthDomainDTO>();
 	const [addDomain, setAddDomain] = useState<boolean>(false);
+	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
+
 	const {
 		data: authDomainListResponse,
 		isLoading: isLoadingAuthDomainListResponse,
 		isFetching: isFetchingAuthDomainListResponse,
 		error: errorFetchingAuthDomainListResponse,
 		refetch: refetchAuthDomainListResponse,
-	} = useQuery({
-		queryFn: listAllDomain,
-		queryKey: ['/api/v1/domains', 'list'],
-		enabled: true,
-	});
+	} = useListAuthDomains();
+
+	const { mutate: deleteAuthDomain } = useDeleteAuthDomain<
+		AxiosError<RenderErrorResponseDTO>
+	>();
+
+	const handleDeleteDomain = (id: string): void => {
+		deleteAuthDomain(
+			{ pathParams: { id } },
+			{
+				onSuccess: () => {
+					notifications.success({
+						message: 'Domain deleted successfully',
+					});
+					refetchAuthDomainListResponse();
+				},
+				onError: (error) => {
+					try {
+						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+					} catch (apiError) {
+						showErrorModal(apiError as APIError);
+					}
+				},
+			},
+		);
+	};
+
+	const formattedError = useMemo(() => {
+		if (!errorFetchingAuthDomainListResponse) {
+			return null;
+		}
+
+		try {
+			ErrorResponseHandlerV2(
+				errorFetchingAuthDomainListResponse as AxiosError<ErrorV2Resp>,
+			);
+		} catch (error) {
+			return error as APIError;
+		}
+	}, [errorFetchingAuthDomainListResponse]);
 
 	return (
 		<div className="auth-domain">
 			<section className="auth-domain-header">
 				<Typography.Title level={3}>Authenticated Domains</Typography.Title>
 				<Button
-					type="primary"
-					icon={<PlusOutlined />}
+					prefixIcon={<PlusOutlined />}
 					onClick={(): void => {
 						setAddDomain(true);
 					}}
-					className="button"
+					variant="solid"
+					size="sm"
+					color="primary"
 				>
 					Add Domain
 				</Button>
 			</section>
-			{(errorFetchingAuthDomainListResponse as APIError) && (
-				<ErrorContent error={errorFetchingAuthDomainListResponse as APIError} />
-			)}
-			{!(errorFetchingAuthDomainListResponse as APIError) && (
+			{formattedError && <ErrorContent error={formattedError} />}
+			{!errorFetchingAuthDomainListResponse && (
 				<Table
 					columns={columns}
-					dataSource={authDomainListResponse?.data}
-					onRow={(record): any => ({
+					dataSource={authDomainListResponse?.data?.data}
+					onRow={(tableRecord): any => ({
 						onClick: (
 							event: React.SyntheticEvent<HTMLLinkElement, MouseEvent>,
 						): void => {
@@ -127,15 +167,12 @@ function AuthDomain(): JSX.Element {
 							const { columnAction } = target.dataset;
 							switch (columnAction) {
 								case 'configure':
-									setRecord(record);
-
+									setRecord(tableRecord);
 									break;
 								case 'delete':
-									deleteDomainById(
-										record.id,
-										showErrorModal,
-										refetchAuthDomainListResponse,
-									);
+									if (tableRecord.id) {
+										handleDeleteDomain(tableRecord.id);
+									}
 									break;
 								default:
 									console.error('Unknown action:', columnAction);

frontend/src/types/api/v1/domains/list.ts

@@ -17,17 +17,41 @@ export interface GettableAuthDomain {
 	oidcConfig?: OIDCConfig;
 }
 
+export interface SAMLAttributeMapping {
+	nameAttribute?: string;
+	groupsAttribute?: string;
+	roleAttribute?: string;
+}
+
 export interface SAMLConfig {
 	samlEntity: string;
 	samlIdp: string;
 	samlCert: string;
 	insecureSkipAuthNRequestsSigned: boolean;
+	attributeMapping?: SAMLAttributeMapping;
+	roleMapping?: RoleMappingConfig;
+}
+
+export interface RoleMappingConfig {
+	defaultRole?: 'VIEWER' | 'EDITOR' | 'ADMIN';
+	useRoleAttributeDirectly?: boolean;
+	groupMappings?: Array<{
+		groupName: string;
+		role: 'VIEWER' | 'EDITOR' | 'ADMIN';
+	}>;
 }
 
 export interface GoogleAuthConfig {
 	clientId: string;
 	clientSecret: string;
 	redirectURI: string;
+	insecureSkipEmailVerified?: boolean;
+	fetchGroups?: boolean;
+	serviceAccountJson?: string;
+	domainToAdminEmail?: Record<string, string>;
+	fetchTransitiveGroupMembership?: boolean;
+	allowedGroups?: string[];
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface OIDCConfig {
@@ -38,10 +62,14 @@ export interface OIDCConfig {
 	claimMapping: ClaimMapping;
 	insecureSkipEmailVerified: boolean;
 	getUserInfo: boolean;
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface ClaimMapping {
-	email: string;
+	email?: string;
+	name?: string;
+	groups?: string;
+	role?: string;
 }
 
 export interface AuthNProviderInfo {

frontend/src/types/api/v1/domains/post.ts

@@ -11,17 +11,41 @@ export interface Config {
 	oidcConfig?: OIDCConfig;
 }
 
+export interface RoleMappingConfig {
+	defaultRole?: 'VIEWER' | 'EDITOR' | 'ADMIN';
+	useRoleAttributeDirectly?: boolean;
+	groupMappings?: Array<{
+		groupName: string;
+		role: 'VIEWER' | 'EDITOR' | 'ADMIN';
+	}>;
+}
+
+export interface SAMLAttributeMapping {
+	nameAttribute?: string;
+	groupsAttribute?: string;
+	roleAttribute?: string;
+}
+
 export interface SAMLConfig {
 	samlEntity: string;
 	samlIdp: string;
 	samlCert: string;
 	insecureSkipAuthNRequestsSigned: boolean;
+	attributeMapping?: SAMLAttributeMapping;
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface GoogleAuthConfig {
 	clientId: string;
 	clientSecret: string;
 	redirectURI: string;
+	insecureSkipEmailVerified?: boolean;
+	fetchGroups?: boolean;
+	serviceAccountJson?: string;
+	domainToAdminEmail?: Record<string, string>;
+	fetchTransitiveGroupMembership?: boolean;
+	allowedGroups?: string[];
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface OIDCConfig {
@@ -32,8 +56,12 @@ export interface OIDCConfig {
 	claimMapping: ClaimMapping;
 	insecureSkipEmailVerified: boolean;
 	getUserInfo: boolean;
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface ClaimMapping {
-	email: string;
+	email?: string;
+	name?: string;
+	groups?: string;
+	role?: string;
 }

frontend/src/types/api/v1/domains/put.ts

@@ -9,17 +9,41 @@ export interface UpdatableAuthDomain {
 	id: string;
 }
 
+export interface RoleMappingConfig {
+	defaultRole?: 'VIEWER' | 'EDITOR' | 'ADMIN';
+	useRoleAttributeDirectly?: boolean;
+	groupMappings?: Array<{
+		groupName: string;
+		role: 'VIEWER' | 'EDITOR' | 'ADMIN';
+	}>;
+}
+
+export interface SAMLAttributeMapping {
+	nameAttribute?: string;
+	groupsAttribute?: string;
+	roleAttribute?: string;
+}
+
 export interface SAMLConfig {
 	samlEntity: string;
 	samlIdp: string;
 	samlCert: string;
 	insecureSkipAuthNRequestsSigned: boolean;
+	attributeMapping?: SAMLAttributeMapping;
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface GoogleAuthConfig {
 	clientId: string;
 	clientSecret: string;
 	redirectURI: string;
+	insecureSkipEmailVerified?: boolean;
+	fetchGroups?: boolean;
+	serviceAccountJson?: string;
+	domainToAdminEmail?: Record<string, string>;
+	fetchTransitiveGroupMembership?: boolean;
+	allowedGroups?: string[];
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface OIDCConfig {
@@ -30,8 +54,12 @@ export interface OIDCConfig {
 	claimMapping: ClaimMapping;
 	insecureSkipEmailVerified: boolean;
 	getUserInfo: boolean;
+	roleMapping?: RoleMappingConfig;
 }
 
 export interface ClaimMapping {
-	email: string;
+	email?: string;
+	name?: string;
+	groups?: string;
+	role?: string;
 }