dashboard: support linking identities when vercel is the primary identity (#37945)

GitOrigin-RevId: 4536ff0f6133fe52b60f01399b0d34dd4fd52dc4

Author: atrakh

npm-packages/dashboard/.env.development

@@ -8,4 +8,5 @@ NEXT_PUBLIC_VHS_LOGIN_PAGE=true
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_51LB1oCGmzIbonMxd1rIlziq9mgp1oB7PZr0dBClbi4gCtilM4vpgq7qfvze0RXHbHEnII7bIIixYpSYcY0C8ZDxa00GfjVTDRi
 NEXT_PUBLIC_POSTHOG_KEY=phc_JDNTRxeh2li2sQTRO0IcOYMJcp8fPs5nTK9TU751nQK
 # This is the Analytics Proxy (AP) for PostHog.
-NEXT_PUBLIC_POSTHOG_HOST=https://ap.convex.dev
+NEXT_PUBLIC_POSTHOG_HOST=https://ap.convex.dev
+NEXT_PUBLIC_VERCEL_INTEGRATION_SLUG=convex-test

npm-packages/dashboard/.env.production

@@ -8,4 +8,5 @@ NEXT_PUBLIC_AUTH0_BASE_URL=$VERCEL_BRANCH_URL
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_live_51LB1oCGmzIbonMxdgup6xlzEWt2iSA42yH5wBPGhqCwDnTgSD3PbH7y1U352IUyxTUP5BL7edcJR6PLx22x1DiAs00c7iyPHtB
 NEXT_PUBLIC_POSTHOG_KEY=phc_JDNTRxeh2li2sQTRO0IcOYMJcp8fPs5nTK9TU751nQK
 # This is the Analytics Proxy (AP) for PostHog.
-NEXT_PUBLIC_POSTHOG_HOST=https://ap.convex.dev
+NEXT_PUBLIC_POSTHOG_HOST=https://ap.convex.dev
+NEXT_PUBLIC_VERCEL_INTEGRATION_SLUG=convex

npm-packages/dashboard/src/components/profile/LinkIdentityForm.tsx

@@ -3,6 +3,7 @@ import { Sheet } from "@ui/Sheet";
 import { Button } from "@ui/Button";
 import GithubLogo from "logos/github-logo.svg";
 import GoogleLogo from "logos/google.svg";
+import VercelLogo from "logos/vercel.svg";
 import { Spinner } from "@ui/Spinner";
 import React from "react";
 import { useRouter } from "next/router";
@@ -130,6 +131,19 @@ export function LinkIdentityForm({
                       Continue with Google
                     </Button>
                   )}
+                  {providerHint === "vercel" && (
+                    <Button
+                      href={`https://vercel.com/sso/integrations/${process.env.NEXT_PUBLIC_VERCEL_INTEGRATION_SLUG}?returnTo=/link_identity?resume=true`}
+                      icon={<VercelLogo className="mr-2 dark:fill-white" />}
+                      size="md"
+                      variant="neutral"
+                      className="w-fit"
+                      loading={status === "waitingForCookie"}
+                      disabled={status === "waitingForCookie"}
+                    >
+                      Continue with Vercel
+                    </Button>
+                  )}
                 </div>
               </UIProvider>
             </>

npm-packages/dashboard/src/pages/vercel_login.tsx

@@ -29,7 +29,9 @@ export default function VercelLogin() {
       // We have a code query parameter, so we store it
       // in session storage (so it's accessible once we're redirected back and redirect to the Auth0 login page.
       setVercelCode(query.code.toString());
-      void replace("/api/auth/login?connection=vercel");
+      void replace(
+        `/api/auth/login?connection=vercel${query.returnTo ? `&returnTo=${query.returnTo}` : ""}`,
+      );
     }
 
     // If both state and resume parameters are present,