Improve the MCP authentication message

Author: ericallam

apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx

@@ -1,24 +1,25 @@
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { title } from "process";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
-import { ErrorIcon } from "~/assets/icons/ErrorIcon";
 import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
-import { LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { Header1 } from "~/components/primitives/Headers";
 import { Icon } from "~/components/primitives/Icon";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { logger } from "~/services/logger.server";
 import { createPersonalAccessTokenFromAuthorizationCode } from "~/services/personalAccessToken.server";
 import { requireUserId } from "~/services/session.server";
-import { rootPath } from "~/utils/pathBuilder";
 
 const ParamsSchema = z.object({
   authorizationCode: z.string(),
 });
 
+const SearchParamsSchema = z.object({
+  source: z.string().optional(),
+  clientName: z.string().optional(),
+});
+
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
 
@@ -32,13 +33,23 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     });
   }
 
+  const url = new URL(request.url);
+  const searchObject = Object.fromEntries(url.searchParams.entries());
+
+  const searchParams = SearchParamsSchema.safeParse(searchObject);
+
+  const source = (searchParams.success ? searchParams.data.source : undefined) ?? "cli";
+  const clientName = (searchParams.success ? searchParams.data.clientName : undefined) ?? "unknown";
+
   try {
     const personalAccessToken = await createPersonalAccessTokenFromAuthorizationCode(
       parsedParams.data.authorizationCode,
       userId
     );
     return typedjson({
       success: true as const,
+      source,
+      clientName,
     });
   } catch (error) {
     if (error instanceof Response) {
@@ -49,6 +60,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       return typedjson({
         success: false as const,
         error: error.message,
+        source,
+        clientName,
       });
     }
 
@@ -73,7 +86,7 @@ export default function Page() {
                 <Icon icon={CheckCircleIcon} className="h-6 w-6 text-emerald-500" /> Successfully
                 authenticated
               </Header1>
-              <Paragraph>Return to your terminal to continue.</Paragraph>
+              <Paragraph>{getInstructionsForSource(result.source, result.clientName)}</Paragraph>
             </div>
           ) : (
             <div>
@@ -91,3 +104,21 @@ export default function Page() {
     </AppContainer>
   );
 }
+
+const prettyClientNames: Record<string, string> = {
+  "claude-code": "Claude Code",
+  "cursor-vscode": "Cursor",
+  "Visual Studio Code": "VSCode",
+  "windsurf-client": "Windsurf",
+  "claude-ai": "Claude Desktop",
+};
+
+function getInstructionsForSource(source: string, clientName: string) {
+  if (source === "mcp") {
+    if (clientName) {
+      return `Return to your ${prettyClientNames[clientName] ?? clientName} to continue.`;
+    }
+  }
+
+  return `Return to your terminal to continue.`;
+}

packages/cli-v3/src/mcp/auth.ts

@@ -92,10 +92,19 @@ export async function mcpAuth(options: McpAuthOptions): Promise<LoginResult> {
   //generate authorization code
   const authorizationCodeResult = await createAuthorizationCode(apiClient);
 
+  const url = new URL(authorizationCodeResult.url);
+
+  url.searchParams.set("source", "mcp");
+
+  const clientName = options.server.server.getClientVersion()?.name;
+
+  if (clientName) {
+    url.searchParams.set("clientName", clientName);
+  }
   // Only elicitInput if the client has the elicitation capability
 
   // Elicit the user to visit the authorization code URL
-  const allowLogin = await askForLoginPermission(opts.server, authorizationCodeResult.url);
+  const allowLogin = await askForLoginPermission(opts.server, url.toString());
 
   if (!allowLogin) {
     return {
@@ -105,7 +114,7 @@ export async function mcpAuth(options: McpAuthOptions): Promise<LoginResult> {
   }
 
   // Open the authorization code URL in the browser
-  await open(authorizationCodeResult.url);
+  await open(url.toString());
 
   // Poll for the personal access token
   const indexResult = await pRetry(