Programmiererforum

Code: Select all

{
"rules": {
"chats": {
"$chatId": {
".read": "auth != null",
".write": "auth != null"
}
}
}
}

Code: Select all

import { database, auth } from '../../../firebaseConfig';
import { ref, onValue, push } from 'firebase/database';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { MaterialIcons } from '@expo/vector-icons';
import { useNetInfo } from '@react-native-community/netinfo';
import { useUser } from '@clerk/clerk-expo';
import { signInWithCustomToken } from 'firebase/auth';
const ChatScreen = () => {
const { user } = useUser(); // Get Clerk user
const { buyerId, sellerId, shopData, sellerStatus } = useLocalSearchParams();
const [messages, setMessages] = useState([]);
const [newMessage, setNewMessage] = useState('');
const router = useRouter();
const netInfo = useNetInfo();
const isConnected = netInfo?.isConnected;

useEffect(() => {
if (!user || !user.session) return; // If user is not authenticated, do nothing

// Get Clerk session and retrieve token
const getClerkJwtToken = async () => {
try {
// Directly access Clerk's session
const session = user.session; // Get Clerk session directly
const token = session?.access_token; // Get the token from the session
console.log('Clerk user:', user);
const clerkToken = await user.getToken();
console.log('Clerk Token:', clerkToken);

if (!token) {
Alert.alert('Error', 'Failed to retrieve Clerk token');
return;
}

// Sign in with the token to Firebase Authentication
await signInWithCustomToken(auth, token); // Sign in to Firebase
console.log("Firebase user authenticated with Clerk JWT");

} catch (error) {
console.error("Error linking Clerk with Firebase", error.message);
Alert.alert('Error', 'Failed to authenticate with Firebase');
}
};

getClerkJwtToken(); // Call the function to authenticate with Firebase

const chatId = `${buyerId}_${sellerId}`;
const messagesRef = ref(database, `chats/${chatId}/messages`);

const unsubscribe = onValue(messagesRef, (snapshot) => {
const data = snapshot.val();
const messagesData = data ? Object.values(data) : [];
setMessages(messagesData);
});

return () => unsubscribe();
}, [buyerId, sellerId, user]);

const sendMessage = async () => {
if (newMessage.trim() === '') {
Alert.alert('Error', 'Message cannot be empty.');
return;
}
if (!isConnected) {
Alert.alert('Error', 'You are offline.  Please check your connection.');
return;
}

const chatId = `${buyerId}_${sellerId}`;
const messagesRef = ref(database, `chats/${chatId}/messages`);

try {
// Use Clerk's `user.id` to send the message
await push(messagesRef, {
senderId: user.id, // Use Clerk's `id` as senderId
text: newMessage,
timestamp: new Date().toISOString(),
});
setNewMessage('');
} catch (e) {
console.error('Error sending message:', e.message);
Alert.alert('Error', e.message);
}
};

return (

{/* Header */}

 router.back()} style={styles.backButton}>




{shopData?.shopName}



{sellerStatus === 'online' ? 'Online' : 'Offline'}





{/* Messages List */}
 (

{item.text}

)}
keyExtractor={(item, index) => `${item.timestamp}-${index}`}
contentContainerStyle={styles.messagesContainer}
/>

{/* Input Field */}







);
};

const styles = StyleSheet.create({
..
});

export default ChatScreen;