Start adding apple auth

src/app/(auth-pages)/sign-in/page.tsx

@@ -18,13 +18,14 @@ import {
   Input,
 } from '@/components/ui';
 import Link from 'next/link';
-import { signIn, signInWithMicrosoft } from '@/lib/actions';
+import { signIn } from '@/lib/actions';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/components/context/auth';
 import { useEffect, useState } from 'react';
 import { StatusMessage, SubmitButton } from '@/components/default';
 import { Separator } from '@/components/ui';
 import { SignInWithMicrosoft } from '@/components/default/auth/SignInWithMicrosoft';
+import { SignInWithApple } from '@/components/default/auth/SignInWithApple';
 
 const formSchema = z.object({
   email: z.string().email({
@@ -148,6 +149,8 @@ const Login = () => {
         </Form>
         <Separator className='my-4' />
         <SignInWithMicrosoft />
+        <Separator className='my-4' />
+        <SignInWithApple />
       </CardContent>
     </Card>
   );

src/components/default/auth/SignInWithApple.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { signInWithApple } 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 SignInWithApple = () => {
+  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: ${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={handleSignInWithApple}>
+      <SubmitButton
+        className='w-full cursor-pointer'
+        disabled={isLoading || isSigningIn}
+        pendingText='Redirecting...'
+        type="submit"
+      >
+        <div className='flex items-center gap-3'>
+          <Image src='/icons/apple.png' alt='Apple logo' className='text-white' width={20} height={20} />
+          <p>Sign in with Apple</p>
+        </div>
+      </SubmitButton>
+      {statusMessage && (
+        <StatusMessage message={{ error: statusMessage }} />
+      )}
+    </form>
+  );
+};

src/components/default/auth/SignInWithMicrosoft.tsx

@@ -1,4 +1,3 @@
-// src/components/default/auth/SignInWithMicrosoft.tsx
 'use client';
 import { signInWithMicrosoft } from '@/lib/actions';
 import { StatusMessage, SubmitButton } from '@/components/default';

src/lib/actions/auth.ts

@@ -67,7 +67,19 @@ export const signInWithMicrosoft = async (): Promise<Result<string>> => {
   const { data, error } = await supabase.auth.signInWithOAuth({
     provider: 'azure',
     options: {
-      scopes: 'email',
+      scopes: 'openid, profile email offline_access',
+    }
+  });
+  if (error) return { success: false, error: error.message };
+  return { success: true, data: data.url};
+};
+
+export const signInWithApple = async (): Promise<Result<string>> => {
+  const supabase = await createServerClient();
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'apple',
+    options: {
+      scopes: 'openid, profile email offline_access',
     }
   });
   if (error) return { success: false, error: error.message };