Making progress.

src/components/default/auth/buttons/SignInSignUp.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+import { Button, type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInSignUpProps = {
+  className?: ComponentProps<'div'>['className'];
+  signInSize?: VariantProps<typeof buttonVariants>['size'];
+  signUpSize?: VariantProps<typeof buttonVariants>['size'];
+  signInVariant?: VariantProps<typeof buttonVariants>['variant'];
+  signUpVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInSignUp = ({
+  className = 'flex gap-2',
+  signInSize = 'default',
+  signUpSize = 'sm',
+  signInVariant = 'outline',
+  signUpVariant = 'default',
+}: SignInSignUpProps) => {
+  return (
+    <div className={className}>
+      <Button asChild size={signInSize} variant={signInVariant}>
+        <Link href='/sign-in'>Sign In</Link>
+      </Button>
+      <Button asChild size={signUpSize} variant={signUpVariant}>
+        <Link href='/sign-up'>Sign Up</Link>
+      </Button>
+    </div>
+  );
+};

src/components/default/auth/buttons/SignInWithApple.tsx

@@ -0,0 +1,77 @@
+'use client';
+import { signInWithApple } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useAuth } from '@/components/context';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import Image from 'next/image';
+import { type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInWithAppleProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithApple = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithAppleProps) => {
+  const router = useRouter();
+  const { isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+  const [isSigningIn, setIsSigningIn] = useState(false);
+
+  const handleSignInWithApple = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setStatusMessage('');
+      setIsSigningIn(true);
+
+      const result = await signInWithApple();
+
+      if (result?.success && result.data) {
+        // Redirect to Apple OAuth page
+        window.location.href = result.data;
+      } else {
+        setStatusMessage(`Error signing in with Apple!`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    } finally {
+      setIsSigningIn(false);
+      await refreshUserData();
+      router.push('');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSignInWithApple} className={className}>
+      <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
+        className='w-full cursor-pointer'
+        disabled={isLoading || isSigningIn}
+        pendingText='Redirecting...'
+        type='submit'
+      >
+        <div className='flex items-center gap-2'>
+          <Image
+            src='/icons/apple.svg'
+            alt='Apple logo'
+            className='invert-75 dark:invert-25'
+            width={22}
+            height={22}
+          />
+          <p className='text-[1.0rem]'>Sign In with Apple</p>
+        </div>
+      </SubmitButton>
+      {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
+    </form>
+  );
+};

src/components/default/auth/buttons/SignInWithMicrosoft.tsx

@@ -0,0 +1,70 @@
+'use client';
+import { signInWithMicrosoft } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useAuth } from '@/components/context';
+import { useState } from 'react';
+import Image from 'next/image';
+import { type buttonVariants } from '@/components/ui';
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+
+type SignInWithMicrosoftProps = {
+  className?: ComponentProps<'div'>['className'];
+  buttonSize?: VariantProps<typeof buttonVariants>['size'];
+  buttonVariant?: VariantProps<typeof buttonVariants>['variant'];
+};
+
+export const SignInWithMicrosoft = ({
+  className = 'my-4',
+  buttonSize = 'default',
+  buttonVariant = 'default',
+}: SignInWithMicrosoftProps) => {
+  const { isLoading } = 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: Could not sign in with Microsoft!`);
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    }
+  };
+
+  return (
+    <form onSubmit={handleSignInWithMicrosoft} className={className}>
+      <SubmitButton
+        size={buttonSize}
+        variant={buttonVariant}
+        className='w-full cursor-pointer'
+        disabled={isLoading || isSigningIn}
+        pendingText='Redirecting...'
+        type='submit'
+      >
+        <div className='flex items-center gap-2'>
+          <Image
+            src='/icons/microsoft.svg'
+            alt='Microsoft logo'
+            width={20}
+            height={20}
+          />
+          <p className='text-[1.0rem]'>Sign In with Microsoft</p>
+        </div>
+      </SubmitButton>
+      {statusMessage && <StatusMessage message={{ error: statusMessage }} />}
+    </form>
+  );
+};