Building Chat Applications with Firebase and Supabase

Building Chat Applications with Firebase and Supabase

We’re building a chat application that shows how to manage real-time messaging with Firebase and Supabase — both fantastic back-end options for modern web apps.

Prerequisites

• Node.js 14+, npm 6+
• Firebase account
• Supabase account
• Basic JavaScript knowledge

Step 1: Setting Up Firebase

First up, we need to set up Firebase. It’ll manage our real-time messaging. Honestly, Firebase’s real-time database is a breeze to work with. Follow these steps:

npm install firebase

Now, create a Firebase project in the Firebase console, and grab your config object. Here’s the code to initialize Firebase:

import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
 apiKey: "YOUR_API_KEY",
 authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
 databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
 projectId: "YOUR_PROJECT_ID",
 storageBucket: "YOUR_PROJECT_ID.appspot.com",
 messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
 appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

Why Firebase? Well, its real-time features help sync messages between users without a hitch. But wait, if you forget to set up your database rules, you’ll hear crickets when you try to read or write data. Common error? “Permission denied” — just adjust your rules to allow read/write for authenticated users. Here’s how:

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

Step 2: Setting Up Supabase

Next, we’ll set up Supabase. Think of it as an open-source alternative to Firebase. It’s got a promising future and is gaining traction fast.

npm install @supabase/supabase-js

After signing up, create a new project in Supabase and grab your API keys. With those in hand, initialize Supabase:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://YOUR_SUPABASE_URL.supabase.co';
const supabaseKey = 'YOUR_SUPABASE_PUBLIC_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseKey);

Supabase’s real-time capabilities are cool. But if you accidentally set up your authentication rules wrong, you’ll be stuck like I was one late night. “No matching rows found” — that’s the sign you need to check your tables and user roles.

Step 3: Creating a Chat Interface

Time to build the front-end. Here’s a simple chat interface using HTML and JavaScript:

 

 
 Send

Now, we need to set up the event listener for sending messages:

const sendButton = document.getElementById('send-button');
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');

sendButton.onclick = () => {
 const message = messageInput.value;
 sendMessage(message);
 messageInput.value = '';
};

const sendMessage = (message) => {
 // Firebase
 database.ref('messages/').push().set({ text: message });

 // Supabase
 supabase.from('messages').insert([{ text: message }]);
};

Why both Firebase and Supabase? One provides a quick real-time solution, while the other gives you SQL-like querying. You can choose based on your project’s needs.

Step 4: Listening for Messages

To display incoming messages, set up listeners for both Firebase and Supabase:

// Firebase listener
database.ref('messages/').on('child_added', (snapshot) => {
 const message = snapshot.val();
 displayMessage(message.text);
});

// Supabase listener
supabase
 .from('messages')
 .on('INSERT', payload => {
 displayMessage(payload.new.text);
 })
 .subscribe();

const displayMessage = (text) => {
 const messageElement = document.createElement('div');
 messageElement.innerText = text;
 messagesContainer.appendChild(messageElement);
};

If you don’t see messages, check your database rules. It’s the most common pain point I’ve encountered—especially when you think everything works perfectly.

The Gotchas

• Authentication: If you skip user authentication, you’ll fall flat on your face when users can’t send or receive messages.
• Database Rules: Always double-check your read/write permissions. They can bite you when you least expect it.
• Real-time Sync: Don’t rely solely on Firebase or Supabase’s real-time capabilities. Build in fallback mechanisms in case of network issues.
• Performance: As the number of users grows, both Firebase and Supabase can become slow. Be prepared to scale.

Full Code Example

import firebase from 'firebase/app';
import 'firebase/database';
import { createClient } from '@supabase/supabase-js';

// Firebase setup
const firebaseConfig = {
 apiKey: "YOUR_API_KEY",
 authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
 databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
 projectId: "YOUR_PROJECT_ID",
 storageBucket: "YOUR_PROJECT_ID.appspot.com",
 messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
 appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

// Supabase setup
const supabaseUrl = 'https://YOUR_SUPABASE_URL.supabase.co';
const supabaseKey = 'YOUR_SUPABASE_PUBLIC_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseKey);

// Chat UI
const sendButton = document.getElementById('send-button');
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');

sendButton.onclick = () => {
 const message = messageInput.value;
 sendMessage(message);
 messageInput.value = '';
};

const sendMessage = (message) => {
 database.ref('messages/').push().set({ text: message });
 supabase.from('messages').insert([{ text: message }]);
};

database.ref('messages/').on('child_added', (snapshot) => {
 const message = snapshot.val();
 displayMessage(message.text);
});

supabase
 .from('messages')
 .on('INSERT', payload => {
 displayMessage(payload.new.text);
 })
 .subscribe();

const displayMessage = (text) => {
 const messageElement = document.createElement('div');
 messageElement.innerText = text;
 messagesContainer.appendChild(messageElement);
};

What’s Next

Try adding user authentication with Firebase Auth or Supabase Auth. It’ll enhance your chat app’s security and functionality.

FAQ

1. Can I use Firebase and Supabase together?
   Yes, that’s what we did! Each can offer unique features based on your needs.
2. Is Supabase better than Firebase?
   It depends on your project. Supabase is open-source, while Firebase is more established. Choose wisely.
3. How do I manage large numbers of messages?
   Paginate messages or implement infinite scrolling to improve performance.

Data Sources

For more details, check out the official documentation:
Firebase Docs and
Supabase Docs.

Service	Stars	Forks	Open Issues	License	Last Updated
supabase/supabase	102,880	12,514	1,040	Apache-2.0	2026-05-22

Last updated May 23, 2026. Data sourced from official docs and community benchmarks.

🕒 Published: May 22, 2026