Add prefill with query params

apps/web/pages/signup.tsx

@@ -415,6 +415,14 @@ export default function Signup({ prepopulateFormValues, token, orgSlug }: Signup
   );
 }
 
+const querySchema = z.object({
+  username: z
+    .string()
+    .optional()
+    .transform((val) => val || ""),
+  email: z.string().email().optional(),
+});
+
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const prisma = await import("@calcom/prisma").then((mod) => mod.default);
   const flags = await getFeatureFlagMap(prisma);
@@ -428,6 +436,9 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     prepopulateFormValues: undefined,
   };
 
+  // username + email prepopulated from query params
+  const { username: preFillusername, email: prefilEmail } = querySchema.parse(ctx.query);
+
   if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true" || flags["disable-signup"]) {
     return {
       notFound: true,
@@ -437,7 +448,13 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   // no token given, treat as a normal signup without verification token
   if (!token) {
     return {
-      props: JSON.parse(JSON.stringify(props)),
+      props: {
+        ...props,
+        prepopulateFormValues: {
+          username: preFillusername || null,
+          email: prefilEmail || null,
+        },
+      },
     };
   }
 

apps/web/playwright/signup.e2e.ts

@@ -145,6 +145,17 @@ test.describe("Signup Flow Test", async () => {
     // Check that the URL matches the expected URL
     expect(page.url()).toContain("/auth/verify-email");
   });
+  test("Signup fields prefilled with query params", async ({ page, users }) => {
+    const signupUrlWithParams = "/signup?username=rick-jones&email=rick-jones%40example.com";
+    await page.goto(signupUrlWithParams);
+
+    // Fill form
+    const usernameInput = await page.locator('input[name="username"]');
+    const emailInput = await page.locator('input[name="email"]');
+
+    expect(await usernameInput.inputValue()).toBe("rick-jones");
+    expect(await emailInput.inputValue()).toBe("rick-jones@example.com");
+  });
   test("Signup with token prefils correct fields", async ({ page, users, prisma }) => {
     //Create a user and create a token
     const token = randomBytes(32).toString("hex");