README.md

@@ -41,7 +41,7 @@ _Pangolin tunnels your services to the internet so you can access anything from
 [![Docker](https://img.shields.io/docker/pulls/fosrl/pangolin?style=flat-square)](https://hub.docker.com/r/fosrl/pangolin)
 ![Stars](https://img.shields.io/github/stars/fosrl/pangolin?style=flat-square)
 [![Discord](https://img.shields.io/discord/1325658630518865980?logo=discord&style=flat-square)](https://discord.gg/HCJR8Xhme4)
-[![YouTube](https://img.shields.io/badge/YouTube-red?logo=youtube&logoColor=white&style=flat-square)](https://www.youtube.com/@fossorial-app)
+[![Youtube](https://img.shields.io/badge/YouTube-red?logo=youtube&logoColor=white&style=flat-square)](https://www.youtube.com/@fossorial-app)
 
 </div>
 

blueprint.py

@@ -8,10 +8,10 @@ import base64
 YAML_FILE_PATH = 'blueprint.yaml'
 
 # The API endpoint and headers from the curl request
-API_URL = 'http://api.pangolin.fossorial.io/v1/org/test/blueprint'
+API_URL = 'http://localhost:3004/v1/org/test/blueprint'
 HEADERS = {
     'accept': '*/*',
-    'Authorization': 'Bearer <your_token_here>',
+    'Authorization': 'Bearer v7ix7xha1bmq2on.tzsden374mtmkeczm3tx44uzxsljnrst7nmg7ccr',
     'Content-Type': 'application/json'
 }
 

package-lock.json

@@ -10,7 +10,7 @@
             "license": "SEE LICENSE IN LICENSE AND README.md",
             "dependencies": {
                 "@asteasolutions/zod-to-openapi": "^7.3.4",
-                "@hookform/resolvers": "5.2.2",
+                "@hookform/resolvers": "4.1.3",
                 "@node-rs/argon2": "^2.0.2",
                 "@oslojs/crypto": "1.0.1",
                 "@oslojs/encoding": "1.1.0",
@@ -2232,14 +2232,15 @@
             "license": "MIT"
         },
         "node_modules/@hookform/resolvers": {
-            "version": "5.2.2",
+            "version": "4.1.3",
-            "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+            "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-4.1.3.tgz",
-            "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+            "integrity": "sha512-Jsv6UOWYTrEFJ/01ZrnwVXs7KDvP8XIo115i++5PWvNkNvkrsTfGiLS6w+eJ57CYtUtDQalUWovCZDHFJ8u1VQ==",
+            "license": "MIT",
             "dependencies": {
                 "@standard-schema/utils": "^0.3.0"
             },
             "peerDependencies": {
-                "react-hook-form": "^7.55.0"
+                "react-hook-form": "^7.0.0"
             }
         },
         "node_modules/@humanfs/core": {

package.json

@@ -27,7 +27,7 @@
     },
     "dependencies": {
         "@asteasolutions/zod-to-openapi": "^7.3.4",
-        "@hookform/resolvers": "5.2.2",
+        "@hookform/resolvers": "4.1.3",
         "@node-rs/argon2": "^2.0.2",
         "@oslojs/crypto": "1.0.1",
         "@oslojs/encoding": "1.1.0",

server/lib/blueprints/proxyResources.ts

@@ -138,8 +138,12 @@ export async function updateProxyResources(
                 ? true
                 : resourceData.ssl;
         let headers = "";
-        if (resourceData.headers) {
+        for (const header of resourceData.headers || []) {
-            headers = JSON.stringify(resourceData.headers);
+            headers += `${header.name}: ${header.value},`;
+        }
+        // if there are headers, remove the trailing comma
+        if (headers.endsWith(",")) {
+            headers = headers.slice(0, -1);
         }
 
         if (existingResource) {
@@ -165,7 +169,7 @@ export async function updateProxyResources(
                     .update(resources)
                     .set({
                         name: resourceData.name || "Unnamed Resource",
-                        protocol: protocol || "tcp",
+                        protocol: protocol || "http",
                         http: http,
                         proxyPort: http ? null : resourceData["proxy-port"],
                         fullDomain: http ? resourceData["full-domain"] : null,
@@ -457,7 +461,7 @@ export async function updateProxyResources(
                     orgId,
                     niceId: resourceNiceId,
                     name: resourceData.name || "Unnamed Resource",
-                    protocol: protocol || "tcp",
+                    protocol: resourceData.protocol || "http",
                     http: http,
                     proxyPort: http ? null : resourceData["proxy-port"],
                     fullDomain: http ? resourceData["full-domain"] : null,

server/lib/consts.ts

@@ -2,7 +2,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 
 // This is a placeholder value replaced by the build process
-export const APP_VERSION = "1.10.2";
+export const APP_VERSION = "1.10.1";
 
 export const __FILENAME = fileURLToPath(import.meta.url);
 export const __DIRNAME = path.dirname(__FILENAME);

server/routers/idp/oidcAutoProvision.ts

@@ -158,13 +158,8 @@ export async function oidcAutoProvision({
             .from(userOrgs)
             .where(eq(userOrgs.userId, userId));
 
-        // Filter to only auto-provisioned orgs for CRUD operations
-        const autoProvisionedOrgs = currentUserOrgs.filter(
-            (org) => org.autoProvisioned === true
-        );
-
         // Delete orgs that are no longer valid
-        const orgsToDelete = autoProvisionedOrgs
+        const orgsToDelete = currentUserOrgs
             .filter(
                 (currentOrg) =>
                     !userOrgInfo.some(
@@ -200,9 +195,7 @@ export async function oidcAutoProvision({
                 orgsToAdd.map((org) => ({
                     userId: userId!,
                     orgId: org.orgId,
-                    roleId: org.roleId,
+                    roleId: org.roleId
-                    autoProvisioned: true,
-                    dateCreated: new Date().toISOString()
                 }))
             );
         }

server/routers/newt/targets.ts

@@ -15,7 +15,7 @@ export async function addTargets(
         }:${target.port}`;
     });
 
-    await sendToClient(newtId, {
+    sendToClient(newtId, {
         type: `newt/${protocol}/add`,
         data: {
             targets: payloadTargets

server/routers/resource/createResource.ts

@@ -319,6 +319,26 @@ async function createRawResource(
 
     const { name, http, protocol, proxyPort } = parsedBody.data;
 
+    // if http is false check to see if there is already a resource with the same port and protocol
+    const existingResource = await db
+        .select()
+        .from(resources)
+        .where(
+            and(
+                eq(resources.protocol, protocol),
+                eq(resources.proxyPort, proxyPort!)
+            )
+        );
+
+    if (existingResource.length > 0) {
+        return next(
+            createHttpError(
+                HttpCode.CONFLICT,
+                "Resource with that protocol and port already exists"
+            )
+        );
+    }
+
     let resource: Resource | undefined;
 
     const niceId = await getUniqueResourceName(orgId);

server/routers/resource/getResource.ts

@@ -42,9 +42,7 @@ async function query(resourceId?: number, niceId?: string, orgId?: string) {
     }
 }
 
-export type GetResourceResponse = Omit<NonNullable<Awaited<ReturnType<typeof query>>>, 'headers'> & {
+export type GetResourceResponse = NonNullable<Awaited<ReturnType<typeof query>>>;
-    headers: { name: string; value: string }[] | null;
-};
 
 registry.registerPath({
     method: "get",
@@ -101,10 +99,7 @@ export async function getResource(
         }
 
         return response<GetResourceResponse>(res, {
-            data: {
+            data: resource,
-                ...resource,
-                headers: resource.headers ? JSON.parse(resource.headers) : resource.headers
-            },
             success: true,
             error: false,
             message: "Resource retrieved successfully",

server/routers/resource/updateResource.ts

@@ -47,7 +47,7 @@ const updateHttpResourceBodySchema = z
         tlsServerName: z.string().nullable().optional(),
         setHostHeader: z.string().nullable().optional(),
         skipToIdpId: z.number().int().positive().nullable().optional(),
-        headers: z.array(z.object({ name: z.string(), value: z.string() })).nullable().optional(),
+        headers: z.string().nullable().optional()
     })
     .strict()
     .refine((data) => Object.keys(data).length > 0, {
@@ -85,6 +85,18 @@ const updateHttpResourceBodySchema = z
             message:
                 "Invalid custom Host Header value. Use domain name format, or save empty to unset custom Host Header."
         }
+    )
+    .refine(
+        (data) => {
+            if (data.headers) {
+                return validateHeaders(data.headers);
+            }
+            return true;
+        },
+        {
+            message:
+                "Invalid headers format. Use comma-separated format: 'Header-Name: value, Another-Header: another-value'. Header values cannot contain colons."
+        }
     );
 
 export type UpdateResourceResponse = Resource;
@@ -280,14 +292,9 @@ async function updateHttpResource(
         updateData.subdomain = finalSubdomain;
     }
 
-    let headers = null;
-    if (updateData.headers) {
-        headers = JSON.stringify(updateData.headers);
-    }
-
     const updatedResource = await db
         .update(resources)
-        .set({ ...updateData, headers })
+        .set({ ...updateData })
         .where(eq(resources.resourceId, resource.resourceId))
         .returning();
 
@@ -335,6 +342,31 @@ async function updateRawResource(
 
     const updateData = parsedBody.data;
 
+    if (updateData.proxyPort) {
+        const proxyPort = updateData.proxyPort;
+        const existingResource = await db
+            .select()
+            .from(resources)
+            .where(
+                and(
+                    eq(resources.protocol, resource.protocol),
+                    eq(resources.proxyPort, proxyPort!)
+                )
+            );
+
+        if (
+            existingResource.length > 0 &&
+            existingResource[0].resourceId !== resource.resourceId
+        ) {
+            return next(
+                createHttpError(
+                    HttpCode.CONFLICT,
+                    "Resource with that protocol and port already exists"
+                )
+            );
+        }
+    }
+
     const updatedResource = await db
         .update(resources)
         .set(updateData)

server/routers/traefik/getTraefikConfig.ts

@@ -306,25 +306,17 @@ export async function getTraefikConfig(
                 ...additionalMiddlewares
             ];
 
-            if (resource.headers || resource.setHostHeader) {
+            if (resource.headers && resource.headers.length > 0) {
                 // if there are headers, parse them into an object
                 const headersObj: { [key: string]: string } = {};
-                if (resource.headers) {
+                const headersArr = resource.headers.split(",");
-                    let headersArr: { name: string; value: string }[] = [];
+                for (const header of headersArr) {
-                    try {
+                    const [key, value] = header
-                        headersArr = JSON.parse(resource.headers) as {
+                        .split(":")
-                            name: string;
+                        .map((s: string) => s.trim());
-                            value: string;
+                    if (key && value) {
-                        }[];
+                        headersObj[key] = value;
-                    } catch (e) {
-                        logger.warn(
-                            `Failed to parse headers for resource ${resource.resourceId}: ${e}`
-                        );
                     }
-
-                    headersArr.forEach((header) => {
-                        headersObj[header.name] = header.value;
-                    });
                 }
 
                 if (resource.setHostHeader) {

server/setup/migrationsPg.ts

@@ -10,7 +10,6 @@ import m2 from "./scriptsPg/1.7.0";
 import m3 from "./scriptsPg/1.8.0";
 import m4 from "./scriptsPg/1.9.0";
 import m5 from "./scriptsPg/1.10.0";
-import m6 from "./scriptsPg/1.10.2";
 
 // THIS CANNOT IMPORT ANYTHING FROM THE SERVER
 // EXCEPT FOR THE DATABASE AND THE SCHEMA
@@ -22,7 +21,6 @@ const migrations = [
     { version: "1.8.0", run: m3 },
     { version: "1.9.0", run: m4 },
     { version: "1.10.0", run: m5 },
-    { version: "1.10.2", run: m6 },
     // Add new migrations here as they are created
 ] as {
     version: string;

server/setup/migrationsSqlite.ts

@@ -28,7 +28,6 @@ import m23 from "./scriptsSqlite/1.8.0";
 import m24 from "./scriptsSqlite/1.9.0";
 import m25 from "./scriptsSqlite/1.10.0";
 import m26 from "./scriptsSqlite/1.10.1";
-import m27 from "./scriptsSqlite/1.10.2";
 
 // THIS CANNOT IMPORT ANYTHING FROM THE SERVER
 // EXCEPT FOR THE DATABASE AND THE SCHEMA
@@ -56,7 +55,6 @@ const migrations = [
     { version: "1.9.0", run: m24 },
     { version: "1.10.0", run: m25 },
     { version: "1.10.1", run: m26 },
-    { version: "1.10.2", run: m27 },
     // Add new migrations here as they are created
 ] as const;
 

server/setup/scriptsPg/1.10.2.ts

@@ -1,47 +0,0 @@
-import { db } from "@server/db/pg/driver";
-import { sql } from "drizzle-orm";
-import { __DIRNAME, APP_PATH } from "@server/lib/consts";
-
-const version = "1.10.2";
-
-export default async function migration() {
-    console.log(`Running setup script ${version}...`);
-
-    try {
-        const resources = await db.execute(sql`
-            SELECT * FROM "resources"
-        `);
-
-        await db.execute(sql`BEGIN`);
-
-        for (const resource of resources.rows) {
-            const headers = resource.headers as string | null;
-            if (headers && headers !== "") {
-                // lets convert it to json
-                // fist split at commas
-                const headersArray = headers
-                    .split(",")
-                    .map((header: string) => {
-                        const [name, ...valueParts] = header.split(":");
-                        const value = valueParts.join(":").trim();
-                        return { name: name.trim(), value };
-                    });
-
-                await db.execute(sql`
-                    UPDATE "resources" SET "headers" = ${JSON.stringify(headersArray)} WHERE "resourceId" = ${resource.resourceId}
-                `);
-
-                console.log(
-                    `Updated resource ${resource.resourceId} headers to JSON format`
-                );
-            }
-        }
-
-        await db.execute(sql`COMMIT`);
-        console.log(`Migrated database`);
-    } catch (e) {
-        await db.execute(sql`ROLLBACK`);
-        console.log("Failed to migrate db:", e);
-        throw e;
-    }
-}

server/setup/scriptsSqlite/1.10.2.ts

@@ -1,54 +0,0 @@
-import { APP_PATH } from "@server/lib/consts";
-import Database from "better-sqlite3";
-import path from "path";
-
-const version = "1.10.2";
-
-export default async function migration() {
-    console.log(`Running setup script ${version}...`);
-
-    const location = path.join(APP_PATH, "db", "db.sqlite");
-    const db = new Database(location);
-
-    const resources = db.prepare("SELECT * FROM resources").all() as Array<{
-        resourceId: number;
-        headers: string | null;
-    }>;
-
-    try {
-        db.pragma("foreign_keys = OFF");
-
-        db.transaction(() => {
-            for (const resource of resources) {
-                const headers = resource.headers;
-                if (headers && headers !== "") {
-                    // lets convert it to json
-                    // fist split at commas
-                    const headersArray = headers
-                        .split(",")
-                        .map((header: string) => {
-                            const [name, ...valueParts] = header.split(":");
-                            const value = valueParts.join(":").trim();
-                            return { name: name.trim(), value };
-                        });
-
-                    db.prepare(
-                        `
-                            UPDATE "resources" SET "headers" = ? WHERE "resourceId" = ?`
-                    ).run(JSON.stringify(headersArray), resource.resourceId);
-
-                    console.log(
-                        `Updated resource ${resource.resourceId} headers to JSON format`
-                    );
-                }
-            }
-        })();
-
-        db.pragma("foreign_keys = ON");
-
-        console.log(`Migrated database`);
-    } catch (e) {
-        console.log("Failed to migrate db:", e);
-        throw e;
-    }
-}

src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx

@@ -68,7 +68,7 @@ export default function AccessControlsPage() {
         autoProvisioned: z.boolean()
     });
 
-    const form = useForm({
+    const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             username: user.username!,

src/app/[orgId]/settings/access/users/create/page.tsx

@@ -161,7 +161,7 @@ export default function Page() {
         { hours: 168, name: t("day", { count: 7 }) }
     ];
 
-    const internalForm = useForm({
+    const internalForm = useForm<z.infer<typeof internalFormSchema>>({
         resolver: zodResolver(internalFormSchema),
         defaultValues: {
             email: "",
@@ -170,7 +170,7 @@ export default function Page() {
         }
     });
 
-    const googleAzureForm = useForm({
+    const googleAzureForm = useForm<z.infer<typeof googleAzureFormSchema>>({
         resolver: zodResolver(googleAzureFormSchema),
         defaultValues: {
             email: "",
@@ -179,7 +179,7 @@ export default function Page() {
         }
     });
 
-    const genericOidcForm = useForm({
+    const genericOidcForm = useForm<z.infer<typeof genericOidcFormSchema>>({
         resolver: zodResolver(genericOidcFormSchema),
         defaultValues: {
             username: "",

src/app/[orgId]/settings/api-keys/create/page.tsx

@@ -91,14 +91,14 @@ export default function Page() {
 
     type CopiedFormValues = z.infer<typeof copiedFormSchema>;
 
-    const form = useForm({
+    const form = useForm<CreateFormValues>({
         resolver: zodResolver(createFormSchema),
         defaultValues: {
             name: ""
         }
     });
 
-    const copiedForm = useForm({
+    const copiedForm = useForm<CopiedFormValues>({
         resolver: zodResolver(copiedFormSchema),
         defaultValues: {
             copied: true

src/app/[orgId]/settings/clients/[clientId]/general/page.tsx

@@ -58,7 +58,7 @@ export default function GeneralPage() {
     const [clientSites, setClientSites] = useState<Tag[]>([]);
     const [activeSitesTagIndex, setActiveSitesTagIndex] = useState<number | null>(null);
 
-    const form = useForm({
+    const form = useForm<GeneralFormValues>({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             name: client?.name,

src/app/[orgId]/settings/clients/create/page.tsx

@@ -265,7 +265,7 @@ export default function Page() {
         }
     };
 
-    const form = useForm({
+    const form = useForm<CreateClientFormValues>({
         resolver: zodResolver(createClientFormSchema),
         defaultValues: {
             name: "",

src/app/[orgId]/settings/general/page.tsx

@@ -59,7 +59,7 @@ export default function GeneralPage() {
     const [loadingDelete, setLoadingDelete] = useState(false);
     const [loadingSave, setLoadingSave] = useState(false);
 
-    const form = useForm({
+    const form = useForm<GeneralFormValues>({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             name: org?.org.name,

src/app/[orgId]/settings/resources/[niceId]/authentication/page.tsx

@@ -138,12 +138,12 @@ export default function ResourceAuthenticationPage() {
     const [isSetPasswordOpen, setIsSetPasswordOpen] = useState(false);
     const [isSetPincodeOpen, setIsSetPincodeOpen] = useState(false);
 
-    const usersRolesForm = useForm({
+    const usersRolesForm = useForm<z.infer<typeof UsersRolesFormSchema>>({
         resolver: zodResolver(UsersRolesFormSchema),
         defaultValues: { roles: [], users: [] }
     });
 
-    const whitelistForm = useForm({
+    const whitelistForm = useForm<z.infer<typeof whitelistSchema>>({
         resolver: zodResolver(whitelistSchema),
         defaultValues: { emails: [] }
     });

src/app/[orgId]/settings/resources/[niceId]/general/page.tsx

@@ -119,7 +119,7 @@ export default function GeneralForm() {
 
     type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
-    const form = useForm({
+    const form = useForm<GeneralFormValues>({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             enabled: resource.enabled,

src/app/[orgId]/settings/resources/[niceId]/proxy/page.tsx

@@ -227,7 +227,7 @@ export default function ReverseProxyTargets(props: {
                     message: t("proxyErrorInvalidHeader")
                 }
             ),
-        headers: z.array(z.object({ name: z.string(), value: z.string() })).nullable()
+        headers: z.string().optional()
     });
 
     const tlsSettingsSchema = z.object({
@@ -260,7 +260,7 @@ export default function ReverseProxyTargets(props: {
             port: "" as any as number,
             path: null,
             pathMatchType: null
-        }
+        } as z.infer<typeof addTargetSchema>
     });
 
     const watchedIp = addTargetForm.watch("ip");
@@ -274,7 +274,7 @@ export default function ReverseProxyTargets(props: {
         }
     };
 
-    const tlsSettingsForm = useForm({
+    const tlsSettingsForm = useForm<TlsSettingsValues>({
         resolver: zodResolver(tlsSettingsSchema),
         defaultValues: {
             ssl: resource.ssl,
@@ -282,15 +282,15 @@ export default function ReverseProxyTargets(props: {
         }
     });
 
-    const proxySettingsForm = useForm({
+    const proxySettingsForm = useForm<ProxySettingsValues>({
         resolver: zodResolver(proxySettingsSchema),
         defaultValues: {
             setHostHeader: resource.setHostHeader || "",
-            headers: resource.headers
+            headers: resource.headers || ""
         }
     });
 
-    const targetsSettingsForm = useForm({
+    const targetsSettingsForm = useForm<TargetsSettingsValues>({
         resolver: zodResolver(targetsSettingsSchema),
         defaultValues: {
             stickySession: resource.stickySession
@@ -1479,7 +1479,7 @@ export default function ReverseProxyTargets(props: {
                                                 <FormControl>
                                                     <HeadersInput
                                                         value={
-                                                            field.value
+                                                            field.value || ""
                                                         }
                                                         onChange={(value) => {
                                                             field.onChange(

src/app/[orgId]/settings/resources/[niceId]/rules/page.tsx

@@ -114,7 +114,7 @@ export default function ResourceRules(props: {
         CIDR: t('ipAddressRange')
     } as const;
 
-    const addRuleForm = useForm({
+    const addRuleForm = useForm<z.infer<typeof addRuleSchema>>({
         resolver: zodResolver(addRuleSchema),
         defaultValues: {
             action: "ACCEPT",

src/app/[orgId]/settings/resources/create/page.tsx

@@ -211,7 +211,7 @@ export default function Page() {
             ])
     ];
 
-    const baseForm = useForm({
+    const baseForm = useForm<BaseResourceFormValues>({
         resolver: zodResolver(baseResourceFormSchema),
         defaultValues: {
             name: "",
@@ -219,12 +219,12 @@ export default function Page() {
         }
     });
 
-    const httpForm = useForm({
+    const httpForm = useForm<HttpResourceFormValues>({
         resolver: zodResolver(httpResourceFormSchema),
         defaultValues: {}
     });
 
-    const tcpUdpForm = useForm({
+    const tcpUdpForm = useForm<TcpUdpResourceFormValues>({
         resolver: zodResolver(tcpUdpResourceFormSchema),
         defaultValues: {
             protocol: "tcp",
@@ -241,7 +241,7 @@ export default function Page() {
             port: "" as any as number,
             path: null,
             pathMatchType: null
-        }
+        } as z.infer<typeof addTargetSchema>
     });
 
     const watchedIp = addTargetForm.watch("ip");

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -64,7 +64,7 @@ export default function GeneralPage() {
     const router = useRouter();
     const t = useTranslations();
 
-    const form = useForm({
+    const form = useForm<GeneralFormValues>({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             name: site?.name,

src/app/[orgId]/settings/sites/create/page.tsx

@@ -425,7 +425,7 @@ WantedBy=default.target`
         }
     };
 
-    const form = useForm({
+    const form = useForm<CreateSiteFormValues>({
         resolver: zodResolver(createSiteFormSchema),
         defaultValues: {
             name: "",

src/app/admin/api-keys/create/page.tsx

@@ -89,14 +89,14 @@ export default function Page() {
 
     type CopiedFormValues = z.infer<typeof copiedFormSchema>;
 
-    const form = useForm({
+    const form = useForm<CreateFormValues>({
         resolver: zodResolver(createFormSchema),
         defaultValues: {
             name: ""
         }
     });
 
-    const copiedForm = useForm({
+    const copiedForm = useForm<CopiedFormValues>({
         resolver: zodResolver(copiedFormSchema),
         defaultValues: {
             copied: true

src/app/admin/idp/[idpId]/general/page.tsx

@@ -71,7 +71,7 @@ export default function GeneralPage() {
 
     type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
-    const form = useForm({
+    const form = useForm<GeneralFormValues>({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             name: "",

src/app/admin/idp/[idpId]/policies/page.tsx

@@ -102,7 +102,7 @@ export default function PoliciesPage() {
     type PolicyFormValues = z.infer<typeof policyFormSchema>;
     type DefaultMappingsValues = z.infer<typeof defaultMappingsSchema>;
 
-    const form = useForm({
+    const form = useForm<PolicyFormValues>({
         resolver: zodResolver(policyFormSchema),
         defaultValues: {
             orgId: "",
@@ -111,7 +111,7 @@ export default function PoliciesPage() {
         }
     });
 
-    const defaultMappingsForm = useForm({
+    const defaultMappingsForm = useForm<DefaultMappingsValues>({
         resolver: zodResolver(defaultMappingsSchema),
         defaultValues: {
             defaultRoleMapping: "",

src/app/admin/idp/create/page.tsx

@@ -76,7 +76,7 @@ export default function Page() {
         }
     ];
 
-    const form = useForm({
+    const form = useForm<CreateIdpFormValues>({
         resolver: zodResolver(createIdpFormSchema),
         defaultValues: {
             name: "",

src/app/auth/initial-setup/page.tsx

@@ -51,7 +51,7 @@ export default function InitialSetupPage() {
     const [error, setError] = useState<string | null>(null);
     const [checking, setChecking] = useState(true);
 
-    const form = useForm({
+    const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             setupToken: "",

src/app/auth/reset-password/ResetPasswordForm.tsx

@@ -102,7 +102,7 @@ export default function ResetPasswordForm({
         code: z.string().length(6, { message: t('pincodeInvalid') })
     });
 
-    const form = useForm({
+    const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             email: emailParam || "",
@@ -112,14 +112,14 @@ export default function ResetPasswordForm({
         }
     });
 
-    const mfaForm = useForm({
+    const mfaForm = useForm<z.infer<typeof mfaSchema>>({
         resolver: zodResolver(mfaSchema),
         defaultValues: {
             code: ""
         }
     });
 
-    const requestForm = useForm({
+    const requestForm = useForm<z.infer<typeof requestSchema>>({
         resolver: zodResolver(requestSchema),
         defaultValues: {
             email: emailParam || ""

src/app/setup/page.tsx

@@ -50,7 +50,7 @@ export default function StepperForm() {
         subnet: z.string().min(1, { message: t("subnetRequired") })
     });
 
-    const orgForm = useForm({
+    const orgForm = useForm<z.infer<typeof orgSchema>>({
         resolver: zodResolver(orgSchema),
         defaultValues: {
             orgName: "",

src/components/HeadersInput.tsx

@@ -1,19 +1,18 @@
 "use client";
 
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
 
-
 interface HeadersInputProps {
-    value?: { name: string, value: string }[] | null;
+    value?: string;
-    onChange: (value: { name: string, value: string }[] | null) => void;
+    onChange: (value: string) => void;
     placeholder?: string;
     rows?: number;
     className?: string;
 }
 
 export function HeadersInput({ 
-    value = [],
+    value = "", 
     onChange, 
     placeholder = `X-Example-Header: example-value
 X-Another-Header: another-value`,
@@ -21,98 +20,47 @@ X-Another-Header: another-value`,
     className
 }: HeadersInputProps) {
     const [internalValue, setInternalValue] = useState("");
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const isUserEditingRef = useRef(false);
 
-    // Convert header objects array to newline-separated string for display
+    // Convert comma-separated to newline-separated for display
-    const convertToNewlineSeparated = (headers: { name: string, value: string }[] | null): string => {
+    const convertToNewlineSeparated = (commaSeparated: string): string => {
-        if (!headers || headers.length === 0) return "";
+        if (!commaSeparated || commaSeparated.trim() === "") return "";
         
-        return headers
+        return commaSeparated
-            .map(header => `${header.name}: ${header.value}`)
+            .split(',')
+            .map(header => header.trim())
+            .filter(header => header.length > 0)
             .join('\n');
     };
 
-    // Convert newline-separated string to header objects array
+    // Convert newline-separated to comma-separated for output
-    const convertToHeadersArray = (newlineSeparated: string): { name: string, value: string }[] | null => {
+    const convertToCommaSeparated = (newlineSeparated: string): string => {
-        if (!newlineSeparated || newlineSeparated.trim() === "") return [];
+        if (!newlineSeparated || newlineSeparated.trim() === "") return "";
         
         return newlineSeparated
             .split('\n')
-            .map(line => line.trim())
+            .map(header => header.trim())
-            .filter(line => line.length > 0 && line.includes(':'))
+            .filter(header => header.length > 0)
-            .map(line => {
+            .join(', ');
-                const colonIndex = line.indexOf(':');
-                const name = line.substring(0, colonIndex).trim();
-                const value = line.substring(colonIndex + 1).trim();
-
-                // Ensure header name conforms to HTTP header requirements
-                // Header names should be case-insensitive, contain only ASCII letters, digits, and hyphens
-                const normalizedName = name.replace(/[^a-zA-Z0-9\-]/g, '').toLowerCase();
-
-                return { name: normalizedName, value };
-            })
-            .filter(header => header.name.length > 0); // Filter out headers with invalid names
     };
 
     // Update internal value when external value changes
-    // But only if the user is not currently editing (textarea not focused)
     useEffect(() => {
-        if (!isUserEditingRef.current) {
+        setInternalValue(convertToNewlineSeparated(value));
-            setInternalValue(convertToNewlineSeparated(value));
-        }
     }, [value]);
 
     const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         const newValue = e.target.value;
         setInternalValue(newValue);
         
-        // Mark that user is actively editing
+        // Convert back to comma-separated format for the parent
-        isUserEditingRef.current = true;
+        const commaSeparatedValue = convertToCommaSeparated(newValue);
-
+        onChange(commaSeparatedValue);
-        // Only update parent if the input is in a valid state
-        // Valid states: empty/whitespace only, or contains properly formatted headers
-
-        if (newValue.trim() === "") {
-            // Empty input is valid - represents no headers
-            onChange([]);
-        } else {
-            // Check if all non-empty lines are properly formatted (contain ':')
-            const lines = newValue.split('\n');
-            const nonEmptyLines = lines
-                .map(line => line.trim())
-                .filter(line => line.length > 0);
-
-            // If there are no non-empty lines, or all non-empty lines contain ':', it's valid
-            const isValid = nonEmptyLines.length === 0 || nonEmptyLines.every(line => line.includes(':'));
-
-            if (isValid) {
-                // Safe to convert and update parent
-                const headersArray = convertToHeadersArray(newValue);
-                onChange(headersArray);
-            }
-            // If not valid, don't call onChange - let user continue typing
-        }
-    };
-
-    const handleFocus = () => {
-        isUserEditingRef.current = true;
-    };
-
-    const handleBlur = () => {
-        // Small delay to allow any final change events to process
-        setTimeout(() => {
-            isUserEditingRef.current = false;
-        }, 100);
     };
 
     return (
         <Textarea
-            ref={textareaRef}
             value={internalValue}
             onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
             placeholder={placeholder}
             rows={rows}
             className={className}

src/components/IdpCreateWizard.tsx

@@ -84,7 +84,7 @@ export function IdpCreateWizard({ onSubmit, defaultValues, loading = false }: Id
         }
     ];
 
-    const form = useForm({
+    const form = useForm<CreateIdpFormValues>({
         resolver: zodResolver(createIdpFormSchema),
         defaultValues: {
             name: "",

src/components/LoginForm.tsx

@@ -80,7 +80,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
         code: z.string().length(6, { message: t("pincodeInvalid") })
     });
 
-    const form = useForm({
+    const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             email: "",
@@ -88,7 +88,7 @@ export default function LoginForm({ redirect, onLogin, idps }: LoginFormProps) {
         }
     });
 
-    const mfaForm = useForm({
+    const mfaForm = useForm<z.infer<typeof mfaSchema>>({
         resolver: zodResolver(mfaSchema),
         defaultValues: {
             code: ""

src/components/PolicyTable.tsx

@@ -6,7 +6,7 @@ import {
     ArrowUpDown,
     MoreHorizontal,
 } from "lucide-react";
-import { PolicyDataTable } from "@app/components/PolicyDataTable";
+import { PolicyDataTable } from "./PolicyDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,

src/components/ResetPasswordForm.tsx

@@ -102,7 +102,7 @@ export default function ResetPasswordForm({
         code: z.string().length(6, { message: t('pincodeInvalid') })
     });
 
-    const form = useForm({
+    const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             email: emailParam || "",
@@ -112,14 +112,14 @@ export default function ResetPasswordForm({
         }
     });
 
-    const mfaForm = useForm({
+    const mfaForm = useForm<z.infer<typeof mfaSchema>>({
         resolver: zodResolver(mfaSchema),
         defaultValues: {
             code: ""
         }
     });
 
-    const requestForm = useForm({
+    const requestForm = useForm<z.infer<typeof requestSchema>>({
         resolver: zodResolver(requestSchema),
         defaultValues: {
             email: emailParam || ""

src/components/ResourceAuthPortal.tsx

@@ -132,28 +132,28 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
 
     const [activeTab, setActiveTab] = useState(getDefaultSelectedMethod());
 
-    const pinForm = useForm({
+    const pinForm = useForm<z.infer<typeof pinSchema>>({
         resolver: zodResolver(pinSchema),
         defaultValues: {
             pin: ""
         }
     });
 
-    const passwordForm = useForm({
+    const passwordForm = useForm<z.infer<typeof passwordSchema>>({
         resolver: zodResolver(passwordSchema),
         defaultValues: {
             password: ""
         }
     });
 
-    const requestOtpForm = useForm({
+    const requestOtpForm = useForm<z.infer<typeof requestOtpSchema>>({
         resolver: zodResolver(requestOtpSchema),
         defaultValues: {
             email: ""
         }
     });
 
-    const submitOtpForm = useForm({
+    const submitOtpForm = useForm<z.infer<typeof submitOtpSchema>>({
         resolver: zodResolver(submitOtpSchema),
         defaultValues: {
             email: "",

src/components/SecurityKeyForm.tsx

@@ -119,7 +119,7 @@ export default function SecurityKeyForm({
         code: z.string().optional()
     });
 
-    const registerForm = useForm({
+    const registerForm = useForm<RegisterFormValues>({
         resolver: zodResolver(registerSchema),
         defaultValues: {
             name: "",
@@ -128,7 +128,7 @@ export default function SecurityKeyForm({
         }
     });
 
-    const deleteForm = useForm({
+    const deleteForm = useForm<DeleteFormValues>({
         resolver: zodResolver(deleteSchema),
         defaultValues: {
             password: "",

src/components/SetResourcePasswordForm.tsx

@@ -39,6 +39,10 @@ const setPasswordFormSchema = z.object({
 
 type SetPasswordFormValues = z.infer<typeof setPasswordFormSchema>;
 
+const defaultValues: Partial<SetPasswordFormValues> = {
+    password: ""
+};
+
 type SetPasswordFormProps = {
     open: boolean;
     setOpen: (open: boolean) => void;
@@ -57,11 +61,9 @@ export default function SetResourcePasswordForm({
 
     const [loading, setLoading] = useState(false);
 
-    const form = useForm({
+    const form = useForm<SetPasswordFormValues>({
         resolver: zodResolver(setPasswordFormSchema),
-        defaultValues: {
+        defaultValues
-            password: ""
-        }
     });
 
     useEffect(() => {

src/components/SetResourcePincodeForm.tsx

@@ -44,6 +44,10 @@ const setPincodeFormSchema = z.object({
 
 type SetPincodeFormValues = z.infer<typeof setPincodeFormSchema>;
 
+const defaultValues: Partial<SetPincodeFormValues> = {
+    pincode: ""
+};
+
 type SetPincodeFormProps = {
     open: boolean;
     setOpen: (open: boolean) => void;
@@ -61,11 +65,9 @@ export default function SetResourcePincodeForm({
 
     const api = createApiClient(useEnvContext());
 
-    const form = useForm({
+    const form = useForm<SetPincodeFormValues>({
         resolver: zodResolver(setPincodeFormSchema),
-        defaultValues: {
+        defaultValues
-            pincode: ""
-        }
     });
 
     const t = useTranslations();

src/components/SignupForm.tsx

@@ -117,7 +117,7 @@ export default function SignupForm({
     const [passwordValue, setPasswordValue] = useState("");
     const [confirmPasswordValue, setConfirmPasswordValue] = useState("");
 
-    const form = useForm({
+    const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             email: emailParam || "",

src/components/TwoFactorSetupForm.tsx

@@ -91,14 +91,14 @@ const TwoFactorSetupForm = forwardRef<
             code: z.string().length(6, { message: t("pincodeInvalid") })
         });
 
-        const enableForm = useForm({
+        const enableForm = useForm<z.infer<typeof enableSchema>>({
             resolver: zodResolver(enableSchema),
             defaultValues: {
                 password: initialPassword || ""
             }
         });
 
-        const confirmForm = useForm({
+        const confirmForm = useForm<z.infer<typeof confirmSchema>>({
             resolver: zodResolver(confirmSchema),
             defaultValues: {
                 code: ""

src/components/VerifyEmailForm.tsx

@@ -80,7 +80,7 @@ export default function VerifyEmailForm({
         })
     });
 
-    const form = useForm({
+    const form = useForm<z.infer<typeof FormSchema>>({
         resolver: zodResolver(FormSchema),
         defaultValues: {
             email: email,