User to User private Chat App using ReactJS and Firebase | Without socket programming

This article covers how to make a User to User private Chat App using React JS and Firebase (without socket programming). React is a JavaScript framework provided by Facebook and is used to build fully-featured web applications.

We will be following the below steps for creating our application:

npx create-react-app chat-app

cd chat-app

Now install all required modules for the project by using the below command:

npm install @emotion/react @emotion/styled @mui/icons-material @mui/lab @mui/material firebase react-router-dom

Step 1: Open the “src” folder and select the App.js file. 

This file contains routing logic, where routing helps the user to navigate different pages. Go through react-router-dom documentation to understand more about routing in React JS

App.js: Below is the code for the App.js file:

Step 2: Create the “Screens” folder  and Create files “Signin.js”,  “Signup.js“, “ChatHome.js”

Screens folder

Step 3: Working with the Signin.js file 

Here users need to enter their email and password, Firebase will authenticate 

1. If the user is not registered give an alert as the user has not found
2. If the user entered the wrong credentials gives an alert as the wrong password

After Sign in success, users navigate to the Chat home page, where chatting takes place.

Signin.js: Below is the code for the Signin.js file. 

Output:

Signin page

Step 4: Working with the Signup.js file

Here users need to Register/Signup with a username, email, and password. After registration for every user, there will be a unique id is generated and User data is stored in Firestore.

After Registration, the user navigates to the Sign-in page.

Signup.js: Below is the code for the “Signup.js” file. 

signup page

Step 5: Working with the ChatHome.js file

Here users find all registered users on the left side, by clicking on any target user navigate to the private chat room with the target user, and start sending messages.

Now where actual chatting logic comes, whenever the user clicks on send message button, the below sendMessage function triggers and 

creates a firestorm reference as users->userid->chatUsers->receiverId->messages for sender user and receiver user.

A Reference represents a specific location in your Database and can be used for reading or writing data to that Database location

const sendMessage = async () => {
    try {
      if (user && receiverData) {
        await addDoc(
          collection(
            db,
            "users",// Collection
            user.uid,// sender doc id
            "chatUsers",//Collection
            receiverData.userId,//receiver doc id
            "messages"// Collection
          ),
          {
            username: user.displayName,
            messageUserId: user.uid,
            message: chatMessage,
            timestamp: new Date(),
          }
        );

        await addDoc(
          collection(
            db,
            "users",//Collection
            receiverData.userId,// receiver doc id
            "chatUsers",//Collection
            user.uid,//sender doc id
            "messages"//Collection
          ),
          {
            username: user.displayName,
            messageUserId: user.uid,
            message: chatMessage,
            timestamp: new Date(),
          }
        );
      }
    } catch (error) {
      console.log(error);
    }
    setChatMessage("");
  };

below useEffect React hook is for reading all messages for the “messages” collection in Firebase, to know more about how react hooks works go through React hooks documentation

  useEffect(() => {
    if (receiverData) {
      const unsub = onSnapshot(
        query(
          collection(
            db,
            "users",
            user?.uid,
            "chatUsers",
            receiverData?.userId,
            "messages"
          ),
          orderBy("timestamp")
        ),
        (snapshot) => {
          setAllMessages(
            snapshot.docs.map((doc) => ({
              id: doc.id,
              messages: doc.data(),
            }))
          );
        }
      );
      return unsub;
    }
  }, [receiverData?.userId]);

ChatHome.js: Below is the code for the “ChatHome.js” file. 

Step 6: Open Firebase  go to console -> Create a new project  -> copy the firebaseConfig. Now Create “Firebase.js” file in src folder

Step 7: working with the Firebase.js file

Here we are going to integrate Firebase with React JS, Go through Firebase Documentation to find the Integration logic. 

Now paste the firebaseConfig in the below-commented place

Firebase.js: The below code is for the “Firebase.js” file

Step 8: Running and Building the application: We can run this application by using the following command. This will start React’s development server that can be used for debugging our application.

npm run start

Output:

Private chatting between two users