Microsoft Login is mostly working now

src/components/default/auth/SignInWithMicrosoft.tsx

@@ -0,0 +1,59 @@
+// src/components/default/auth/SignInWithMicrosoft.tsx
+'use client';
+import { signInWithMicrosoft } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useAuth } from '@/components/context/auth';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import Image from 'next/image';
+
+export const SignInWithMicrosoft = () => {
+  const router = useRouter();
+  const { isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+  const [isSigningIn, setIsSigningIn] = useState(false);
+
+  const handleSignInWithMicrosoft = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setStatusMessage('');
+      setIsSigningIn(true);
+      
+      const result = await signInWithMicrosoft();
+      
+      if (result?.success && result.data) {
+        // Redirect to Microsoft OAuth page
+        window.location.href = result.data;
+      } else {
+        setStatusMessage(`Error: ${result.error}`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
+      );
+    } finally {
+      setIsSigningIn(false);
+      await refreshUserData();
+      router.push('');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSignInWithMicrosoft}>
+      <SubmitButton
+        className='w-full cursor-pointer'
+        disabled={isLoading || isSigningIn}
+        pendingText='Redirecting...'
+        type="submit"
+      >
+        <div className='flex items-center gap-2'>
+          <Image src='/icons/microsoft.png' alt='Microsoft logo' width={20} height={20} />
+          <p>Sign in with Microsoft</p>
+        </div>
+      </SubmitButton>
+      {statusMessage && (
+        <StatusMessage message={{ error: statusMessage }} />
+      )}
+    </form>
+  );
+};