Sichere React-Native-Wearable-App mit Supabase und RLS

npx create-expo-app wearable-data-sync
cd wearable-data-sync

npm install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill

-- 1. Create the health_data table
CREATE TABLE public.health_data (
  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW() NOT NULL,
  heart_rate INT,
  steps INT
);

-- 2. Enable Row Level Security (RLS) on the table
ALTER TABLE public.health_data ENABLE ROW LEVEL SECURITY;

// lib/supabase.js
import 'react-native-url-polyfill/auto';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

// src/components/Auth.js
import React, { useState } from 'react';
import { Alert, StyleSheet, View, TextInput, Button, Text } from 'react-native';
import { supabase } from '../../lib/supabase';

export default function Auth() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  async function signInWithEmail() {
    setLoading(true);
    const { error } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });
    if (error) Alert.alert(error.message);
    setLoading(false);
  }

  async function signUpWithEmail() {
    setLoading(true);
    const { error } = await supabase.auth.signUp({
      email: email,
      password: password,
    });
    if (error) Alert.alert(error.message);
    setLoading(false);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Health Sync</Text>
      <TextInput
        style={styles.input}
        onChangeText={(text) => setEmail(text)}
        value={email}
        placeholder="[email protected]"
        autoCapitalize={'none'}
      />
      <TextInput
        style={styles.input}
        onChangeText={(text) => setPassword(text)}
        value={password}
        secureTextEntry={true}
        placeholder="Password"
        autoCapitalize={'none'}
      />
      <View style={styles.buttonContainer}>
        <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
      </View>
    </View>
  );
}
// Add some basic styling
const styles = StyleSheet.create({ /* ... */ });

// App.js
import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import { supabase } from './lib/supabase';
import Auth from './src/components/Auth';
import HealthDashboard from './src/components/HealthDashboard'; // We will create this next

export default function App() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  }, []);

  return (
    <View>
      {session && session.user ? <HealthDashboard key={session.user.id} session={session} /> : <Auth />}
    </View>
  );
}

// src/components/HealthDashboard.js
import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet, FlatList, Alert } from 'react-native';
import { supabase } from '../../lib/supabase';

const HealthDashboard = ({ session }) => {
  const [healthData, setHealthData] = useState([]);
  const [loading, setLoading] = useState(false);

  // ** 1. Fetch initial data and set up real-time subscription **
  useEffect(() => {
    getHealthData();

    const channel = supabase
      .channel('health_data_changes')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'health_data' }, (payload) => {
        // When new data arrives, add it to the top of our list
        setHealthData((currentData) => [payload.new, ...currentData]);
      })
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, []);

  // ** 2. Simulate wearable and sync data **
  useEffect(() => {
    const interval = setInterval(() => {
      syncNewData();
    }, 5000); // Sync new data every 5 seconds

    return () => clearInterval(interval);
  }, []);

  const getHealthData = async () => {
    setLoading(true);
    const { data, error } = await supabase
      .from('health_data')
      .select('*')
      .order('created_at', { ascending: false }); // Most recent first

    if (error) {
      Alert.alert('Error Fetching Data', 'Have you set up RLS policies?');
      console.error('Fetch error:', error.message);
    } else {
      setHealthData(data);
    }
    setLoading(false);
  };

  const syncNewData = async () => {
    const newHeartRate = Math.floor(Math.random() * (120 - 60 + 1)) + 60; // Random heart rate 60-120
    const newSteps = Math.floor(Math.random() * 50) + 10; // Random steps 10-50

    const { error } = await supabase
      .from('health_data')
      .insert({
        user_id: session.user.id,
        heart_rate: newHeartRate,
        steps: newSteps,
      });

    if (error) {
      Alert.alert('Sync Error', error.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Welcome, {session.user.email}</Text>
      <Text style={styles.subHeader}>Real-time Health Data:</Text>
      <FlatList
        data={healthData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.dataRow}>
            <Text>❤️ {item.heart_rate} bpm</Text>
            <Text>👟 {item.steps} steps</Text>
            <Text style={styles.timestamp}>{new Date(item.created_at).toLocaleTimeString()}</Text>
          </View>
        )}
      />
      <Button title="Sign Out" onPress={() => supabase.auth.signOut()} />
    </View>
  );
};
// Add styles
const styles = StyleSheet.create({ /* ... */ });

export default HealthDashboard;

auth.uid() = user_id

auth.uid() = user_id
*   Click "Review" and "Save policy".

### So funktioniert es
*   `auth.uid()`: Das ist eine spezielle Supabase-Funktion, die die eindeutige ID der aktuell authentifizierten Person zurückgibt, die die Anfrage stellt.
*   **SELECT-Richtlinie**: Die Klausel `USING (auth.uid() = user_id)` wirkt wie ein obligatorischer `WHERE`-Filter bei jeder `SELECT`-Abfrage. Sie weist PostgreSQL an: „Gib nur Zeilen zurück, in denen die Spalte `user_id` mit der ID der anfragenden Person übereinstimmt.“
*   **INSERT-Richtlinie**: Die Klausel `WITH CHECK (auth.uid() = user_id)` wirkt als Validierungsregel. Sie weist PostgreSQL an: „Prüfe vor dem Übernehmen dieser neuen Zeile, dass die eingefügte `user_id` dieselbe ist wie die ID der Person, die das Einfügen ausführt.“ Das verhindert, dass jemand böswillig Daten im Namen einer anderen Person einfügt.

Starten Sie nun Ihre React-Native-App neu. Registrieren Sie sich als neue Nutzerin oder neuer Nutzer (oder melden Sie sich an). Sie sollten das Dashboard sehen, und alle 5 Sekunden erscheinen neue Datenpunkte! Wenn Sie ein zweites Benutzerkonto erstellen und sich anmelden, sehen Sie eine vollständig getrennte, leere Datenliste. Das belegt, dass Ihre Sicherheitsrichtlinien funktionieren.

## Fazit
Wir haben erfolgreich eine sichere, vollständige Datenpipeline erstellt. Sie verfügen nun über eine React-Native-App, die Benutzerauthentifizierung beherrscht und Daten in Echtzeit mit einem Supabase-Backend synchronisiert. Vor allem haben Sie Ihre Daten mit Row Level Security abgesichert, sodass selbst bei direktem Datenbankzugriff die sensiblen Gesundheitsinformationen einer Person isoliert und geschützt bleiben.

Dieses Muster ist die Grundlage für robuste, skalierbare und sichere Anwendungen. Von hier aus können Sie das Projekt in viele Richtungen weiterentwickeln.

**Nächste Schritte für Leserinnen und Leser:**
*   **Echte Wearable-Integration**: Ersetzen Sie den Simulator durch eine Bibliothek wie `react-native-health` oder `react-native-wearables`, um echte Daten aus Apple Health oder Google Fit zu beziehen.
*   **Datenvisualisierung**: Nutzen Sie eine Diagrammbibliothek, um Verläufe der Gesundheitsdaten über die Zeit darzustellen.
*   **Offline-Unterstützung**: Implementieren Sie eine Offline-First-Strategie mit einer lokalen Datenbank wie SQLite und einer Synchronisierungs-Engine für Fälle ohne Internetverbindung.

## Ressourcen
*   **Offizielle Supabase-Dokumentation**: [supabase.com/docs](https://supabase.com/docs)
*   **Supabase-RLS-Dokumentation**: [Supabase Row Level Security Docs](https://supabase.com/docs/guides/auth/row-level-security)
*   **Expo-Dokumentation**: [docs.expo.dev](https://docs.expo.dev/)
*   **React Native Health**: [GitHub-Repository](https://github.com/agencyenterprise/react-native-health)

---



## Kurzreferenz

| Aspekt | Wichtige Informationen |
|--------|----------------|
| **Thema** | Entwicklung |
| **Relevanz** | Patientenaufklärung und Bewusstsein |
| **Maßnahme** | Besprechen Sie dies mit Ihrer Ärztin oder Ihrem Arzt |
| **Häufigkeit** | Wie von Ihrem Behandlungsteam empfohlen |
| **Evidenz** | Basierend auf aktuellen klinischen Leitlinien |


## Häufig gestellte Fragen

**F: Woran erkenne ich, ob das auf mich zutrifft?**
A: Besprechen Sie Ihre persönliche und familiäre Krankengeschichte mit Ihrer Ärztin oder Ihrem Arzt, um Ihre individuellen Risikofaktoren einzuschätzen und die geeigneten nächsten Schritte festzulegen.

**F: Was sollte ich meine Ärztin oder meinen Arzt fragen?**
A: Gute Fragen sind: „Was bedeuten meine Ergebnisse?“, „Welche Möglichkeiten habe ich?“, „Welche Änderungen des Lebensstils würden helfen?“ und „Wann sollte ich zur Nachkontrolle kommen?“

**F: Gibt es Änderungen des Lebensstils, die helfen können?**
A: Die meisten Erkrankungen profitieren von grundlegenden Maßnahmen: ausgewogene Ernährung, regelmäßige körperliche Aktivität (150+ Minuten/Woche), erholsamer Schlaf (7–9 Stunden), Stressbewältigung und der Verzicht auf Tabak.

## Medizinischer Haftungsausschluss

Dieser Artikel dient ausschließlich Bildungszwecken und stellt keine medizinische Beratung dar. Konsultieren Sie stets eine qualifizierte medizinische Fachperson, bevor Sie Entscheidungen über Ihre Gesundheit, Behandlung oder Versorgung treffen. Die individuellen Umstände unterscheiden sich, und was für eine Person geeignet ist, muss für eine andere nicht geeignet sein.

Wenn Sie einen medizinischen Notfall erleben, rufen Sie sofort 911 (oder Ihre örtliche Notrufnummer) an.