added the migration file

backend/prisma/migrations/20251110_add_scopes_to_auto_enrollment_tokens/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "auto_enrollment_tokens" ADD COLUMN "scopes" JSONB;
+

backend/prisma/schema.prisma

@@ -288,6 +288,7 @@ model auto_enrollment_tokens {
   last_used_at          DateTime?
   expires_at            DateTime?
   metadata              Json?
+  scopes                Json?
   users                 users?       @relation(fields: [created_by_user_id], references: [id], onDelete: SetNull)
   host_groups           host_groups? @relation(fields: [default_host_group_id], references: [id], onDelete: SetNull)
 

backend/src/middleware/apiAuth.js

@@ -0,0 +1,113 @@
+const { getPrismaClient } = require("../config/prisma");
+const bcrypt = require("bcryptjs");
+
+const prisma = getPrismaClient();
+
+/**
+ * Middleware factory to authenticate API tokens using Basic Auth
+ * @param {string} integrationType - The expected integration type (e.g., "api", "gethomepage")
+ * @returns {Function} Express middleware function
+ */
+const authenticateApiToken = (integrationType) => {
+	return async (req, res, next) => {
+		try {
+			const authHeader = req.headers.authorization;
+
+			if (!authHeader || !authHeader.startsWith("Basic ")) {
+				return res
+					.status(401)
+					.json({ error: "Missing or invalid authorization header" });
+			}
+
+			// Decode base64 credentials
+			const base64Credentials = authHeader.split(" ")[1];
+			const credentials = Buffer.from(base64Credentials, "base64").toString(
+				"ascii",
+			);
+			const [apiKey, apiSecret] = credentials.split(":");
+
+			if (!apiKey || !apiSecret) {
+				return res.status(401).json({ error: "Invalid credentials format" });
+			}
+
+			// Find the token in database
+			const token = await prisma.auto_enrollment_tokens.findUnique({
+				where: { token_key: apiKey },
+				include: {
+					users: {
+						select: {
+							id: true,
+							username: true,
+							role: true,
+						},
+					},
+				},
+			});
+
+			if (!token) {
+				console.log(`API key not found: ${apiKey}`);
+				return res.status(401).json({ error: "Invalid API key" });
+			}
+
+			// Check if token is active
+			if (!token.is_active) {
+				return res.status(401).json({ error: "API key is disabled" });
+			}
+
+			// Check if token has expired
+			if (token.expires_at && new Date(token.expires_at) < new Date()) {
+				return res.status(401).json({ error: "API key has expired" });
+			}
+
+			// Check if token is for the expected integration type
+			if (token.metadata?.integration_type !== integrationType) {
+				return res.status(401).json({ error: "Invalid API key type" });
+			}
+
+			// Verify the secret
+			const isValidSecret = await bcrypt.compare(apiSecret, token.token_secret);
+			if (!isValidSecret) {
+				return res.status(401).json({ error: "Invalid API secret" });
+			}
+
+			// Check IP restrictions if any
+			if (token.allowed_ip_ranges && token.allowed_ip_ranges.length > 0) {
+				const clientIp = req.ip || req.connection.remoteAddress;
+				const forwardedFor = req.headers["x-forwarded-for"];
+				const realIp = req.headers["x-real-ip"];
+
+				// Get the actual client IP (considering proxies)
+				const actualClientIp = forwardedFor
+					? forwardedFor.split(",")[0].trim()
+					: realIp || clientIp;
+
+				const isAllowedIp = token.allowed_ip_ranges.some((range) => {
+					// Simple IP range check (can be enhanced for CIDR support)
+					return actualClientIp.startsWith(range) || actualClientIp === range;
+				});
+
+				if (!isAllowedIp) {
+					console.log(
+						`IP validation failed. Client IP: ${actualClientIp}, Allowed ranges: ${token.allowed_ip_ranges.join(", ")}`,
+					);
+					return res.status(403).json({ error: "IP address not allowed" });
+				}
+			}
+
+			// Update last used timestamp
+			await prisma.auto_enrollment_tokens.update({
+				where: { id: token.id },
+				data: { last_used_at: new Date() },
+			});
+
+			// Attach token info to request
+			req.apiToken = token;
+			next();
+		} catch (error) {
+			console.error("API key authentication error:", error);
+			res.status(500).json({ error: "Authentication failed" });
+		}
+	};
+};
+
+module.exports = { authenticateApiToken };

backend/src/middleware/apiScope.js

@@ -0,0 +1,76 @@
+/**
+ * Middleware factory to validate API token scopes
+ * Only applies to tokens with metadata.integration_type === "api"
+ * @param {string} resource - The resource being accessed (e.g., "host")
+ * @param {string} action - The action being performed (e.g., "get", "put", "patch", "update", "delete")
+ * @returns {Function} Express middleware function
+ */
+const requireApiScope = (resource, action) => {
+	return async (req, res, next) => {
+		try {
+			const token = req.apiToken;
+
+			// If no token attached, this should have been caught by auth middleware
+			if (!token) {
+				return res.status(401).json({ error: "Unauthorized" });
+			}
+
+			// Only validate scopes for API type tokens
+			if (token.metadata?.integration_type !== "api") {
+				// For non-API tokens, skip scope validation
+				return next();
+			}
+
+			// Check if token has scopes field
+			if (!token.scopes || typeof token.scopes !== "object") {
+				console.warn(
+					`API token ${token.token_key} missing scopes field for ${resource}:${action}`,
+				);
+				return res.status(403).json({
+					error: "Access denied",
+					message: "This API key does not have the required permissions",
+				});
+			}
+
+			// Check if resource exists in scopes
+			if (!token.scopes[resource]) {
+				console.warn(
+					`API token ${token.token_key} missing resource ${resource} for ${action}`,
+				);
+				return res.status(403).json({
+					error: "Access denied",
+					message: `This API key does not have access to ${resource}`,
+				});
+			}
+
+			// Check if action exists in resource scopes
+			if (!Array.isArray(token.scopes[resource])) {
+				console.warn(
+					`API token ${token.token_key} has invalid scopes structure for ${resource}`,
+				);
+				return res.status(403).json({
+					error: "Access denied",
+					message: "Invalid API key permissions configuration",
+				});
+			}
+
+			if (!token.scopes[resource].includes(action)) {
+				console.warn(
+					`API token ${token.token_key} missing action ${action} for resource ${resource}`,
+				);
+				return res.status(403).json({
+					error: "Access denied",
+					message: `This API key does not have permission to ${action} ${resource}`,
+				});
+			}
+
+			// Scope validation passed
+			next();
+		} catch (error) {
+			console.error("Scope validation error:", error);
+			res.status(500).json({ error: "Scope validation failed" });
+		}
+	};
+};
+
+module.exports = { requireApiScope };

backend/src/routes/apiHostsRoutes.js

@@ -0,0 +1,143 @@
+const express = require("express");
+const { getPrismaClient } = require("../config/prisma");
+const { authenticateApiToken } = require("../middleware/apiAuth");
+const { requireApiScope } = require("../middleware/apiScope");
+
+const router = express.Router();
+const prisma = getPrismaClient();
+
+// Helper function to check if a string is a valid UUID
+const isUUID = (str) => {
+	const uuidRegex =
+		/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+	return uuidRegex.test(str);
+};
+
+// GET /api/v1/api/hosts - List hosts with IP and groups
+router.get(
+	"/hosts",
+	authenticateApiToken("api"),
+	requireApiScope("host", "get"),
+	async (req, res) => {
+		try {
+			const { hostgroup } = req.query;
+
+			let whereClause = {};
+			let filterValues = [];
+
+			// Parse hostgroup filter (comma-separated names or UUIDs)
+			if (hostgroup) {
+				filterValues = hostgroup.split(",").map((g) => g.trim());
+
+				// Separate UUIDs from names
+				const uuidFilters = [];
+				const nameFilters = [];
+
+				for (const value of filterValues) {
+					if (isUUID(value)) {
+						uuidFilters.push(value);
+					} else {
+						nameFilters.push(value);
+					}
+				}
+
+				// Find host group IDs from names
+				const groupIds = [...uuidFilters];
+
+				if (nameFilters.length > 0) {
+					const groups = await prisma.host_groups.findMany({
+						where: {
+							name: {
+								in: nameFilters,
+							},
+						},
+						select: {
+							id: true,
+							name: true,
+						},
+					});
+
+					// Add found group IDs
+					groupIds.push(...groups.map((g) => g.id));
+
+					// Check if any name filters didn't match
+					const foundNames = groups.map((g) => g.name);
+					const notFoundNames = nameFilters.filter(
+						(name) => !foundNames.includes(name),
+					);
+
+					if (notFoundNames.length > 0) {
+						console.warn(`Host groups not found: ${notFoundNames.join(", ")}`);
+					}
+				}
+
+				// Filter hosts by group memberships
+				if (groupIds.length > 0) {
+					whereClause = {
+						host_group_memberships: {
+							some: {
+								host_group_id: {
+									in: groupIds,
+								},
+							},
+						},
+					};
+				} else {
+					// No valid groups found, return empty result
+					return res.json({
+						hosts: [],
+						total: 0,
+						filtered_by_groups: filterValues,
+					});
+				}
+			}
+
+			// Query hosts with groups
+			const hosts = await prisma.hosts.findMany({
+				where: whereClause,
+				select: {
+					id: true,
+					friendly_name: true,
+					hostname: true,
+					ip: true,
+					host_group_memberships: {
+						include: {
+							host_groups: {
+								select: {
+									id: true,
+									name: true,
+								},
+							},
+						},
+					},
+				},
+				orderBy: {
+					friendly_name: "asc",
+				},
+			});
+
+			// Format response
+			const formattedHosts = hosts.map((host) => ({
+				id: host.id,
+				friendly_name: host.friendly_name,
+				hostname: host.hostname,
+				ip: host.ip,
+				host_groups: host.host_group_memberships.map((membership) => ({
+					id: membership.host_groups.id,
+					name: membership.host_groups.name,
+				})),
+			}));
+
+			res.json({
+				hosts: formattedHosts,
+				total: formattedHosts.length,
+				filtered_by_groups: filterValues.length > 0 ? filterValues : undefined,
+			});
+		} catch (error) {
+			console.error("Error fetching hosts:", error);
+			res.status(500).json({ error: "Failed to fetch hosts" });
+		}
+	},
+);
+
+module.exports = router;

backend/src/routes/autoEnrollmentRoutes.js

@@ -125,6 +125,10 @@ router.post(
 			.optional({ nullable: true, checkFalsy: true })
 			.isISO8601()
 			.withMessage("Invalid date format"),
+		body("scopes")
+			.optional()
+			.isObject()
+			.withMessage("Scopes must be an object"),
 	],
 	async (req, res) => {
 		try {
@@ -140,6 +144,7 @@ router.post(
 				default_host_group_id,
 				expires_at,
 				metadata = {},
+				scopes,
 			} = req.body;
 
 			// Validate host group if provided
@@ -153,6 +158,32 @@ router.post(
 				}
 			}
 
+			// Validate scopes for API tokens
+			if (metadata.integration_type === "api" && scopes) {
+				// Validate scopes structure
+				if (typeof scopes !== "object" || scopes === null) {
+					return res.status(400).json({ error: "Scopes must be an object" });
+				}
+
+				// Validate each resource in scopes
+				for (const [resource, actions] of Object.entries(scopes)) {
+					if (!Array.isArray(actions)) {
+						return res.status(400).json({
+							error: `Scopes for resource "${resource}" must be an array of actions`,
+						});
+					}
+
+					// Validate action names
+					for (const action of actions) {
+						if (typeof action !== "string") {
+							return res.status(400).json({
+								error: `All actions in scopes must be strings`,
+							});
+						}
+					}
+				}
+			}
+
 			const { token_key, token_secret } = generate_auto_enrollment_token();
 			const hashed_secret = await bcrypt.hash(token_secret, 10);
 
@@ -168,6 +199,7 @@ router.post(
 					default_host_group_id: default_host_group_id || null,
 					expires_at: expires_at ? new Date(expires_at) : null,
 					metadata: { integration_type: "proxmox-lxc", ...metadata },
+					scopes: metadata.integration_type === "api" ? scopes || null : null,
 					updated_at: new Date(),
 				},
 				include: {
@@ -201,6 +233,7 @@ router.post(
 					default_host_group: token.host_groups,
 					created_by: token.users,
 					expires_at: token.expires_at,
+					scopes: token.scopes,
 				},
 				warning: "⚠️ Save the token_secret now - it cannot be retrieved later!",
 			});
@@ -232,6 +265,7 @@ router.get(
 					created_at: true,
 					default_host_group_id: true,
 					metadata: true,
+					scopes: true,
 					host_groups: {
 						select: {
 							id: true,
@@ -314,6 +348,10 @@ router.patch(
 		body("max_hosts_per_day").optional().isInt({ min: 1, max: 1000 }),
 		body("allowed_ip_ranges").optional().isArray(),
 		body("expires_at").optional().isISO8601(),
+		body("scopes")
+			.optional()
+			.isObject()
+			.withMessage("Scopes must be an object"),
 	],
 	async (req, res) => {
 		try {
@@ -323,6 +361,16 @@ router.patch(
 			}
 
 			const { tokenId } = req.params;
+
+			// First, get the existing token to check its integration type
+			const existing_token = await prisma.auto_enrollment_tokens.findUnique({
+				where: { id: tokenId },
+			});
+
+			if (!existing_token) {
+				return res.status(404).json({ error: "Token not found" });
+			}
+
 			const update_data = { updated_at: new Date() };
 
 			if (req.body.is_active !== undefined)
@@ -334,6 +382,41 @@ router.patch(
 			if (req.body.expires_at !== undefined)
 				update_data.expires_at = new Date(req.body.expires_at);
 
+			// Handle scopes updates for API tokens only
+			if (req.body.scopes !== undefined) {
+				if (existing_token.metadata?.integration_type === "api") {
+					// Validate scopes structure
+					const scopes = req.body.scopes;
+					if (typeof scopes !== "object" || scopes === null) {
+						return res.status(400).json({ error: "Scopes must be an object" });
+					}
+
+					// Validate each resource in scopes
+					for (const [resource, actions] of Object.entries(scopes)) {
+						if (!Array.isArray(actions)) {
+							return res.status(400).json({
+								error: `Scopes for resource "${resource}" must be an array of actions`,
+							});
+						}
+
+						// Validate action names
+						for (const action of actions) {
+							if (typeof action !== "string") {
+								return res.status(400).json({
+									error: `All actions in scopes must be strings`,
+								});
+							}
+						}
+					}
+
+					update_data.scopes = scopes;
+				} else {
+					return res.status(400).json({
+						error: "Scopes can only be updated for API integration tokens",
+					});
+				}
+			}
+
 			const token = await prisma.auto_enrollment_tokens.update({
 				where: { id: tokenId },
 				data: update_data,

backend/src/routes/gethomepageRoutes.js

@@ -1,113 +1,12 @@
 const express = require("express");
 const { getPrismaClient } = require("../config/prisma");
-const bcrypt = require("bcryptjs");
+const { authenticateApiToken } = require("../middleware/apiAuth");
 
 const router = express.Router();
 const prisma = getPrismaClient();
 
-// Middleware to authenticate API key
-const authenticateApiKey = async (req, res, next) => {
-	try {
-		const authHeader = req.headers.authorization;
-
-		if (!authHeader || !authHeader.startsWith("Basic ")) {
-			return res
-				.status(401)
-				.json({ error: "Missing or invalid authorization header" });
-		}
-
-		// Decode base64 credentials
-		const base64Credentials = authHeader.split(" ")[1];
-		const credentials = Buffer.from(base64Credentials, "base64").toString(
-			"ascii",
-		);
-		const [apiKey, apiSecret] = credentials.split(":");
-
-		if (!apiKey || !apiSecret) {
-			return res.status(401).json({ error: "Invalid credentials format" });
-		}
-
-		// Find the token in database
-		const token = await prisma.auto_enrollment_tokens.findUnique({
-			where: { token_key: apiKey },
-			include: {
-				users: {
-					select: {
-						id: true,
-						username: true,
-						role: true,
-					},
-				},
-			},
-		});
-
-		if (!token) {
-			console.log(`API key not found: ${apiKey}`);
-			return res.status(401).json({ error: "Invalid API key" });
-		}
-
-		// Check if token is active
-		if (!token.is_active) {
-			return res.status(401).json({ error: "API key is disabled" });
-		}
-
-		// Check if token has expired
-		if (token.expires_at && new Date(token.expires_at) < new Date()) {
-			return res.status(401).json({ error: "API key has expired" });
-		}
-
-		// Check if token is for gethomepage integration
-		if (token.metadata?.integration_type !== "gethomepage") {
-			return res.status(401).json({ error: "Invalid API key type" });
-		}
-
-		// Verify the secret
-		const isValidSecret = await bcrypt.compare(apiSecret, token.token_secret);
-		if (!isValidSecret) {
-			return res.status(401).json({ error: "Invalid API secret" });
-		}
-
-		// Check IP restrictions if any
-		if (token.allowed_ip_ranges && token.allowed_ip_ranges.length > 0) {
-			const clientIp = req.ip || req.connection.remoteAddress;
-			const forwardedFor = req.headers["x-forwarded-for"];
-			const realIp = req.headers["x-real-ip"];
-
-			// Get the actual client IP (considering proxies)
-			const actualClientIp = forwardedFor
-				? forwardedFor.split(",")[0].trim()
-				: realIp || clientIp;
-
-			const isAllowedIp = token.allowed_ip_ranges.some((range) => {
-				// Simple IP range check (can be enhanced for CIDR support)
-				return actualClientIp.startsWith(range) || actualClientIp === range;
-			});
-
-			if (!isAllowedIp) {
-				console.log(
-					`IP validation failed. Client IP: ${actualClientIp}, Allowed ranges: ${token.allowed_ip_ranges.join(", ")}`,
-				);
-				return res.status(403).json({ error: "IP address not allowed" });
-			}
-		}
-
-		// Update last used timestamp
-		await prisma.auto_enrollment_tokens.update({
-			where: { id: token.id },
-			data: { last_used_at: new Date() },
-		});
-
-		// Attach token info to request
-		req.apiToken = token;
-		next();
-	} catch (error) {
-		console.error("API key authentication error:", error);
-		res.status(500).json({ error: "Authentication failed" });
-	}
-};
-
 // Get homepage widget statistics
-router.get("/stats", authenticateApiKey, async (_req, res) => {
+router.get("/stats", authenticateApiToken("gethomepage"), async (_req, res) => {
 	try {
 		// Get total hosts count
 		const totalHosts = await prisma.hosts.count({
@@ -235,7 +134,7 @@ router.get("/stats", authenticateApiKey, async (_req, res) => {
 });
 
 // Health check endpoint for the API
-router.get("/health", authenticateApiKey, async (req, res) => {
+router.get("/health", authenticateApiToken("gethomepage"), async (req, res) => {
 	res.json({
 		status: "ok",
 		timestamp: new Date().toISOString(),

backend/src/server.js

@@ -71,6 +71,7 @@ const wsRoutes = require("./routes/wsRoutes");
 const agentVersionRoutes = require("./routes/agentVersionRoutes");
 const metricsRoutes = require("./routes/metricsRoutes");
 const userPreferencesRoutes = require("./routes/userPreferencesRoutes");
+const apiHostsRoutes = require("./routes/apiHostsRoutes");
 const { initSettings } = require("./services/settingsService");
 const { queueManager } = require("./services/automation");
 const { authenticateToken, requireAdmin } = require("./middleware/auth");
@@ -480,6 +481,7 @@ app.use(`/api/${apiVersion}/ws`, wsRoutes);
 app.use(`/api/${apiVersion}/agent`, agentVersionRoutes);
 app.use(`/api/${apiVersion}/metrics`, metricsRoutes);
 app.use(`/api/${apiVersion}/user/preferences`, userPreferencesRoutes);
+app.use(`/api/${apiVersion}/api`, authLimiter, apiHostsRoutes);
 
 // Bull Board - will be populated after queue manager initializes
 let bullBoardRouter = null;

frontend/src/pages/settings/Integrations.jsx

@@ -28,6 +28,8 @@ const Integrations = () => {
 	const [host_groups, setHostGroups] = useState([]);
 	const [loading, setLoading] = useState(true);
 	const [show_create_modal, setShowCreateModal] = useState(false);
+	const [show_edit_modal, setShowEditModal] = useState(false);
+	const [edit_token, setEditToken] = useState(null);
 	const [new_token, setNewToken] = useState(null);
 	const [show_secret, setShowSecret] = useState(false);
 	const [server_url, setServerUrl] = useState("");
@@ -40,6 +42,9 @@ const Integrations = () => {
 		default_host_group_id: "",
 		allowed_ip_ranges: "",
 		expires_at: "",
+		scopes: {
+			host: [],
+		},
 	});
 
 	const [copy_success, setCopySuccess] = useState({});
@@ -54,6 +59,25 @@ const Integrations = () => {
 		setActiveTab(tabName);
 	};
 
+	const toggle_scope_action = (resource, action) => {
+		setFormData((prev) => {
+			const current_scopes = prev.scopes || { [resource]: [] };
+			const resource_scopes = current_scopes[resource] || [];
+
+			const updated_scopes = resource_scopes.includes(action)
+				? resource_scopes.filter((a) => a !== action)
+				: [...resource_scopes, action];
+
+			return {
+				...prev,
+				scopes: {
+					...current_scopes,
+					[resource]: updated_scopes,
+				},
+			};
+		});
+	};
+
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Only run on mount
 	useEffect(() => {
 		load_tokens();
@@ -96,6 +120,14 @@ const Integrations = () => {
 		e.preventDefault();
 
 		try {
+			// Determine integration type based on active tab
+			let integration_type = "proxmox-lxc";
+			if (activeTab === "gethomepage") {
+				integration_type = "gethomepage";
+			} else if (activeTab === "api") {
+				integration_type = "api";
+			}
+
 			const data = {
 				token_name: form_data.token_name,
 				max_hosts_per_day: Number.parseInt(form_data.max_hosts_per_day, 10),
@@ -103,8 +135,7 @@ const Integrations = () => {
 					? form_data.allowed_ip_ranges.split(",").map((ip) => ip.trim())
 					: [],
 				metadata: {
-					integration_type:
-						activeTab === "gethomepage" ? "gethomepage" : "proxmox-lxc",
+					integration_type: integration_type,
 				},
 			};
 
@@ -116,6 +147,11 @@ const Integrations = () => {
 				data.expires_at = form_data.expires_at;
 			}
 
+			// Add scopes for API credentials
+			if (activeTab === "api" && form_data.scopes) {
+				data.scopes = form_data.scopes;
+			}
+
 			const response = await api.post("/auto-enrollment/tokens", data);
 			setNewToken(response.data.token);
 			setShowCreateModal(false);
@@ -128,6 +164,9 @@ const Integrations = () => {
 				default_host_group_id: "",
 				allowed_ip_ranges: "",
 				expires_at: "",
+				scopes: {
+					host: [],
+				},
 			});
 		} catch (error) {
 			console.error("Failed to create token:", error);
@@ -168,6 +207,69 @@ const Integrations = () => {
 		}
 	};
 
+	const open_edit_modal = (token) => {
+		setEditToken(token);
+		setFormData({
+			token_name: token.token_name,
+			max_hosts_per_day: token.max_hosts_per_day || 100,
+			default_host_group_id: token.default_host_group_id || "",
+			allowed_ip_ranges: token.allowed_ip_ranges?.join(", ") || "",
+			expires_at: token.expires_at
+				? new Date(token.expires_at).toISOString().slice(0, 16)
+				: "",
+			scopes: token.scopes || { host: [] },
+		});
+		setShowEditModal(true);
+	};
+
+	const update_token = async (e) => {
+		e.preventDefault();
+
+		try {
+			const data = {
+				allowed_ip_ranges: form_data.allowed_ip_ranges
+					? form_data.allowed_ip_ranges.split(",").map((ip) => ip.trim())
+					: [],
+			};
+
+			// Add expiration if provided
+			if (form_data.expires_at) {
+				data.expires_at = form_data.expires_at;
+			}
+
+			// Add scopes for API credentials
+			if (
+				edit_token?.metadata?.integration_type === "api" &&
+				form_data.scopes
+			) {
+				data.scopes = form_data.scopes;
+			}
+
+			await api.patch(`/auto-enrollment/tokens/${edit_token.id}`, data);
+			setShowEditModal(false);
+			setEditToken(null);
+			load_tokens();
+
+			// Reset form
+			setFormData({
+				token_name: "",
+				max_hosts_per_day: 100,
+				default_host_group_id: "",
+				allowed_ip_ranges: "",
+				expires_at: "",
+				scopes: {
+					host: [],
+				},
+			});
+		} catch (error) {
+			console.error("Failed to update token:", error);
+			const error_message = error.response?.data?.errors
+				? error.response.data.errors.map((e) => e.msg).join(", ")
+				: error.response?.data?.error || "Failed to update token";
+			alert(error_message);
+		}
+	};
+
 	const copy_to_clipboard = async (text, key) => {
 		// Check if Clipboard API is available
 		if (navigator.clipboard && window.isSecureContext) {
@@ -256,6 +358,17 @@ const Integrations = () => {
 						>
 							GetHomepage
 						</button>
+						<button
+							type="button"
+							onClick={() => handleTabChange("api")}
+							className={`px-6 py-3 text-sm font-medium ${
+								activeTab === "api"
+									? "text-primary-600 dark:text-primary-400 border-b-2 border-primary-500 bg-primary-50 dark:bg-primary-900/20"
+									: "text-secondary-500 dark:text-secondary-400 hover:text-secondary-700 dark:hover:text-secondary-300 hover:bg-secondary-50 dark:hover:bg-secondary-700/50"
+							}`}
+						>
+							API
+						</button>
 						<button
 							type="button"
 							onClick={() => handleTabChange("docker")}
@@ -736,6 +849,214 @@ const Integrations = () => {
 							</div>
 						)}
 
+						{/* API Tab */}
+						{activeTab === "api" && (
+							<div className="space-y-6">
+								{/* Header with New Credential Button */}
+								<div className="flex items-center justify-between">
+									<div className="flex items-center gap-3">
+										<div className="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
+											<Server className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+										</div>
+										<div>
+											<h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
+												API Credentials
+											</h3>
+											<p className="text-sm text-secondary-600 dark:text-secondary-400">
+												Manage API credentials for programmatic access to
+												PatchMon data
+											</p>
+										</div>
+									</div>
+									<button
+										type="button"
+										onClick={() => setShowCreateModal(true)}
+										className="btn-primary flex items-center gap-2"
+									>
+										<Plus className="h-4 w-4" />
+										New Credential
+									</button>
+								</div>
+
+								{/* API Credentials List */}
+								{loading ? (
+									<div className="text-center py-8">
+										<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
+									</div>
+								) : tokens.filter(
+										(token) => token.metadata?.integration_type === "api",
+									).length === 0 ? (
+									<div className="text-center py-8 text-secondary-600 dark:text-secondary-400">
+										<p>No API credentials created yet.</p>
+										<p className="text-sm mt-2">
+											Create a credential to enable programmatic access to
+											PatchMon.
+										</p>
+									</div>
+								) : (
+									<div className="space-y-3">
+										{tokens
+											.filter(
+												(token) => token.metadata?.integration_type === "api",
+											)
+											.map((token) => (
+												<div
+													key={token.id}
+													className="border border-secondary-200 dark:border-secondary-600 rounded-lg p-4 hover:border-primary-300 dark:hover:border-primary-700 transition-colors"
+												>
+													<div className="flex justify-between items-start">
+														<div className="flex-1">
+															<div className="flex items-center gap-2 flex-wrap">
+																<h4 className="font-medium text-secondary-900 dark:text-white">
+																	{token.token_name}
+																</h4>
+																<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+																	API
+																</span>
+																{token.is_active ? (
+																	<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+																		Active
+																	</span>
+																) : (
+																	<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-secondary-100 text-secondary-800 dark:bg-secondary-700 dark:text-secondary-200">
+																		Inactive
+																	</span>
+																)}
+															</div>
+															<div className="mt-2 space-y-1 text-sm text-secondary-600 dark:text-secondary-400">
+																<div className="flex items-center gap-2">
+																	<span className="font-mono text-xs bg-secondary-100 dark:bg-secondary-700 px-2 py-1 rounded">
+																		{token.token_key}
+																	</span>
+																	<button
+																		type="button"
+																		onClick={() =>
+																			copy_to_clipboard(
+																				token.token_key,
+																				`key-${token.id}`,
+																			)
+																		}
+																		className="text-primary-600 hover:text-primary-700 dark:text-primary-400"
+																	>
+																		{copy_success[`key-${token.id}`] ? (
+																			<CheckCircle className="h-4 w-4" />
+																		) : (
+																			<Copy className="h-4 w-4" />
+																		)}
+																	</button>
+																</div>
+																{token.scopes && (
+																	<p>
+																		Scopes:{" "}
+																		{Object.entries(token.scopes)
+																			.map(
+																				([resource, actions]) =>
+																					`${resource}: ${Array.isArray(actions) ? actions.join(", ") : actions}`,
+																			)
+																			.join(" | ")}
+																	</p>
+																)}
+																{token.allowed_ip_ranges?.length > 0 && (
+																	<p>
+																		Allowed IPs:{" "}
+																		{token.allowed_ip_ranges.join(", ")}
+																	</p>
+																)}
+																<p>Created: {format_date(token.created_at)}</p>
+																{token.last_used_at && (
+																	<p>
+																		Last Used: {format_date(token.last_used_at)}
+																	</p>
+																)}
+																{token.expires_at && (
+																	<p>
+																		Expires: {format_date(token.expires_at)}
+																		{new Date(token.expires_at) <
+																			new Date() && (
+																			<span className="ml-2 text-red-600 dark:text-red-400">
+																				(Expired)
+																			</span>
+																		)}
+																	</p>
+																)}
+															</div>
+														</div>
+														<div className="flex items-center gap-2">
+															<button
+																type="button"
+																onClick={() => open_edit_modal(token)}
+																className="px-3 py-1 text-sm rounded bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300"
+															>
+																Edit
+															</button>
+															<button
+																type="button"
+																onClick={() =>
+																	toggle_token_active(token.id, token.is_active)
+																}
+																className={`px-3 py-1 text-sm rounded ${
+																	token.is_active
+																		? "bg-secondary-100 text-secondary-700 hover:bg-secondary-200 dark:bg-secondary-700 dark:text-secondary-300"
+																		: "bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-300"
+																}`}
+															>
+																{token.is_active ? "Disable" : "Enable"}
+															</button>
+															<button
+																type="button"
+																onClick={() =>
+																	delete_token(token.id, token.token_name)
+																}
+																className="text-red-600 hover:text-red-800 dark:text-red-400 p-2"
+															>
+																<Trash2 className="h-4 w-4" />
+															</button>
+														</div>
+													</div>
+												</div>
+											))}
+									</div>
+								)}
+
+								{/* Documentation Section */}
+								<div className="bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800 rounded-lg p-6">
+									<h3 className="text-lg font-semibold text-primary-900 dark:text-primary-200 mb-4">
+										Using API Credentials
+									</h3>
+									<div className="space-y-4 text-sm text-primary-800 dark:text-primary-300">
+										<p>
+											API credentials allow you to programmatically access
+											PatchMon data using Basic Authentication.
+										</p>
+										<div>
+											<p className="font-semibold mb-2">
+												Example cURL Request:
+											</p>
+											<div className="bg-primary-100 dark:bg-primary-900/40 p-3 rounded border border-primary-200 dark:border-primary-700 font-mono text-xs overflow-x-auto">
+												curl -u "YOUR_API_KEY:YOUR_API_SECRET" \<br />
+												&nbsp;&nbsp;{server_url}/api/v1/api/hosts
+											</div>
+										</div>
+										<div>
+											<p className="font-semibold mb-2">
+												Query Hosts by Group:
+											</p>
+											<div className="bg-primary-100 dark:bg-primary-900/40 p-3 rounded border border-primary-200 dark:border-primary-700 font-mono text-xs overflow-x-auto">
+												curl -u "YOUR_API_KEY:YOUR_API_SECRET" \<br />
+												&nbsp;&nbsp;"{server_url}
+												/api/v1/api/hosts?hostgroup=Production,Development"
+											</div>
+										</div>
+										<p className="text-xs">
+											<strong>💡 Tip:</strong> You can filter by host group
+											names or UUIDs. Multiple groups can be specified as a
+											comma-separated list.
+										</p>
+									</div>
+								</div>
+							</div>
+						)}
+
 						{/* Docker Tab */}
 						{activeTab === "docker" && (
 							<div className="space-y-6">
@@ -885,7 +1206,9 @@ const Integrations = () => {
 								<h2 className="text-xl font-bold text-secondary-900 dark:text-white">
 									{activeTab === "gethomepage"
 										? "Create GetHomepage API Key"
-										: "Create Auto-Enrollment Token"}
+										: activeTab === "api"
+											? "Create API Credential"
+											: "Create Auto-Enrollment Token"}
 								</h2>
 								<button
 									type="button"
@@ -911,7 +1234,9 @@ const Integrations = () => {
 										placeholder={
 											activeTab === "gethomepage"
 												? "e.g., GetHomepage Widget"
-												: "e.g., Proxmox Production"
+												: activeTab === "api"
+													? "e.g., Ansible Inventory"
+													: "e.g., Proxmox Production"
 										}
 										className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
 									/>
@@ -970,6 +1295,56 @@ const Integrations = () => {
 									</>
 								)}
 
+								{activeTab === "api" && (
+									<div className="block">
+										<span className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
+											Scopes *
+										</span>
+										<div className="border border-secondary-300 dark:border-secondary-600 rounded-md p-4 bg-secondary-50 dark:bg-secondary-900">
+											<div className="mb-3">
+												<p className="text-xs font-semibold text-secondary-700 dark:text-secondary-300 mb-2">
+													Host Permissions
+												</p>
+												<div className="space-y-2">
+													{["get", "put", "patch", "update", "delete"].map(
+														(action) => (
+															<label
+																key={action}
+																className="flex items-center gap-2"
+															>
+																<input
+																	type="checkbox"
+																	checked={
+																		form_data.scopes?.host?.includes(action) ||
+																		false
+																	}
+																	onChange={() =>
+																		toggle_scope_action("host", action)
+																	}
+																	className="rounded border-secondary-300 dark:border-secondary-600 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-400"
+																/>
+																<span className="text-sm text-secondary-700 dark:text-secondary-300 uppercase">
+																	{action}
+																</span>
+																<span className="text-xs text-secondary-500 dark:text-secondary-400">
+																	{action === "get" && "- Read host data"}
+																	{action === "put" && "- Replace host data"}
+																	{action === "patch" && "- Update host data"}
+																	{action === "update" && "- Modify host data"}
+																	{action === "delete" && "- Delete hosts"}
+																</span>
+															</label>
+														),
+													)}
+												</div>
+											</div>
+										</div>
+										<p className="mt-1 text-xs text-secondary-500 dark:text-secondary-400">
+											Select the permissions this API credential should have
+										</p>
+									</div>
+								)}
+
 								<label className="block">
 									<span className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
 										Allowed IP Addresses (Optional)
@@ -1038,7 +1413,9 @@ const Integrations = () => {
 									<h2 className="text-lg font-bold text-secondary-900 dark:text-white">
 										{activeTab === "gethomepage"
 											? "API Key Created Successfully"
-											: "Token Created Successfully"}
+											: activeTab === "api"
+												? "API Credential Created Successfully"
+												: "Token Created Successfully"}
 									</h2>
 								</div>
 								<button
@@ -1161,6 +1538,103 @@ const Integrations = () => {
 									</div>
 								</div>
 
+								{activeTab === "api" && new_token.scopes && (
+									<div className="mt-4">
+										<div className="block text-xs font-medium text-secondary-700 dark:text-secondary-300 mb-2">
+											Granted Scopes
+										</div>
+										<div className="bg-secondary-50 dark:bg-secondary-900 border border-secondary-300 dark:border-secondary-600 rounded-md p-3">
+											{Object.entries(new_token.scopes).map(
+												([resource, actions]) => (
+													<div key={resource} className="text-sm">
+														<span className="font-semibold text-secondary-800 dark:text-secondary-200 capitalize">
+															{resource}:
+														</span>{" "}
+														<span className="text-secondary-600 dark:text-secondary-400">
+															{Array.isArray(actions)
+																? actions.join(", ").toUpperCase()
+																: actions}
+														</span>
+													</div>
+												),
+											)}
+										</div>
+									</div>
+								)}
+
+								{activeTab === "api" && (
+									<div className="mt-6">
+										<div className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
+											Usage Examples
+										</div>
+										<div className="space-y-3">
+											<div>
+												<p className="text-xs text-secondary-600 dark:text-secondary-400 mb-2">
+													Basic cURL request:
+												</p>
+												<div className="flex items-center gap-2">
+													<input
+														type="text"
+														value={`curl -u "${new_token.token_key}:${new_token.token_secret}" ${server_url}/api/v1/api/hosts`}
+														readOnly
+														className="flex-1 px-3 py-2 text-xs border border-secondary-300 dark:border-secondary-600 rounded-md bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-white font-mono"
+													/>
+													<button
+														type="button"
+														onClick={() =>
+															copy_to_clipboard(
+																`curl -u "${new_token.token_key}:${new_token.token_secret}" ${server_url}/api/v1/api/hosts`,
+																"api-curl-basic",
+															)
+														}
+														className="btn-primary p-2"
+														title="Copy cURL command"
+													>
+														{copy_success["api-curl-basic"] ? (
+															<CheckCircle className="h-4 w-4" />
+														) : (
+															<Copy className="h-4 w-4" />
+														)}
+													</button>
+												</div>
+											</div>
+											<div>
+												<p className="text-xs text-secondary-600 dark:text-secondary-400 mb-2">
+													Filter by host group:
+												</p>
+												<div className="flex items-center gap-2">
+													<input
+														type="text"
+														value={`curl -u "${new_token.token_key}:${new_token.token_secret}" "${server_url}/api/v1/api/hosts?hostgroup=Production"`}
+														readOnly
+														className="flex-1 px-3 py-2 text-xs border border-secondary-300 dark:border-secondary-600 rounded-md bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-white font-mono"
+													/>
+													<button
+														type="button"
+														onClick={() =>
+															copy_to_clipboard(
+																`curl -u "${new_token.token_key}:${new_token.token_secret}" "${server_url}/api/v1/api/hosts?hostgroup=Production"`,
+																"api-curl-filter",
+															)
+														}
+														className="btn-primary p-2"
+														title="Copy cURL command"
+													>
+														{copy_success["api-curl-filter"] ? (
+															<CheckCircle className="h-4 w-4" />
+														) : (
+															<Copy className="h-4 w-4" />
+														)}
+													</button>
+												</div>
+											</div>
+										</div>
+										<p className="text-xs text-secondary-500 dark:text-secondary-400 mt-3">
+											💡 Replace "Production" with your host group name or UUID
+										</p>
+									</div>
+								)}
+
 								{activeTab === "proxmox" && (
 									<div className="mt-6">
 										<div className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
@@ -1371,6 +1845,154 @@ const Integrations = () => {
 					</div>
 				</div>
 			)}
+
+			{/* Edit API Credential Modal */}
+			{show_edit_modal && edit_token && (
+				<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+					<div className="bg-white dark:bg-secondary-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+						<div className="p-6">
+							<div className="flex items-center justify-between mb-6">
+								<h2 className="text-xl font-bold text-secondary-900 dark:text-white">
+									Edit API Credential
+								</h2>
+								<button
+									type="button"
+									onClick={() => {
+										setShowEditModal(false);
+										setEditToken(null);
+									}}
+									className="text-secondary-400 hover:text-secondary-600 dark:hover:text-secondary-200"
+								>
+									<X className="h-6 w-6" />
+								</button>
+							</div>
+
+							<form onSubmit={update_token} className="space-y-4">
+								<div className="block">
+									<span className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
+										Token Name
+									</span>
+									<input
+										type="text"
+										value={form_data.token_name}
+										readOnly
+										disabled
+										className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-secondary-100 dark:bg-secondary-900 text-secondary-500 dark:text-secondary-400"
+									/>
+									<p className="mt-1 text-xs text-secondary-500 dark:text-secondary-400">
+										Token name cannot be changed
+									</p>
+								</div>
+
+								{edit_token?.metadata?.integration_type === "api" && (
+									<div className="block">
+										<span className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2">
+											Scopes
+										</span>
+										<div className="border border-secondary-300 dark:border-secondary-600 rounded-md p-4 bg-secondary-50 dark:bg-secondary-900">
+											<div className="mb-3">
+												<p className="text-xs font-semibold text-secondary-700 dark:text-secondary-300 mb-2">
+													Host Permissions
+												</p>
+												<div className="space-y-2">
+													{["get", "put", "patch", "update", "delete"].map(
+														(action) => (
+															<label
+																key={action}
+																className="flex items-center gap-2"
+															>
+																<input
+																	type="checkbox"
+																	checked={
+																		form_data.scopes?.host?.includes(action) ||
+																		false
+																	}
+																	onChange={() =>
+																		toggle_scope_action("host", action)
+																	}
+																	className="rounded border-secondary-300 dark:border-secondary-600 text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-400"
+																/>
+																<span className="text-sm text-secondary-700 dark:text-secondary-300 uppercase">
+																	{action}
+																</span>
+																<span className="text-xs text-secondary-500 dark:text-secondary-400">
+																	{action === "get" && "- Read host data"}
+																	{action === "put" && "- Replace host data"}
+																	{action === "patch" && "- Update host data"}
+																	{action === "update" && "- Modify host data"}
+																	{action === "delete" && "- Delete hosts"}
+																</span>
+															</label>
+														),
+													)}
+												</div>
+											</div>
+										</div>
+										<p className="mt-1 text-xs text-secondary-500 dark:text-secondary-400">
+											Update the permissions for this API credential
+										</p>
+									</div>
+								)}
+
+								<label className="block">
+									<span className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
+										Allowed IP Addresses (Optional)
+									</span>
+									<input
+										type="text"
+										value={form_data.allowed_ip_ranges}
+										onChange={(e) =>
+											setFormData({
+												...form_data,
+												allowed_ip_ranges: e.target.value,
+											})
+										}
+										placeholder="e.g., 192.168.1.100, 10.0.0.50"
+										className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+									/>
+									<p className="mt-1 text-xs text-secondary-500 dark:text-secondary-400">
+										Comma-separated list of IP addresses allowed to use this
+										token
+									</p>
+								</label>
+
+								<label className="block">
+									<span className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-1">
+										Expiration Date (Optional)
+									</span>
+									<input
+										type="datetime-local"
+										value={form_data.expires_at}
+										onChange={(e) =>
+											setFormData({ ...form_data, expires_at: e.target.value })
+										}
+										className="w-full px-3 py-2 border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-700 text-secondary-900 dark:text-white"
+									/>
+								</label>
+
+								<div className="flex gap-3 pt-4">
+									<button
+										type="submit"
+										className="flex-1 btn-primary py-2 px-4 rounded-md"
+									>
+										Update Credential
+									</button>
+									<button
+										type="button"
+										onClick={() => {
+											setShowEditModal(false);
+											setEditToken(null);
+										}}
+										className="flex-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 py-2 px-4 rounded-md hover:bg-secondary-200 dark:hover:bg-secondary-600"
+									>
+										Cancel
+									</button>
+								</div>
+							</form>
+						</div>
+					</div>
+				</div>
+			)}
 		</SettingsLayout>
 	);
 };