I can't believe it but I have sign in with Microsoft working!

apps/next/src/components/layout/auth/buttons/microsoft.tsx

@@ -0,0 +1,41 @@
+import { useAuthActions } from '@convex-dev/auth/react';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type Props = {
+  buttonProps?: Omit<ComponentProps<'button'>, 'onClick'> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    },
+  type?: 'signIn' | 'signUp';
+};
+
+export const MicrosoftSignInButton = ({
+  buttonProps,
+  type = 'signIn',
+}: Props) => {
+  const { signIn } = useAuthActions();
+  return (
+    <Button
+      size='lg'
+      onClick={() => signIn('microsoft-entra-id')}
+      className='text-lg font-semibold mx-auto'
+      {...buttonProps}
+    >
+      <div className='flex flex-row my-auto space-x-2'>
+        <div className='flex flex-row my-auto'>
+          <svg className='scale-150' viewBox='0 0 23 23'>
+            <path fill='#f35325' d='M1 1h10v10H1z'/>
+            <path fill='#81bc06' d='M12 1h10v10H12z'/>
+            <path fill='#05a6f0' d='M1 12h10v10H1z'/>
+            <path fill='#ffba08' d='M12 12h10v10H12z'/>
+          </svg>
+        </div>
+        <p>
+          {type === 'signIn' ? 'Sign In' : 'Sign Up'} with Microsoft
+        </p>
+      </div>
+    </Button>
+  );
+};