[dev] [tofikwest] tofik/microsoft-signin-auth-in-app-portal (#1916)

github-actions[bot] · tofikwest · web-flow · commit 407ed39a4551 · 2025-12-12T17:39:55.000-05:00
* feat(auth): add Microsoft sign-in integration and update environment variables

* chore: improve error handling for Microsoft sign-in

---------

Co-authored-by: Tofik Hasanov &lt;annexcies@gmail.com&gt;
diff --git a/apps/app/.env.example b/apps/app/.env.example
@@ -52,4 +52,8 @@ NEXT_OUTPUT_STANDALONE=false # For deploying on AWS instead of Vercel
 FLEET_URL="" # If you want to enable MDM, your hosted url
 FLEET_TOKEN="" # If you want to enable MDM
 
-FIRECRAWL_API_KEY="" # To research vendors, Required
+FIRECRAWL_API_KEY="" # To research vendors, Required
+
+# Microsoft sign-in
+AUTH_MICROSOFT_CLIENT_ID=
+AUTH_MICROSOFT_CLIENT_SECRET=
diff --git a/apps/app/src/app/(public)/auth/page.tsx b/apps/app/src/app/(public)/auth/page.tsx
@@ -41,6 +41,7 @@ export default async function Page({
 
   const showGoogle = !!(env.AUTH_GOOGLE_ID && env.AUTH_GOOGLE_SECRET);
   const showGithub = !!(env.AUTH_GITHUB_ID && env.AUTH_GITHUB_SECRET);
+  const showMicrosoft = !!(env.AUTH_MICROSOFT_CLIENT_ID && env.AUTH_MICROSOFT_CLIENT_SECRET);
 
   return (
     <div className="flex min-h-dvh flex-col text-foreground">
@@ -56,7 +57,7 @@ export default async function Page({
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-6 pb-6 px-8">
-            <LoginForm inviteCode={inviteCode} showGoogle={showGoogle} showGithub={showGithub} />
+            <LoginForm inviteCode={inviteCode} showGoogle={showGoogle} showGithub={showGithub} showMicrosoft={showMicrosoft} />
           </CardContent>
           <CardFooter className="pb-10">
             <p className="w-full px-6 text-center text-xs text-muted-foreground">
diff --git a/apps/app/src/components/login-form.tsx b/apps/app/src/components/login-form.tsx
@@ -3,6 +3,7 @@
 import { GithubSignIn } from '@/components/github-sign-in';
 import { GoogleSignIn } from '@/components/google-sign-in';
 import { MagicLinkSignIn } from '@/components/magic-link';
+import { MicrosoftSignIn } from '@/components/microsoft-sign-in';
 import { Button } from '@comp/ui/button';
 import { Card, CardContent, CardDescription, CardTitle } from '@comp/ui/card';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@comp/ui/collapsible';
@@ -14,9 +15,10 @@ interface LoginFormProps {
   inviteCode?: string;
   showGoogle: boolean;
   showGithub: boolean;
+  showMicrosoft: boolean;
 }
 
-export function LoginForm({ inviteCode, showGoogle, showGithub }: LoginFormProps) {
+export function LoginForm({ inviteCode, showGoogle, showGithub, showMicrosoft }: LoginFormProps) {
   const [isOptionsOpen, setIsOptionsOpen] = useState(false);
   const [magicLinkState, setMagicLinkState] = useState({ sent: false, email: '' });
   const searchParams = useSearchParams();
@@ -70,6 +72,15 @@ export function LoginForm({ inviteCode, showGoogle, showGithub }: LoginFormProps
       />,
     );
   }
+  if (showMicrosoft) {
+    moreOptionsList.push(
+      <MicrosoftSignIn
+        key="microsoft"
+        inviteCode={inviteCode}
+        searchParams={searchParams as URLSearchParams}
+      />,
+    );
+  }
   if (showGithub) {
     moreOptionsList.push(
       <GithubSignIn
diff --git a/apps/app/src/components/microsoft-sign-in.tsx b/apps/app/src/components/microsoft-sign-in.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import { authClient } from '@/utils/auth-client';
+import { Button } from '@comp/ui/button';
+import { Icons } from '@comp/ui/icons';
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+export function MicrosoftSignIn({
+  inviteCode,
+  searchParams,
+}: {
+  inviteCode?: string;
+  searchParams?: URLSearchParams;
+}) {
+  const [isLoading, setLoading] = useState(false);
+
+  const handleSignIn = async () => {
+    setLoading(true);
+
+    try {
+      // Build the callback URL with search params
+      const baseURL = window.location.origin;
+      const path = inviteCode ? `/invite/${inviteCode}` : '/';
+      const redirectTo = new URL(path, baseURL);
+
+      // Append all search params if they exist
+      if (searchParams) {
+        searchParams.forEach((value, key) => {
+          redirectTo.searchParams.append(key, value);
+        });
+      }
+
+      await authClient.signIn.social({
+        provider: 'microsoft',
+        callbackURL: redirectTo.toString(),
+      });
+    } catch (error) {
+      setLoading(false);
+
+      console.error('[Microsoft Sign-In] Authentication failed:', {
+        error,
+        message: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: new Date().toISOString(),
+      });
+
+      // Show specific error messages based on error type
+      if (error instanceof Error) {
+        if (error.message.includes('redirect_uri_mismatch')) {
+          toast.error('Configuration error', {
+            description: 'Redirect URI mismatch. Please contact support.',
+          });
+        } else if (error.message.includes('invalid_client')) {
+          toast.error('Invalid credentials', {
+            description: 'Microsoft OAuth credentials are invalid. Please contact support.',
+          });
+        } else if (error.message.includes('account_not_linked')) {
+          toast.error('Account linking failed', {
+            description: 'Unable to link Microsoft account automatically. Please contact support.',
+          });
+          console.warn(
+            '[Microsoft Sign-In] account_not_linked error occurred despite auto-linking being enabled. Check account linking configuration.',
+          );
+        } else if (error.message.includes('network') || error.message.includes('fetch')) {
+          toast.error('Network error', {
+            description: 'Please check your internet connection and try again.',
+          });
+        } else {
+          toast.error('Sign-in failed', {
+            description: error.message || 'An unexpected error occurred. Please try again.',
+          });
+        }
+      } else {
+        toast.error('Failed to sign in with Microsoft', {
+          description: 'An unexpected error occurred. Please try again.',
+        });
+      }
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleSignIn}
+      className="w-full h-11 font-medium"
+      variant="outline"
+      disabled={isLoading}
+    >
+      {isLoading ? (
+        <Loader2 className="h-4 w-4 animate-spin" />
+      ) : (
+        <>
+          <Icons.Microsoft className="h-4 w-4" />
+          Continue with Microsoft
+        </>
+      )}
+    </Button>
+  );
+}
diff --git a/apps/app/src/env.mjs b/apps/app/src/env.mjs
@@ -8,6 +8,8 @@ export const env = createEnv({
     AUTH_GITHUB_ID: z.string().optional(),
     AUTH_GITHUB_SECRET: z.string().optional(),
     AUTH_SECRET: z.string(),
+    AUTH_MICROSOFT_CLIENT_ID: z.string().optional(),
+    AUTH_MICROSOFT_CLIENT_SECRET: z.string().optional(),
     DATABASE_URL: z.string().min(1),
     OPENAI_API_KEY: z.string().optional(),
     GROQ_API_KEY: z.string().optional(),
@@ -63,6 +65,8 @@ export const env = createEnv({
     AUTH_GITHUB_ID: process.env.AUTH_GITHUB_ID,
     AUTH_GITHUB_SECRET: process.env.AUTH_GITHUB_SECRET,
     AUTH_SECRET: process.env.AUTH_SECRET,
+    AUTH_MICROSOFT_CLIENT_ID: process.env.AUTH_MICROSOFT_CLIENT_ID,
+    AUTH_MICROSOFT_CLIENT_SECRET: process.env.AUTH_MICROSOFT_CLIENT_SECRET,
     DATABASE_URL: process.env.DATABASE_URL,
     OPENAI_API_KEY: process.env.OPENAI_API_KEY,
     GROQ_API_KEY: process.env.GROQ_API_KEY,
diff --git a/apps/app/src/utils/auth.ts b/apps/app/src/utils/auth.ts
@@ -39,6 +39,18 @@ if (env.AUTH_GITHUB_ID && env.AUTH_GITHUB_SECRET) {
   };
 }
 
+if (env.AUTH_MICROSOFT_CLIENT_ID && env.AUTH_MICROSOFT_CLIENT_SECRET) {
+  socialProviders = {
+    ...socialProviders,
+    microsoft: {
+      clientId: env.AUTH_MICROSOFT_CLIENT_ID,
+      clientSecret: env.AUTH_MICROSOFT_CLIENT_SECRET,
+      tenantId: 'common', // Allows any Microsoft account
+      prompt: 'select_account', // Forces account selection
+    },
+  };
+}
+
 export const auth = betterAuth({
   database: prismaAdapter(db, {
     provider: 'postgresql',
@@ -204,6 +216,10 @@ export const auth = betterAuth({
   },
   account: {
     modelName: 'Account',
+    accountLinking: {
+      enabled: true,
+      trustedProviders: ['google', 'github', 'microsoft'],
+    },
   },
   verification: {
     modelName: 'Verification',
diff --git a/apps/portal/.env.example b/apps/portal/.env.example
@@ -14,4 +14,8 @@ NEXT_PUBLIC_BETTER_AUTH_URL="" # http://localhost:30001
 APP_AWS_ACCESS_KEY_ID="" # AWS Access Key ID
 APP_AWS_SECRET_ACCESS_KEY="" # AWS Secret Access Key
 APP_AWS_REGION="" # AWS Region
-APP_AWS_BUCKET_NAME="" # AWS Bucket Name
+APP_AWS_BUCKET_NAME="" # AWS Bucket Name
+
+# Microsoft sign-in
+AUTH_MICROSOFT_CLIENT_ID=
+AUTH_MICROSOFT_CLIENT_SECRET=
diff --git a/apps/portal/src/app/(public)/auth/page.tsx b/apps/portal/src/app/(public)/auth/page.tsx
@@ -20,6 +20,7 @@ export default async function Page() {
   );
 
   const showGoogle = !!(env.AUTH_GOOGLE_ID && env.AUTH_GOOGLE_SECRET);
+  const showMicrosoft = !!(env.AUTH_MICROSOFT_CLIENT_ID && env.AUTH_MICROSOFT_CLIENT_SECRET);
 
   return (
     <div className="flex min-h-dvh flex-col text-foreground">
@@ -36,7 +37,7 @@ export default async function Page() {
           </CardHeader>
           <CardContent className="space-y-6 pb-6">
             {defaultSignInOptions}
-            <LoginForm showGoogle={showGoogle} />
+            <LoginForm showGoogle={showGoogle} showMicrosoft={showMicrosoft} />
           </CardContent>
           <CardFooter className="pb-10">
             <div className="from-primary/10 via-primary/5 to-primary/5 rounded-sm bg-gradient-to-r p-4">
diff --git a/apps/portal/src/app/components/login-form.tsx b/apps/portal/src/app/components/login-form.tsx
@@ -1,17 +1,19 @@
 'use client';
 
 import { GoogleSignIn } from './google-sign-in';
+import { MicrosoftSignIn } from './microsoft-sign-in';
 import { useSearchParams } from 'next/navigation';
 
 interface LoginFormProps {
   inviteCode?: string;
   showGoogle: boolean;
+  showMicrosoft: boolean;
 }
 
-export function LoginForm({ inviteCode, showGoogle }: LoginFormProps) {
+export function LoginForm({ inviteCode, showGoogle, showMicrosoft }: LoginFormProps) {
   const searchParams = useSearchParams();
 
-  if (!showGoogle) {
+  if (!showGoogle && !showMicrosoft) {
     return;
   }
 
@@ -26,7 +28,8 @@ export function LoginForm({ inviteCode, showGoogle }: LoginFormProps) {
         </span>
       </div>
       <div className="space-y-4 pt-4">
-        <GoogleSignIn inviteCode={inviteCode} searchParams={searchParams as URLSearchParams} />
+        {showGoogle && <GoogleSignIn inviteCode={inviteCode} searchParams={searchParams as URLSearchParams} />}
+        {showMicrosoft && <MicrosoftSignIn inviteCode={inviteCode} searchParams={searchParams as URLSearchParams} />}
       </div>
     </div>
   );
diff --git a/apps/portal/src/app/components/microsoft-sign-in.tsx b/apps/portal/src/app/components/microsoft-sign-in.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { authClient } from '@/app/lib/auth-client';
+import { Button } from '@comp/ui/button';
+import { Icons } from '@comp/ui/icons';
+import { Loader2 } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+export function MicrosoftSignIn({
+  inviteCode,
+  searchParams,
+}: {
+  inviteCode?: string;
+  searchParams?: URLSearchParams;
+}) {
+  const [isLoading, setLoading] = useState(false);
+
+  const handleSignIn = async () => {
+    setLoading(true);
+
+    try {
+      // Build the callback URL with search params
+      const baseURL = window.location.origin;
+      const path = inviteCode ? `/invite/${inviteCode}` : '/';
+      const redirectTo = new URL(path, baseURL);
+
+      // Append all search params if they exist
+      if (searchParams) {
+        searchParams.forEach((value, key) => {
+          redirectTo.searchParams.append(key, value);
+        });
+      }
+
+      await authClient.signIn.social({
+        provider: 'microsoft',
+        callbackURL: redirectTo.toString(),
+      });
+    } catch (error) {
+      setLoading(false);
+
+      console.error('[Microsoft Sign-In] Authentication failed:', {
+        error,
+        message: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: new Date().toISOString(),
+      });
+
+      // Show specific error messages based on error type
+      if (error instanceof Error) {
+        if (error.message.includes('redirect_uri_mismatch')) {
+          toast.error('Configuration error', {
+            description: 'Redirect URI mismatch. Please contact support.',
+          });
+        } else if (error.message.includes('invalid_client')) {
+          toast.error('Invalid credentials', {
+            description: 'Microsoft OAuth credentials are invalid. Please contact support.',
+          });
+        } else if (error.message.includes('account_not_linked')) {
+          toast.error('Account linking failed', {
+            description: 'Unable to link Microsoft account automatically. Please contact support.',
+          });
+          console.warn(
+            '[Microsoft Sign-In] account_not_linked error occurred despite auto-linking being enabled. Check account linking configuration.',
+          );
+        } else if (error.message.includes('network') || error.message.includes('fetch')) {
+          toast.error('Network error', {
+            description: 'Please check your internet connection and try again.',
+          });
+        } else {
+          toast.error('Sign-in failed', {
+            description: error.message || 'An unexpected error occurred. Please try again.',
+          });
+        }
+      } else {
+        toast.error('Failed to sign in with Microsoft', {
+          description: 'An unexpected error occurred. Please try again.',
+        });
+      }
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleSignIn}
+      className="w-full h-11 font-medium"
+      variant="outline"
+      disabled={isLoading}
+    >
+      {isLoading ? (
+        <Loader2 className="h-4 w-4 animate-spin" />
+      ) : (
+        <>
+          <Icons.Microsoft className="h-4 w-4" />
+          Continue with Microsoft
+        </>
+      )}
+    </Button>
+  );
+}
+
diff --git a/apps/portal/src/app/lib/auth.ts b/apps/portal/src/app/lib/auth.ts
diff --git a/apps/portal/src/env.mjs b/apps/portal/src/env.mjs
diff --git a/packages/ui/src/components/icons.tsx b/packages/ui/src/components/icons.tsx
