Hard paywall

app/auth/signup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -16,22 +16,40 @@ import { router } from 'expo-router';
 import { useApp } from '../../context/AppContext';
 import { useColors } from '../../constants/Colors';
 import { ThemeBackdrop } from '../../components/ThemeBackdrop';
-import { AuthService } from '../../services/authService';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { AuthService } from '../../services/authService';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as AppleAuthentication from 'expo-apple-authentication';
+import { usePostHog } from 'posthog-react-native';
 
 export default function SignupScreen() {
-  const { isDarkMode, colorPalette, hydrateSession, getPendingPlant, t } = useApp();
-  const colors = useColors(isDarkMode, colorPalette);
-  const pendingPlant = getPendingPlant();
+  const { isDarkMode, colorPalette, hydrateSession, getPendingPlant, t } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+  const posthog = usePostHog();
+  const pendingPlant = getPendingPlant();
 
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [passwordConfirm, setPasswordConfirm] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [passwordConfirm, setPasswordConfirm] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
+  const [appleAvailable, setAppleAvailable] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    AppleAuthentication.isAvailableAsync()
+      .then((available) => {
+        if (mounted) setAppleAvailable(available);
+      })
+      .catch(() => {
+        if (mounted) setAppleAvailable(false);
+      });
+    return () => {
+      mounted = false;
+    };
+  }, []);
 
   const validate = (): string | null => {
     if (!name.trim()) return t.errNameRequired;
@@ -50,11 +68,11 @@ export default function SignupScreen() {
     setLoading(true);
     setError(null);
     try {
-      const session = await AuthService.signUp(email, name, password);
-      await hydrateSession(session);
-      // Flag setzen: Tour beim nächsten App-Öffnen anzeigen
-      await AsyncStorage.setItem('greenlens_show_tour', 'true');
-      router.replace('/onboarding/source');
+      const session = await AuthService.signUp(email, name, password);
+      await hydrateSession(session);
+      // Flag setzen: Tour beim nächsten App-Öffnen anzeigen
+      await AsyncStorage.setItem('greenlens_show_tour', 'true');
+      router.replace('/profile/billing');
     } catch (e: any) {
       if (e.message === 'EMAIL_TAKEN') {
         setError(t.errEmailTaken);
@@ -71,8 +89,54 @@ export default function SignupScreen() {
       }
     } finally {
       setLoading(false);
-    }
-  };
+    }
+  };
+
+  const handleAppleSignIn = async () => {
+    setLoading(true);
+    setError(null);
+    posthog.capture('apple_login_started', { surface: 'signup' });
+    try {
+      const credential = await AppleAuthentication.signInAsync({
+        requestedScopes: [
+          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
+          AppleAuthentication.AppleAuthenticationScope.EMAIL,
+        ],
+      });
+
+      if (!credential.identityToken) {
+        throw new Error('APPLE_AUTH_INVALID');
+      }
+
+      const fullName = [
+        credential.fullName?.givenName,
+        credential.fullName?.familyName,
+      ].filter(Boolean).join(' ');
+      const session = await AuthService.signInWithApple({
+        identityToken: credential.identityToken,
+        appleUser: credential.user,
+        email: credential.email,
+        name: fullName || undefined,
+      });
+      await hydrateSession(session);
+      await AsyncStorage.setItem('greenlens_show_tour', 'true');
+      posthog.capture('apple_login_succeeded', { surface: 'signup' });
+      router.replace('/profile/billing');
+    } catch (e: any) {
+      if (e?.code === 'ERR_REQUEST_CANCELED') {
+        return;
+      }
+      posthog.capture('apple_login_failed', {
+        surface: 'signup',
+        error: e instanceof Error ? e.message : String(e),
+      });
+      setError(e?.message === 'APPLE_BACKEND_UNAVAILABLE'
+        ? 'Apple Login ist auf dem Backend noch nicht aktiviert. Bitte Backend neu starten oder deployen.'
+        : t.errAuthError);
+    } finally {
+      setLoading(false);
+    }
+  };
 
   return (
     <KeyboardAvoidingView
@@ -114,10 +178,30 @@ export default function SignupScreen() {
           </View>
         )}
 
-        {/* Card */}
-        <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.cardBorder, shadowColor: colors.cardShadow }]}>
-          {/* Name */}
-          <View style={styles.fieldGroup}>
+        {/* Card */}
+        <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.cardBorder, shadowColor: colors.cardShadow }]}>
+          {appleAvailable ? (
+            <AppleAuthentication.AppleAuthenticationButton
+              buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
+              buttonStyle={isDarkMode
+                ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
+                : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
+              cornerRadius={12}
+              style={styles.appleButton}
+              onPress={handleAppleSignIn}
+            />
+          ) : null}
+
+          {appleAvailable ? (
+            <View style={styles.dividerRowCompact}>
+              <View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
+              <Text style={[styles.dividerText, { color: colors.textMuted }]}>{t.orDivider}</Text>
+              <View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
+            </View>
+          ) : null}
+
+          {/* Name */}
+          <View style={styles.fieldGroup}>
             <Text style={[styles.label, { color: colors.textSecondary }]}>Name</Text>
             <View style={[styles.inputRow, { backgroundColor: colors.inputBg, borderColor: colors.inputBorder }]}>
               <Ionicons name="person-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
@@ -317,17 +401,36 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '400',
   },
-  card: {
-    borderRadius: 20,
-    borderWidth: 1,
+  card: {
+    borderRadius: 20,
+    borderWidth: 1,
     padding: 24,
     gap: 14,
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 1,
-    shadowRadius: 12,
-    elevation: 4,
-  },
-  fieldGroup: {
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  appleButton: {
+    width: '100%',
+    height: 50,
+    marginBottom: 2,
+  },
+  dividerRowCompact: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginVertical: 2,
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+  },
+  dividerText: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  fieldGroup: {
     gap: 6,
   },
   label: {