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

apps/next/src/app/(auth)/signin/page.tsx

@@ -3,13 +3,11 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import Link from 'next/link';
-import Image from 'next/image';
 import { useAuthActions } from '@convex-dev/auth/react';
 import { useRouter } from 'next/navigation';
 import { ConvexError } from 'convex/values';
 import { useState } from 'react';
 import {
-  Button,
   Card,
   CardContent,
   Form,
@@ -27,6 +25,10 @@ import {
   TabsTrigger,
 } from '@/components/ui';
 import { toast } from 'sonner';
+import {
+  GibsAuthSignInButton,
+  MicrosoftSignInButton
+} from '@/components/layout/auth/buttons';
 import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '@/lib/types';
 
 const signInFormSchema = z.object({
@@ -228,24 +230,7 @@ const SignIn = () => {
                   </div>
                 </div>
                 <div className='flex my-auto justify-center'>
-                  <Button
-                    size='lg'
-                    onClick={() => signIn('authentik')}
-                    className='text-lg font-semibold w-5/6 mx-auto'
-                  >
-                    <div className='flex flex-row space-x-2 my-auto'>
-                      <Image
-                        src={'/icons/misc/gibs-auth-logo.png'}
-                        className=''
-                        alt='Gib&apos;s Auth'
-                        width={30}
-                        height={30}
-                      />
-                      <p className='my-auto'>
-                        Sign In with Gib&apos;s Auth
-                      </p>
-                    </div>
-                  </Button>
+                  <MicrosoftSignInButton />
                 </div>
               </CardContent>
             </Card>
@@ -353,24 +338,7 @@ const SignIn = () => {
                   </div>
                 </div>
                 <div className='flex my-auto justify-center'>
-                  <Button
-                    size='lg'
-                    onClick={() => signIn('authentik')}
-                    className='text-lg font-semibold w-5/6 mx-auto'
-                  >
-                    <div className='flex flex-row space-x-2 my-auto'>
-                      <Image
-                        src={'/icons/misc/gibs-auth-logo.png'}
-                        className=''
-                        alt='Gib&apos;s Auth'
-                        width={30}
-                        height={30}
-                      />
-                      <p className='my-auto'>
-                        Sign Up with Gib&apos;s Auth
-                      </p>
-                    </div>
-                  </Button>
+                  <MicrosoftSignInButton type='signUp' />
                 </div>
               </CardContent>
             </Card>

apps/next/src/components/layout/auth/buttons/gibs-auth.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+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 GibsAuthSignInButton = ({
+  buttonProps,
+  type = 'signIn',
+}: Props) => {
+  const { signIn } = useAuthActions();
+  return (
+    <Button
+      size='lg'
+      onClick={() => signIn('authentik')}
+      className='text-lg font-semibold'
+      {...buttonProps}
+    >
+      <div className='flex flex-row my-auto space-x-1'>
+        <Image
+          src={'/icons/misc/gibs-auth-logo.png'}
+          className=''
+          alt="Gib's Auth"
+          width={30}
+          height={30}
+        />
+        <p>
+          {type === 'signIn' ? 'Sign In' : 'Sign Up'} with Gib&apos;s Auth
+        </p>
+      </div>
+    </Button>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { GibsAuthSignInButton } from './gibs-auth';
+export { MicrosoftSignInButton } from './microsoft';

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>
+  );
+};