feat(vercel): Vercel side initialized installation

Preserve full search params when redirecting unauthenticated users to
login so Vercel callback params (code, configurationId, etc.) are not
lost.

Add handling for Vercel callbacks that arrive without a state
parameter (common for Vercel-side installations). When state is
absent but configurationId is present:
- Query the user's organizations and projects.
- If the user has no organizations, redirect to basic details
  onboarding with the Vercel params preserved.
- If the user has organizations but no projects, redirect to the new
  project creation page for the first org with the Vercel params.
- If the user has orgs and projects, exchange the code for a token,
  fetch the Vercel integration configuration, find the default project
  and environment, and continue the installation flow (including
  generating a state JWT).

Add imports for new path helpers and OAuth state generator,
and wire in logic to build redirect URLs with next param when present.

Improve error handling and user-facing error redirects for token and
configuration fetch failures.

Author: 0ski

apps/webapp/app/models/vercelIntegration.server.ts

@@ -116,6 +116,70 @@ export class VercelIntegrationRepository {
     return secret.teamId ?? null;
   }
 
+  /**
+   * Get Vercel integration configuration by configurationId
+   * This is used when Vercel redirects to our callback without a state parameter
+   */
+  static async getVercelIntegrationConfiguration(
+    accessToken: string,
+    configurationId: string,
+    teamId?: string | null
+  ): Promise<{
+    id: string;
+    teamId: string | null;
+    projects: string[];
+  } | null> {
+    try {
+      const client = new Vercel({
+        bearerToken: accessToken,
+      });
+
+      // Use the Vercel SDK to get the integration configuration
+      // The SDK might have a method for this, or we need to make a direct API call
+      const response = await fetch(
+        `https://api.vercel.com/v1/integrations/configuration/${configurationId}${teamId ? `?teamId=${teamId}` : ""}`,
+        {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        logger.error("Failed to fetch Vercel integration configuration", {
+          status: response.status,
+          error: errorText,
+          configurationId,
+          teamId,
+        });
+        return null;
+      }
+
+      const data = (await response.json()) as {
+        id: string;
+        teamId?: string | null;
+        projects?: string[];
+        [key: string]: any;
+      };
+
+      return {
+        id: data.id,
+        teamId: data.teamId ?? null,
+        projects: data.projects || [],
+      };
+    } catch (error) {
+      logger.error("Error fetching Vercel integration configuration", {
+        configurationId,
+        teamId,
+        error,
+      });
+      return null;
+    }
+  }
+
   /**
    * Fetch custom environments for a Vercel project.
    * Excludes standard environments (production, preview, development).

apps/webapp/app/presenters/v3/BranchesPresenter.server.ts

@@ -42,7 +42,7 @@ export type GitMetaLinks = {
   /** The git provider, e.g., `github` */
   provider?: string;
 
-  source?: "trigger_github_app" | "github_actions" | "local";
+  source?: "trigger_github_app" | "github_actions" | "local" | "trigger_vercel_app";
   ghUsername?: string;
   ghUserAvatarUrl?: string;
 };

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx

@@ -310,6 +310,7 @@ export default function Page() {
 
   // Vercel onboarding modal state
   const hasQueryParam = searchParams.get("vercelOnboarding") === "true";
+  const nextUrl = searchParams.get("next");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const vercelFetcher = useTypedFetcher<any>();
 
@@ -621,6 +622,7 @@ export default function Page() {
           environmentSlug={environment.slug}
           hasStagingEnvironment={vercelFetcher.data?.hasStagingEnvironment ?? false}
           hasOrgIntegration={vercelFetcher.data?.hasOrgIntegration ?? false}
+          nextUrl={nextUrl ?? undefined}
           onDataReload={() => {
             vercelFetcher.load(
               `${vercelResourcePath(organization.slug, project.slug, environment.slug)}?vercelOnboarding=true`

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.integrations.vercel.tsx

@@ -32,6 +32,18 @@ import { TrashIcon } from "@heroicons/react/20/solid";
 import { vercelResourcePath } from "~/utils/pathBuilder";
 import { LinkButton } from "~/components/primitives/Buttons";
 
+function formatDate(date: Date): string {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
+  }).format(date);
+}
+
 const SearchParamsSchema = z.object({
   configurationId: z.string().optional(),
 });
@@ -261,7 +273,7 @@ export default function VercelIntegrationPage() {
                 )}
                 <div>
                   <span className="font-medium">Installed:</span>{" "}
-                  {new Date(vercelIntegration.createdAt).toLocaleDateString()}
+                  {formatDate(new Date(vercelIntegration.createdAt))}
                 </div>
               </div>
             </div>
@@ -347,7 +359,7 @@ export default function VercelIntegrationPage() {
                       {projectIntegration.externalEntityId}
                     </TableCell>
                     <TableCell>
-                      {new Date(projectIntegration.createdAt).toLocaleDateString()}
+                      {formatDate(new Date(projectIntegration.createdAt))}
                     </TableCell>
                     <TableCell>
                       <LinkButton

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

@@ -103,6 +103,12 @@ export const action: ActionFunction = async ({ request, params }) => {
     return json(submission);
   }
 
+  // Check for Vercel integration params in URL
+  const url = new URL(request.url);
+  const code = url.searchParams.get("code");
+  const configurationId = url.searchParams.get("configurationId");
+  const next = url.searchParams.get("next");
+
   try {
     const project = await createProject({
       organizationSlug: organizationSlug,
@@ -111,6 +117,19 @@ export const action: ActionFunction = async ({ request, params }) => {
       version: submission.value.projectVersion,
     });
 
+    // If this is a Vercel integration flow, redirect back to callback
+    if (code && configurationId) {
+      const params = new URLSearchParams({
+        code,
+        configurationId,
+      });
+      if (next) {
+        params.set("next", next);
+      }
+      const callbackUrl = `/callback/vercel?${params.toString()}`;
+      return redirect(callbackUrl);
+    }
+
     return redirectWithSuccessMessage(
       v3ProjectPath(project.organization, project),
       request,

apps/webapp/app/routes/_app.orgs.new/route.tsx

@@ -69,6 +69,27 @@ export const action: ActionFunction = async ({ request }) => {
       });
     }
 
+    // Preserve Vercel integration params if present
+    const url = new URL(request.url);
+    const code = url.searchParams.get("code");
+    const configurationId = url.searchParams.get("configurationId");
+    const integration = url.searchParams.get("integration");
+    const next = url.searchParams.get("next");
+
+    if (code && configurationId && integration === "vercel") {
+      // Redirect to projects/new with params preserved
+      const params = new URLSearchParams({
+        code,
+        configurationId,
+        integration,
+      });
+      if (next) {
+        params.set("next", next);
+      }
+      const redirectUrl = `${organizationPath(organization)}/projects/new?${params.toString()}`;
+      return redirect(redirectUrl);
+    }
+
     return redirect(organizationPath(organization));
   } catch (error: any) {
     return json({ errors: { body: error.message } }, { status: 400 });