Add authentication options for webhooks

client/src/Hooks/useNotificationForm.ts

@@ -44,6 +44,10 @@ function buildDefaults(data: Notification | null): NotificationFormData {
 			type: "webhook",
 			notificationName: data.notificationName || "",
 			address: data.address || "",
+			authType: data.authType || "none",
+			authUsername: data.authUsername || "",
+			authPassword: data.authPassword || "",
+			authToken: data.authToken || "",
 		};
 	}
 	if (data?.type === "pager_duty") {

client/src/Pages/Notifications/create/index.tsx

@@ -13,9 +13,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
 import { useNotificationForm } from "@/Hooks/useNotificationForm";
 import type { NotificationFormData } from "@/Validation/notifications";
-import type { Notification } from "@/Types/Notification";
+import { NotificationChannels, WebhookAuthTypes, type Notification } from "@/Types/Notification";
 import { useTranslation } from "react-i18next";
-import { NotificationChannels } from "@/Types/Notification";
 
 const NotificationsCreatePage = () => {
 	const { t } = useTranslation();
@@ -46,10 +45,13 @@ const NotificationsCreatePage = () => {
 	}, [defaults, reset]);
 
 	const watchedType = watch("type");
+	const watchedValues = watch();
+	const watchedAuthType =
+		watchedType === "webhook" && "authType" in watchedValues ? watchedValues.authType : "none";
 
 	useEffect(() => {
 		clearErrors();
-	}, [watchedType, clearErrors]);
+	}, [watchedType, watchedAuthType, clearErrors]);
 
 	const addressConfig = useMemo(() => {
 		if (watchedType === "pager_duty") {
@@ -174,6 +176,104 @@ const NotificationsCreatePage = () => {
 						}
 					/>
 				)}
+			{watchedType === "webhook" && (
+				<ConfigBox
+					title={t("pages.notifications.form.webhookAuth.title")}
+					subtitle={t("pages.notifications.form.webhookAuth.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="authType"
+								control={control}
+								defaultValue={"authType" in defaults ? defaults.authType : "none"}
+								render={({ field, fieldState }) => (
+									<Select
+										value={field.value}
+										fieldLabel={t("pages.notifications.form.webhookAuth.optionAuthType")}
+										error={!!fieldState.error}
+										onChange={field.onChange}
+									>
+										{WebhookAuthTypes.map((authType) => (
+											<MenuItem
+												key={authType}
+												value={authType}
+											>
+												<Typography textTransform="capitalize">
+													{t(`pages.notifications.form.webhookAuth.types.${authType}`)}
+												</Typography>
+											</MenuItem>
+										))}
+									</Select>
+								)}
+							/>
+							{watchedAuthType === "basic" && (
+								<>
+									<Controller
+										name="authUsername"
+										control={control}
+										defaultValue={"authUsername" in defaults ? defaults.authUsername : ""}
+										render={({ field, fieldState }) => (
+											<TextField
+												{...field}
+												type="text"
+												fieldLabel={t(
+													"pages.notifications.form.webhookAuth.optionUsername"
+												)}
+												placeholder={t(
+													"pages.notifications.form.webhookAuth.placeholderUsername"
+												)}
+												fullWidth
+												error={!!fieldState.error}
+												helperText={fieldState.error?.message ?? ""}
+											/>
+										)}
+									/>
+									<Controller
+										name="authPassword"
+										control={control}
+										defaultValue={"authPassword" in defaults ? defaults.authPassword : ""}
+										render={({ field, fieldState }) => (
+											<TextField
+												{...field}
+												type="password"
+												fieldLabel={t(
+													"pages.notifications.form.webhookAuth.optionPassword"
+												)}
+												placeholder={t(
+													"pages.notifications.form.webhookAuth.placeholderPassword"
+												)}
+												fullWidth
+												error={!!fieldState.error}
+												helperText={fieldState.error?.message ?? ""}
+											/>
+										)}
+									/>
+								</>
+							)}
+							{watchedAuthType === "bearer" && (
+								<Controller
+									name="authToken"
+									control={control}
+									defaultValue={"authToken" in defaults ? defaults.authToken : ""}
+									render={({ field, fieldState }) => (
+										<TextField
+											{...field}
+											type="password"
+											fieldLabel={t("pages.notifications.form.webhookAuth.optionToken")}
+											placeholder={t(
+												"pages.notifications.form.webhookAuth.placeholderToken"
+											)}
+											fullWidth
+											error={!!fieldState.error}
+											helperText={fieldState.error?.message ?? ""}
+										/>
+									)}
+								/>
+							)}
+						</Stack>
+					}
+				/>
+			)}
 			{watchedType === "telegram" && (
 				<ConfigBox
 					title={t("pages.notifications.form.telegram.title")}

client/src/Types/Notification.ts

@@ -11,6 +11,8 @@ export const NotificationChannels = [
 	"twilio",
 ] as const;
 export type NotificationChannel = (typeof NotificationChannels)[number];
+export const WebhookAuthTypes = ["none", "basic", "bearer"] as const;
+export type WebhookAuthType = (typeof WebhookAuthTypes)[number];
 
 export interface Notification {
 	id: string;
@@ -19,6 +21,10 @@ export interface Notification {
 	type: NotificationChannel;
 	notificationName: string;
 	address?: string;
+	authType?: WebhookAuthType;
+	authUsername?: string;
+	authPassword?: string;
+	authToken?: string;
 	phone?: string;
 	homeserverUrl?: string;
 	roomId?: string;

client/src/Validation/notifications.ts

@@ -1,5 +1,7 @@
 import { z } from "zod";
 
+const webhookAuthTypeSchema = z.enum(["none", "basic", "bearer"]);
+
 const baseSchema = z.object({
 	notificationName: z
 		.string()
@@ -28,6 +30,35 @@ const discordSchema = baseSchema.extend({
 const webhookSchema = baseSchema.extend({
 	type: z.literal("webhook"),
 	address: z.string().min(1, "Webhook URL is required").url("Please enter a valid URL"),
+	authType: webhookAuthTypeSchema,
+	authUsername: z.string().optional(),
+	authPassword: z.string().optional(),
+	authToken: z.string().optional(),
+}).superRefine((data, ctx) => {
+	if (data.authType === "basic") {
+		if (!data.authUsername?.trim()) {
+			ctx.addIssue({
+				code: "custom",
+				path: ["authUsername"],
+				message: "Username is required",
+			});
+		}
+		if (!data.authPassword?.trim()) {
+			ctx.addIssue({
+				code: "custom",
+				path: ["authPassword"],
+				message: "Password is required",
+			});
+		}
+	}
+
+	if (data.authType === "bearer" && !data.authToken?.trim()) {
+		ctx.addIssue({
+			code: "custom",
+			path: ["authToken"],
+			message: "Token is required",
+		});
+	}
 });
 
 const pagerDutySchema = baseSchema.extend({

client/src/locales/en.json

@@ -1119,6 +1119,22 @@
 					"placeholder": "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6",
 					"title": "Integration key"
 				},
+				"webhookAuth": {
+					"title": "Webhook authentication",
+					"description": "Optionally attach an Authorization header to webhook requests.",
+					"optionAuthType": "Authentication type",
+					"optionUsername": "Username",
+					"optionPassword": "Password",
+					"optionToken": "Bearer token",
+					"placeholderUsername": "webhook-user",
+					"placeholderPassword": "Enter password",
+					"placeholderToken": "Enter bearer token",
+					"types": {
+						"none": "None",
+						"basic": "Basic Auth",
+						"bearer": "Bearer Token"
+					}
+				},
 				"roomId": {
 					"optionRoomId": "Room ID",
 					"placeholder": "!abcdefg:matrix.org"

client/src/locales/zh-CN.json

@@ -1059,6 +1059,22 @@
 					"placeholder": "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6",
 					"title": "集成密钥"
 				},
+				"webhookAuth": {
+					"title": "Webhook 璁よ瘉",
+					"description": "鍙€夊湴涓?webhook 璇锋眰闄勫姞 Authorization 璇锋眰澶淬€?",
+					"optionAuthType": "璁よ瘉鏂瑰紡",
+					"optionUsername": "鐢ㄦ埛鍚?",
+					"optionPassword": "瀵嗙爜",
+					"optionToken": "Bearer Token",
+					"placeholderUsername": "webhook-user",
+					"placeholderPassword": "璇疯緭鍏ュ瘑鐮?",
+					"placeholderToken": "璇疯緭鍏?Bearer Token",
+					"types": {
+						"none": "鏃?",
+						"basic": "Basic Auth",
+						"bearer": "Bearer Token"
+					}
+				},
 				"roomId": {
 					"optionRoomId": "房间 ID",
 					"placeholder": "!abcdefg:matrix.org"

server/openapi/routes/notification.ts

@@ -21,7 +21,13 @@ const notificationVariantMeta: Record<string, { component: string; example: Reco
 	},
 	webhook: {
 		component: "WebhookNotification",
-		example: { notificationName: "Custom webhook", type: "webhook", address: "https://example.com/hooks/checkmate" },
+		example: {
+			notificationName: "Custom webhook",
+			type: "webhook",
+			address: "https://example.com/hooks/checkmate",
+			authType: "bearer",
+			authToken: "secret-token",
+		},
 	},
 	slack: {
 		component: "SlackNotification",

server/src/db/models/Notification.ts

@@ -33,6 +33,10 @@ const NotificationSchema = new Schema<NotificationDocument>(
 			required: true,
 		},
 		address: { type: String },
+		authType: { type: String, enum: ["none", "basic", "bearer"] },
+		authUsername: { type: String },
+		authPassword: { type: String },
+		authToken: { type: String },
 		phone: { type: String },
 		homeserverUrl: { type: String },
 		roomId: { type: String },

server/src/repositories/notifications/MongoNotificationsRepository.ts

@@ -28,6 +28,10 @@ class MongoNotificationsRepository implements INotificationsRepository {
 			type: doc.type,
 			notificationName: doc.notificationName,
 			address: doc.address ?? undefined,
+			authType: doc.authType ?? undefined,
+			authUsername: doc.authUsername ?? undefined,
+			authPassword: doc.authPassword ?? undefined,
+			authToken: doc.authToken ?? undefined,
 			phone: doc.phone ?? undefined,
 			homeserverUrl: doc.homeserverUrl ?? undefined,
 			roomId: doc.roomId ?? undefined,

server/src/service/infrastructure/notificationProviders/webhook.ts

@@ -6,6 +6,23 @@ import { getTestMessage } from "@/service/infrastructure/notificationProviders/u
 import got from "got";
 
 export class WebhookProvider extends NotificationProvider {
+	private buildHeaders(notification: Partial<Notification>) {
+		const headers: Record<string, string> = {
+			"Content-Type": "application/json",
+		};
+
+		if (notification.authType === "basic" && notification.authUsername && notification.authPassword) {
+			const credentials = Buffer.from(`${notification.authUsername}:${notification.authPassword}`).toString("base64");
+			headers.Authorization = `Basic ${credentials}`;
+		}
+
+		if (notification.authType === "bearer" && notification.authToken) {
+			headers.Authorization = `Bearer ${notification.authToken}`;
+		}
+
+		return headers;
+	}
+
 	sendMessage = async (notification: Notification, message: NotificationMessage): Promise<boolean> => {
 		if (!notification.address) {
 			return false;
@@ -17,9 +34,7 @@ export class WebhookProvider extends NotificationProvider {
 		try {
 			await got.post(notification.address, {
 				json: payload,
-				headers: {
-					"Content-Type": "application/json",
-				},
+				headers: this.buildHeaders(notification),
 				...this.gotRequestOptions(),
 			});
 			this.logger.info({
@@ -99,9 +114,7 @@ export class WebhookProvider extends NotificationProvider {
 		try {
 			await got.post(notification.address, {
 				json: { text: getTestMessage() },
-				headers: {
-					"Content-Type": "application/json",
-				},
+				headers: this.buildHeaders(notification),
 				...this.gotRequestOptions(),
 			});
 			return true;

server/src/types/notification.ts

@@ -11,6 +11,8 @@ export const NotificationChannels = [
 	"twilio",
 ] as const;
 export type NotificationChannel = (typeof NotificationChannels)[number];
+export const WebhookAuthTypes = ["none", "basic", "bearer"] as const;
+export type WebhookAuthType = (typeof WebhookAuthTypes)[number];
 
 export interface Notification {
 	id: string;
@@ -19,6 +21,10 @@ export interface Notification {
 	type: NotificationChannel;
 	notificationName: string;
 	address?: string;
+	authType?: WebhookAuthType;
+	authUsername?: string;
+	authPassword?: string;
+	authToken?: string;
 	phone?: string;
 	homeserverUrl?: string;
 	roomId?: string;