From c6af80608eed09e3d4e38dc2f083574d7b616bda Mon Sep 17 00:00:00 2001
From: Arda Erturk <ardaerturk@outlook.com>
Date: Tue, 10 Jun 2025 20:57:19 -0400
Subject: [PATCH] Use AppleAuthenticationButton for Apple login

---
 src/components/auth/AppleNativeAuthScreen.tsx | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/auth/AppleNativeAuthScreen.tsx b/src/components/auth/AppleNativeAuthScreen.tsx
index b979409..c409951 100644
--- a/src/components/auth/AppleNativeAuthScreen.tsx
+++ b/src/components/auth/AppleNativeAuthScreen.tsx
@@ -19,6 +19,8 @@ import * as Haptics from 'expo-haptics';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import AppleContactAuthModal from './AppleContactAuthModal';
 import AppleBottomTray from '../ui/AppleBottomTray';
+import * as AppleAuthentication from 'expo-apple-authentication';
+import { AppleAuthenticationButton } from 'expo-apple-authentication';
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
@@ -31,6 +33,7 @@ export default function AppleNativeAuthScreen({ onAuthSuccess }: AppleNativeAuth
   const [showMoreOptions, setShowMoreOptions] = useState(false);
   const [showEmailModal, setShowEmailModal] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [appleAuthAvailable, setAppleAuthAvailable] = useState(false);
   
   // Animation values
   const fadeAnim = useRef(new Animated.Value(0)).current;
@@ -65,6 +68,10 @@ export default function AppleNativeAuthScreen({ onAuthSuccess }: AppleNativeAuth
     ]).start();
   }, []);
 
+  useEffect(() => {
+    AppleAuthentication.isAvailableAsync().then(setAppleAuthAvailable);
+  }, []);
+
   const PASSKEY_KEY = 'interspace_has_passkey';
 
   const checkPasskey = async () => {
@@ -175,18 +182,15 @@ export default function AppleNativeAuthScreen({ onAuthSuccess }: AppleNativeAuth
         </View>
 
         {/* Sign in with Apple - Secondary Option */}
-        <AppleAuthButton
-          onPress={handleSignInWithApple}
-          variant="tertiary"
-        >
-          <View style={styles.buttonContent}>
-            <Image 
-              source={require('../../../assets/images/apple.png')}
-              style={[styles.appleIcon, { tintColor: Apple.Colors.systemBlue }]}
-            />
-            <Text style={styles.tertiaryButtonText}>Sign in with Apple</Text>
-          </View>
-        </AppleAuthButton>
+        {appleAuthAvailable && (
+          <AppleAuthenticationButton
+            buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
+            buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
+            cornerRadius={Apple.Radius.standard}
+            style={styles.appleSignInButton}
+            onPress={handleSignInWithApple}
+          />
+        )}
 
         {/* More Options */}
         <TouchableOpacity 
@@ -437,6 +441,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: Apple.Spacing.medium,
   },
+  appleSignInButton: {
+    width: '100%',
+    height: 50,
+    marginBottom: Apple.Spacing.medium,
+  },
   appleButton: {
     backgroundColor: Apple.Colors.label,
   },