Hard paywall

2026-04-28 20:35:53 +02:00
parent 05efbb9910
commit 86631a9bc0
15 changed files with 15251 additions and 14164 deletions
--- a/app/auth/login.tsx
+++ b/app/auth/login.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
  View,
  Text,
@@ -16,17 +16,35 @@ 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 { AuthService } from '../../services/authService';
+import * as AppleAuthentication from 'expo-apple-authentication';
+import { usePostHog } from 'posthog-react-native';

 export default function LoginScreen() {
-  const { isDarkMode, colorPalette, hydrateSession, t } = useApp();
-  const colors = useColors(isDarkMode, colorPalette);
-
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const { isDarkMode, colorPalette, hydrateSession, t } = useApp();
+  const colors = useColors(isDarkMode, colorPalette);
+  const posthog = usePostHog();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = 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 handleLogin = async () => {
    if (!email.trim() || !password) {
@@ -36,9 +54,9 @@ export default function LoginScreen() {
    setLoading(true);
    setError(null);
    try {
-      const session = await AuthService.login(email, password);
-      await hydrateSession(session);
-      router.replace('/(tabs)');
+      const session = await AuthService.login(email, password);
+      await hydrateSession(session);
+      router.replace('/profile/billing');
    } catch (e: any) {
      if (e.message === 'USER_NOT_FOUND') {
        setError(t.errUserNotFound);
@@ -53,8 +71,53 @@ export default function LoginScreen() {
      }
    } finally {
      setLoading(false);
-    }
-  };
+    }
+  };
+
+  const handleAppleSignIn = async () => {
+    setLoading(true);
+    setError(null);
+    posthog.capture('apple_login_started', { surface: 'login' });
+    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);
+      posthog.capture('apple_login_succeeded', { surface: 'login' });
+      router.replace('/profile/billing');
+    } catch (e: any) {
+      if (e?.code === 'ERR_REQUEST_CANCELED') {
+        return;
+      }
+      posthog.capture('apple_login_failed', {
+        surface: 'login',
+        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
@@ -80,10 +143,30 @@ export default function LoginScreen() {
          </Text>
        </View>

-        {/* Card */}
-        <View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.cardBorder, shadowColor: colors.cardShadow }]}>
-          {/* Email */}
-          <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}
+
+          {/* Email */}
+          <View style={styles.fieldGroup}>
            <Text style={[styles.label, { color: colors.textSecondary }]}>E-Mail</Text>
            <View style={[styles.inputRow, { backgroundColor: colors.inputBg, borderColor: colors.inputBorder }]}>
              <Ionicons name="mail-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
@@ -150,8 +233,8 @@ export default function LoginScreen() {
          </TouchableOpacity>
        </View>

-        {/* Divider */}
-        <View style={styles.dividerRow}>
+        {/* Divider */}
+        <View style={styles.dividerRow}>
          <View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
          <Text style={[styles.dividerText, { color: colors.textMuted }]}>{t.orDivider}</Text>
          <View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
@@ -201,7 +284,7 @@ const styles = StyleSheet.create({
    fontSize: 15,
    fontWeight: '400',
  },
-  card: {
+  card: {
    borderRadius: 20,
    borderWidth: 1,
    padding: 24,
@@ -210,7 +293,18 @@ const styles = StyleSheet.create({
    shadowOpacity: 1,
    shadowRadius: 12,
    elevation: 4,
-  },
+  },
+  appleButton: {
+    width: '100%',
+    height: 50,
+    marginBottom: 2,
+  },
+  dividerRowCompact: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    marginVertical: 2,
+  },
  fieldGroup: {
    gap: 6,
  },
--- a/app/auth/signup.tsx
+++ b/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: {