Working realtime chat in React in less than 20 minutes

Introduction

In this tutorial I show you how to create small web chat app in React without creating any code in backend. Full working demo with source code is available at codesandbox.

Tech Stack

For this project we will use:

• React — v16.5.2
• Firebase — v5.7.0
• Firebase google authentication
• react-web-gifted-chat — v0.1.1
• material-ui (for nice styles) — v3.6.1

Getting started

We will start with creating react app. To do this you can use just create-react-app. Type command below in your console:

npx create-react-app chat

In their github you can check how to start project.

Next step is adding essential dependencies to our project:

yarn add react-web-gifted-chat firebase @material-ui/core

Now we have project with all things what we need. The file which interest us mostly is: App.js.

It looks like this right now.

Firebase Google Authentication

Sign in to firebase using your google account, and create new project inside.

Select Authentication from left side menu, select Set up sign-in method, and enable Google (you have to select your email in project support email).

Firebase realtime database

Select Database from left side menu, scroll down to Or choose Realtime Database

and create database with option Start in test mode (this allows anyone to read and write your database data).

For development, we will import some initial data to our database by selecting import JSON

The initial data are here:

Firebase configuration in React

To start coding we need to put configuration from firebase to our App.js. Click on Project overview in firebase console and click on the web to see your config.

Add copied config to your App.js, you need to add also import of firebase. It should look like this

Google authentication

We will use google authentication with popup. For the beginning we need to create initial state. It will contain messages (empty now), user (we fill it after sign in), and isAuthenticated flag.

Now we need to set onAuthStateChanged handler to detect if user signed in or not. Put componentDidMount inside your App component.

Now we need to add some button to make sign in possible. We will use material-ui dialog to do this. Dialog will show above all other page and restrict usage until user log in. Add renderPopup to your component and update your render method.

after this step you should see this on your page

But after you click at this button you will get error:

this.signIn is not a function

So let’s declare it.

Now we able to sign in to our app, now we just need sign out button and logic and our auth stuff is ready.

Chat

Now when our authentication is ready we are able to add react-web-gifted-chat this is a fork of react-native library. We will modify our render to render three columns.

So our app should look like this:

As you can see adding react-web-gifted-chat is really easy.

Loading messages

To load messages we need to read it from firebase database. We will add loadMessage function, and modify componentDidMount to load messages after sign in.

Result of this code should be messenger with loaded initial messages.

Sending message

Last missing feature of our messenger is sending messages. We need to and onSend method to our component.

With this code we are able to send messages.

Summary

In this tutorial we learn how to create simple realtime messenger without single line of backend code, react-web-gifted-chat allows us to build fully functional messenger without any problem. Full working demo with source code is available at codesandbox.