Continue with Microsoft on the sign-in page

web/app/login/login.module.css

@@ -140,7 +140,7 @@
   background: rgba(240, 114, 127, 0.12);
 }
 
-.google {
+.provider {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -162,21 +162,24 @@
     transform 160ms ease;
 }
 @media (hover: hover) and (pointer: fine) {
-  .google:hover {
+  .provider:hover {
     background: #eef4f9;
     box-shadow:
       0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
       0 12px 28px -12px rgba(0, 0, 0, 0.45);
   }
 }
-.google:active {
+.provider + .provider {
+  margin-top: 12px;
+}
+.provider:active {
   transform: scale(0.99);
 }
-.google:focus-visible {
+.provider:focus-visible {
   outline: 2px solid var(--primary);
   outline-offset: 3px;
 }
-.google[aria-busy] {
+.provider[aria-busy] {
   cursor: progress;
   color: #4b5563;
 }
@@ -275,7 +278,7 @@
 }
 @media (prefers-reduced-motion: reduce) {
   .field,
-  .google {
+  .provider {
     transition: none;
   }
   .form {

web/app/login/microsoft-icon.tsx

@@ -0,0 +1,10 @@
+export function MicrosoftIcon() {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 24 24" className="h-5 w-5">
+      <path d="M2 2h9.5v9.5H2z" fill="#F25022" />
+      <path d="M12.5 2H22v9.5h-9.5z" fill="#7FBA00" />
+      <path d="M2 12.5h9.5V22H2z" fill="#00A4EF" />
+      <path d="M12.5 12.5H22V22h-9.5z" fill="#FFB900" />
+    </svg>
+  );
+}

web/app/login/page.tsx

@@ -8,8 +8,8 @@ import {
 } from '../../components/AgentToolLogos';
 import { Cursor, Grok, MuseColor } from '../../components/brand-icons';
 import { LogoIcon, LogoWordmark } from '../../components/SiteNav';
-import { authErrorMessage, googleSignInHref } from '../../lib/login';
-import { GoogleSignInButton } from './google-sign-in-button';
+import { authErrorMessage, signInHref } from '../../lib/login';
+import { ProviderSignInButton } from './provider-sign-in-button';
 import { RelayField } from './relay-field';
 import s from './login.module.css';
 
@@ -76,9 +76,13 @@ export default async function LoginPage({ searchParams }: LoginProps) {
             </p>
           )}
 
-          <GoogleSignInButton
-            href={googleSignInHref({ next: first(params.next), invite })}
-          />
+          {(['google', 'microsoft'] as const).map((provider) => (
+            <ProviderSignInButton
+              key={provider}
+              provider={provider}
+              href={signInHref(provider, { next: first(params.next), invite })}
+            />
+          ))}
 
           <div className={s.worksWith}>
             <p>Works with all your agents</p>

web/app/login/google-sign-in-button.tsx → web/app/login/provider-sign-in-button.tsx

@@ -2,7 +2,9 @@
 
 import { useEffect, useState } from 'react';
 import { LoaderCircle } from 'lucide-react';
+import type { SignInProvider } from '../../lib/login';
 import { GoogleIcon } from './google-icon';
+import { MicrosoftIcon } from './microsoft-icon';
 import { RELAY_RUSH_EVENT } from './relay-events';
 import s from './login.module.css';
 
@@ -15,7 +17,19 @@ import s from './login.module.css';
  */
 const HANDOFF_MS = 8000;
 
-export function GoogleSignInButton({ href }: { href: string }) {
+const PROVIDERS = {
+  google: { label: 'Google', Icon: GoogleIcon },
+  microsoft: { label: 'Microsoft', Icon: MicrosoftIcon },
+} as const;
+
+export function ProviderSignInButton({
+  provider,
+  href,
+}: {
+  provider: SignInProvider;
+  href: string;
+}) {
+  const { label, Icon } = PROVIDERS[provider];
   const [pending, setPending] = useState(false);
 
   useEffect(() => {
@@ -37,7 +51,7 @@ export function GoogleSignInButton({ href }: { href: string }) {
   return (
     <a
       href={href}
-      className={s.google}
+      className={s.provider}
       aria-busy={pending || undefined}
       onClick={(event) => {
         if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) {
@@ -50,8 +64,8 @@ export function GoogleSignInButton({ href }: { href: string }) {
         setPending(true);
       }}
     >
-      {pending ? <LoaderCircle className={s.spin} aria-hidden="true" /> : <GoogleIcon />}
-      {pending ? 'Redirecting to Google…' : 'Continue with Google'}
+      {pending ? <LoaderCircle className={s.spin} aria-hidden="true" /> : <Icon />}
+      {pending ? `Redirecting to ${label}…` : `Continue with ${label}`}
     </a>
   );
 }

web/lib/login.ts

@@ -1,32 +1,38 @@
 import { teamsCloudUrl } from './teams-cloud';
 
-/** Messages for the `authError` codes Cloud's Google callback redirects with. */
+/** Messages for the `authError` codes Cloud's provider callbacks redirect with. */
 const AUTH_ERROR_MESSAGES: Readonly<Record<string, string>> = {
   state: 'Your sign-in session expired. Please try again.',
   google: 'We couldn’t complete Google sign-in. Please try again.',
+  microsoft: 'We couldn’t complete Microsoft sign-in. Please try again.',
   schema: 'Sign-in is temporarily unavailable. Please try again shortly.',
   unverified_email:
-    'Google did not provide a verified email address. Use a Google account with a verified email and try again.',
+    'Your account did not provide a verified email address. Use an account with a verified email and try again.',
 };
 
 export function authErrorMessage(code: string | undefined): string | null {
   return code && Object.hasOwn(AUTH_ERROR_MESSAGES, code) ? AUTH_ERROR_MESSAGES[code] : null;
 }
 
+export type SignInProvider = 'google' | 'microsoft';
+
 /**
- * Cloud's Google start route owns validation: it normalizes `next` to a local
+ * Cloud's provider start route owns validation: it normalizes `next` to a local
  * Cloud path and the invite token to its canonical form, so both pass through.
  */
-export function googleSignInHref({
-  next,
-  invite,
-}: {
-  next?: string;
-  invite?: string;
-}): string {
+export function signInHref(
+  provider: SignInProvider,
+  {
+    next,
+    invite,
+  }: {
+    next?: string;
+    invite?: string;
+  },
+): string {
   const params = new URLSearchParams();
   if (next) params.set('next', next);
   if (invite) params.set('invite_token', invite);
   const query = params.toString();
-  return teamsCloudUrl(`/api/auth/google/start${query ? `?${query}` : ''}`);
+  return teamsCloudUrl(`/api/auth/${provider}/start${query ? `?${query}` : ''}`);
 }

web/lib/test/login.test.tsx

@@ -1,28 +1,35 @@
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it } from 'vitest';
 import LoginPage from '../../app/login/page';
-import { authErrorMessage, googleSignInHref } from '../login';
+import { authErrorMessage, signInHref } from '../login';
 
 const render = async (params: Record<string, string>) =>
   renderToStaticMarkup(await LoginPage({ searchParams: Promise.resolve(params) }));
 
 describe('login page', () => {
-  it('signs in through Cloud’s Google route, carrying the destination', async () => {
+  it('signs in through Cloud’s Google and Microsoft routes, carrying the destination', async () => {
     const html = await render({ next: '/dashboard/workflows' });
     expect(html).toContain('Sign in to Agent Relay');
     expect(html).toContain('href="/cloud/api/auth/google/start?next=%2Fdashboard%2Fworkflows"');
+    expect(html).toContain('href="/cloud/api/auth/microsoft/start?next=%2Fdashboard%2Fworkflows"');
+    expect(html).toContain('Continue with Google');
+    expect(html).toContain('Continue with Microsoft');
   });
 
-  it('acknowledges an invite and forwards its token', async () => {
+  it('acknowledges an invite and forwards its token to every provider', async () => {
     const html = await render({ invite: ' abc123 ' });
     expect(html).toContain('You’ve been invited to a workspace');
-    expect(html).toContain('invite_token=abc123');
+    expect(html).toContain('/cloud/api/auth/google/start?invite_token=abc123');
+    expect(html).toContain('/cloud/api/auth/microsoft/start?invite_token=abc123');
   });
 
   it('announces known OAuth errors and ignores unknown codes', async () => {
     expect(await render({ authError: 'state' })).toMatch(
       /role="alert"[^>]*>Your sign-in session expired/,
     );
+    expect(await render({ authError: 'microsoft' })).toMatch(
+      /role="alert"[^>]*>We couldn’t complete Microsoft sign-in/,
+    );
     expect(await render({ authError: '<script>' })).not.toContain('role="alert"');
   });
 
@@ -42,9 +49,10 @@ describe('login page', () => {
   });
 });
 
-describe('googleSignInHref', () => {
+describe('signInHref', () => {
   it('omits empty params', () => {
-    expect(googleSignInHref({})).toBe('/cloud/api/auth/google/start');
+    expect(signInHref('google', {})).toBe('/cloud/api/auth/google/start');
+    expect(signInHref('microsoft', {})).toBe('/cloud/api/auth/microsoft/start');
   });
 });