Build an anonymous chat app with React & React bootstrap
Tags: react, cometchat
Published: 2019-06-27 06:59:05

---
title: Build an anonymous chat app with React & React bootstrap
published: true
description: 
tags: React, Reactjs, CometChat
---


This article was first published on [CometChat's tutorial page](https://www.cometchat.com/tutorials/build-an-anonymous-chat-app-with-react-react-bootstrap/).

To follow this article effectively, it is expected that you have the following:

- Prior knowledge of React. You can use this [resource](https://reactjs.org/tutorial/tutorial.html) to get up to speed with it.
- Node.js and NPM installed on your machine.
- A text editor or IDE. VSCode is recommended.

## Introduction
Allowing users to communicate is becoming an essential feature for many apps. In my experience, chat closes the distance between you and your customers and can lead to more conversions, improved engagement; and ultimately, greater success for your business. However, implementing chat can be time-consuming.

In this tutorial, I am excited to show you how you can build an aesthetic group chat with minimal code by leveraging, React, React Bootstrap, and CometChat.

Here is a preview of what you will build:

![Anonymous-group-chat-app.gif](https://ucarecdn.com/70f941bc-dbf6-4ae5-974f-c846ef9bafa4/)


You can choose to dive right into [code](https://github.com/cometchat-pro-tutorials/react-anonymous-group-chat) or go through our step by step tutorial.

## Scaffolding a new React project
For this article, to quickly scaffold a new React app, you will use one of the very popular tools available – the [create-react-app CLI tool](https://github.com/facebook/create-react-app). Open a terminal, move into the directory where you usually save your projects and run this command:

```
npx create-react-app react-anonymous-chat 
```

After running the command, the CLI will begin the process of installing the default dependencies for a React project. Depending on your internet speed, this should take a couple of minutes to complete. After setting up your project, open your new project in your preferred text editor or IDE.

## Installing Dependencies
Now that you have scaffolded your app, the next step is to install dependencies necessary for your chat application. For this article, you’ll need the following:

`@cometchat-pro/chat`: This module will enable us to connect to CometChat and begin sending and receiving messages in real-time
`react-bootstrap`: This is a UI library built on top of react and core Bootstrap. You will use it to style the entire app in this article
`react-router-dom`: You will use it for client-side routing
`uuid`: This module will be used to generate unique identifiers

To install the above modules, run the following commands:

```
# move into your project directory
cd react-anonymous-chat
        
# install dependencies using npm
npm install @cometchat-pro/chat react-bootstrap react-router-dom uuid
```

## Setting up
To begin using the CometChat Pro SDK in your newly created React project, you’ll need a CometChat Pro account. If you don’t have an account, you can quickly create one here.

After creating an account, go to your dashboard and create a new app called react-anonymous-chat. After creating a new app, you will find the APP ID attached close to the name of your app. If you open your app and go to the API Keys section, you will see a key with **fullAccess** scope. Copy it out as well as the APP ID. We’ll need these shortly.


## Get the CometChat API
Next, create a `.env` file in the root of your project to store your app credentials. Take care not to commit this file to version control! This is important for protecting your secrets when you publish your app. You can easily create the file by running this command:

```
touch .env
```

Open the file and paste this snippet:

```
REACT_APP_COMETCHAT_APIKEY=YOUR_API_KEY_GOES_HERE
REACT_APP_COMETCHAT_APPID=YOUR_APP_ID_GOES_HERE 
```

Replace the placeholders with your APP ID and API KEY from your dashboard.

Since your keys are now ready, you can initialize `CometChat` in the `index.js` file generated by Create React App. Open your `index.js` file and replace it with this snippet:

```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { CometChat } from '@cometchat-pro/chat';
    
CometChat.init(process.env.REACT_APP_COMETCHAT_APPID)
  .then(() => {
    console.log('Initialised CometChat');
  })
  .catch(() => {
    console.log('Failed to Initialise CometChat');
  });

ReactDOM.render(, document.getElementById('root')); 
```

Before going ahead, you’ll need to import Bootstrap in public/index.htm like so:

```
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>
```

## Building your components
Your app will have three components, the signup, home, and chat component. The signup component is the page that will enable users to create new accounts. Create a folder named `components` inside the `src` directory. This is where you will add your components.

## Signup component
In this component, you will build out a form to help create new users on the app. A user will have a `UID`, an email address, and a name. The `UID` value has to be unique.

Create a new file named `Signup.js`, Inside the file, add these imports:

```
import React from 'react';
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Form from 'react-bootstrap/Form'
import Alert from 'react-bootstrap/Alert'
import Spinner from 'react-bootstrap/Spinner'
import { Redirect, Link } from 'react-router-dom'
```

Here, you are importing some components from the core `react-bootstrap` components as well as components from `react-router-dom` dependency.

Next, you define the initial state for your signup component in the `Signup.js` file:

```
class Signup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      uid: '',
      name: '',
      email: '',
      UIDError: null,
      errors: null,
      redirect: false,
      isLoading: false
    };
  }
  //... other class methods
}
export default Signup;
```

Here, you defined a state to hold data for the signup form and error messages. Here are the specific functions of each of the objects declared in the state:

`uid`: This holds the current value of the text inputted in the username form field.
`name`: This holds the current value of the user’s name in the form field.
`email`: This holds the current value of the user’s email in the form field.
`UIDError`: This object will keep track of errors when validating the username field.
`errors`: This stores error messages when validating other fields.
redirect: This keeps tracks of success on form submission.
`isLoading`: This is used for providing visual feedback when using `<Spinner />` component.

The `UIDError` object keeps track of errors on the username field while `errors` keeps track of errors on other fields. They are separated because the username field does not accept spaces and as such, they do not have the same validation logic.

After defining the state, you will create the user interface to represent the current state of your application. Add this render method to your `Signup` class:

```
render() {
  if (this.state.redirect) return ;
  return (
    <React.Fragment>
      <Row
        className='d-flex justify-content-center align-items-center w-100 mt-5'
        style={{
          minHeight: '100%'
        }}
      >
      >Col>
        {this.state.errors !== null && (
          <Alert variant='danger'>
            <ul>
              {this.showErrors().map(err => (
                <li key={err}>{err</li>
              ))}
            </ul>
          </Alert>
        )}
        <Form onSubmit={this.handleSubmit}>
          <Form.Group controlId='username'>
            <Form.Label>User ID</Form.Label>
            <Form.Control
              required
              type='text'
              name='uid'
              value={this.state.uid}
              placeholder='Choose a username'
              onChange={this.handleChange}
            />
            {this.state.UIDError !== null && (
              <Form.Control.Feedback
                style={{ display: 'block' }}
                type='invalid'
              >
                {this.state.UIDError}
              </Form.Control.Feedback>
            )}
            </Form.Group>
              <Form.Group controlId='display-name'>
                <Form.Label>Name</Form.Label>
                <Form.Control
                  required
                  type='text'
                  name='name'
                  value={this.state.name}
                  placeholder='What is your name?'
                  onChange={this.handleChange}
                />
              </Form.Group>
              <Form.Group controlId='email'>
                <Form.Label>Email Address</Form.Label>
                <Form.Control
                  required
                  type='email'
                  name='email'
                  value={this.state.email}
                  placeholder='Your email address'
                  onChange={this.handleChange}
                />
              </Form.Group>
              <Button
                disabled={this.state.isLoading}
                variant='primary'
                type='submit'
                className='btn-block'
              >
                {this.state.isLoading ? (
                  <>
                    <Spinner
                      as='span'
                      animation='grow'
                      size='sm'
                      role='status'
                      aria-hidden='true'
                    />
                    Please wait...
                  </>
                ) : (
                  <span>Create My Account</span>
                )}
              </Button>
              <p className='pt-3'>
                Already have an account? <Link to='/'>Login</Link>
              </p>
            </Form>
          </Col>
        </Row>
      </React.Fragment>
    );
  }
```

Here in this snippet, you declared a form where the values of the inputs are bound to the state you defined earlier. The form contains three inputs with native form validation except for the username input. It also contains a `<Redirect /> `component and a `Link` that renders the home component where necessary.

Next, you will create three methods used in the `render` method, namely: `handleChange`, `handleSubmit` and `showErrors`. Add these methods to the your `Signup.js` file:

```
handleChange = e => {
  if (e.target.name === 'uid') {
    const uid = e.target.value;
    if (uid.indexOf(' ') > 0) {
      this.setState(
        { UIDError: 'Username cannot contain white spaces' },
        () => {
          console.log(this.state.UIDError);
        }
      );
    } else {
      this.setState({ UIDError: null });
    }
  }
  this.setState({ [e.target.name]: e.target.value });
};
    
handleSubmit = e => {
  e.preventDefault();
  const { uid, name, email } = this.state;
  this.setState({ uid: '', name: '', email: '', isLoading: true });
  fetch('https://api.cometchat.com/v1/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      appid: process.env.REACT_APP_COMETCHAT_APPID,
      apikey: process.env.REACT_APP_COMETCHAT_APIKEY
    },
    body: JSON.stringify({
      uid,
      name,
      email
    })
  })
  .then(response => response.json())
  .then(data => {
    const error = data.error;
    if (error) {
      this.setState(
        {
          isLoading: false,
          errors: { ...error.details }
        },
        () => {
          this.showErrors();
        }
      );
      return;
    }
    this.setState({
      isLoading: false,
      redirect: true
    });
  });
};
    
showErrors = () => {
  const errors = this.state.errors;
  let errorMessages = [];
  if (errors !== null) {
    for (const error in errors) {
      errorMessages = [...errorMessages, ...errors[error]];
    }
  }
  return errorMessages;
};
```

If you are building a production app, it is not proper to keep your keys on the frontend. Instead, the keys should be kept on the server-side so that the private key can remain private.

The `handleChange` method updates the values of all the input fields as the user types. A custom validation is performed on the username field to prevent usernames without white spaces. The `handleSubmit()` method makes a `POST` request to the account creation API: `https://api.cometchat.com/v1/users` with the details entered by the user. If it is successful, you are then redirected to the home page. The `showErrors` method is used to show errors.

## Home component
Now that you are done with the signup component, you will now build the home component. This component is to enable logging in of users.

Create a new file `Home.js` inside the `/src/components` directory. Inside the file, add these imports:

```
import React from 'react';
import Button from 'react-bootstrap/Button';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Alert from 'react-bootstrap/Alert';
import Spinner from 'react-bootstrap/Spinner';
import { CometChat } from '@cometchat-pro/chat';
import { Redirect, Link } from 'react-router-dom';
```

Here, you imported components that you will make use of just like you did in the signup component. After that, add this snippet in the class:

```
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      user: null,
      error: null,
      redirect: false,
      isLoading: false
    };
  }
    
  //... other class methods
    
}
export default Home;
```

Here, you declared the initial state for this component. This is similar to what you did in the signup component also, except that you have a username and user object to hold data about the logged in user.

After that, add these two methods to your class `handleChange` and `handleSubmit` like so:

```
handleChange = e => {
  this.setState({ username: e.target.value });
};
    
handleSubmit = e => {
  e.preventDefault();
  const username = this.state.username;
  this.setState({ username: '', isLoading: true });
  CometChat.login(username, process.env.REACT_APP_COMETCHAT_APIKEY)
  .then(user => {
    this.setState({ redirect: true, user, isLoading: false });
    localStorage.setItem('cometchat:authToken', user.authToken);
  })
  .catch(err => {
    this.setState({ error: err.message, isLoading: false });
  });
};
```

The `handleChange` method updates the value of the input field as the user types while the `handleSubmit` method will call the `login` method provided by `CometChat`. To make a login request, the API key defined in the `.env` file is passed alongside the username.

On successful login, the user data is returned and the `authToken` is saved for re-authentication later. Next, add the `render` method for this component below the `handleSubmit` method like so:

```
// other methods above...
render() {
  if (this.state.redirect)
  return (
    <Redirect
      to={{
        pathname: '/chat',
        user: this.state.user
      }}
    />
  );
  return (
    <React.Fragment>
      <Row
        className='d-flex justify-content-center align-items-center w-100 mt-5'
        style={{
          minHeight: '100%'
        }}
      >
        <Col xs={10} sm={10} md={4} lg={4} className='mx-auto mt-5'>
          {this.state.error !== null && (
            <Alert variant='danger'>{this.state.error}</Alert>
          )}
          <Form onSubmit={this.handleSubmit}>
            <Form.Group controlId='username'>
              <Form.Label>Username</Form.Label>
              <Form.Control
                required
                type='text'
                value={this.state.username}
                placeholder='Enter a Username'
                onChange={this.handleChange}
              />
            </Form.Group>
            <Button
              disabled={this.state.isLoading}
              variant='primary'
              type='submit'
              className='btn-block'
            >
              {this.state.isLoading ? (
                <>
                  <Spinner
                    as='span'
                    animation='grow'
                    size='sm'
                    role='status'
                    aria-hidden='true'
                  />
                  Loading...
                </>
              ) : (
                <span>Login</span>
              )}
            </Button>
            <p className='pt-3'>
              Don't have an account? <Link to='/signup'>Create One</Link>
            </p>
          </Form>
        </Col>
      </Row>
    </React.Fragment>
  );
}
```

In this snippet, you have a login form to take the user’s username. When the user clicks on the **Login** button, you take the user input and call the `handleSubmit` method you defined earlier in this component. If a success response is received, the user is redirected to the chat component, else, an error is displayed.

## Chat component
This is the component where a user will be able to view messages and send messages in a chat group. First, create a new `Chat.js` file in the `src/components` directory. After that, add these imports:

```
import React from 'react';
import { CometChat } from '@cometchat-pro/chat';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Navbar from 'react-bootstrap/Navbar';
import { Redirect } from 'react-router-dom';
import uuid from 'uuid';
```

After that, add a class with a state inside the Chat.js file like so:

```
class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      redirect: false,
      user: null,
      receiverID: 'supergroup',
      messageText: '',
      messages: [],
      authToken: null,
      messageType: CometChat.MESSAGE_TYPE.TEXT,
      receiverType: CometChat.RECEIVER_TYPE.GROUP
    };
  }
  //... other class methods
}
    
export default Chat;
```

Here, you need a messages array to store all messages sent and received on the group. The `messageType` and `receiverType` objects define the type of message you want to listen for and for whom the message is for. The `receiverID` object is used to identify the group name on which you listen for messages. Here, you used the default group generated for you – **supergroup**.

After that, add the `render` method for the component just below the constructor like this:

```
render() {
  if (this.state.redirect) return <Redirect to='/' />;
  return (
    <div
      className='bg-light page'
      style={{ height: '100vh', overflowX: 'hidden' }}
    >
      <Row>
        <Col>
          <Container>
            <div className='d-flex align-items-center justify-content-between'>
              <h3 className='text-center py-3 d-inline'>
                React Anonymous Chat
              </h3>
              <Button onClick={e => this.logout()} variant='outline-primary'>
                Logout
              </Button>
            </div>
            <ul className='list-group' style={{ marginBottom: '60px' }}>
              {this.state.messages.length > 0 ? (
                this.state.messages.map(msg => (
                  <li className='list-group-item' key={uuid()}>
                    <strong>{msg.sender.name}</strong>
                    <p>{msg.text}</p>
                  </li>
                ))
              ) : (
                <div className='text-center mt-5 pt-5'>
                  <p className='lead text-center'>Fetching Messages</p>
                </div>
              )}
            </ul>
          </Container>
        </Col>
      </Row>
      <Navbar fixed='bottom'>
        <Container>
          <Form
            inline
            className='w-100 d-flex justify-content-between align-items-center'
            onSubmit={this.sendMessage}
          >
            <Form.Group style={{ flex: 1 }}>
              <Form.Control
                value={this.state.messageText}
                style={{ width: '100%' }}
                required
                type='text'
                placeholder='Type Message here...'
                onChange={this.handleChange}
              />
            </Form.Group>
            <Button variant='primary' type='submit'>
              Send
            </Button>
          </Form>
        </Container>
      </Navbar>
    </div>
  );
}
```

In this render method, you have a `<Redirect />` component that redirects to the home component when there is no logged in user. You also have a message box that displays all messages sent and received in the group, and finally, you have a form to handle the sending of messages.

There are some methods that are called here, don’t worry yet, you will soon define these methods. Now that you have built the UI for the chat component, the next thing is to show messages to the user. You will do this as soon as the component is mounted. In your `Chat.js` file, add this method:

```
componentDidMount() {
  this.setState({ user: this.props.location.user });
  this.getUser();
  this.receiveMessages();
}
```

This is a callback function provided by React. In this method, you will fetch the user details and listen for new messages in the group. Now, add the `getUser()` method like so:

```
getUser = () => {
  CometChat.getLoggedinUser().then(
    user => {
      this.joinGroup();
    },
    error => {
      const authToken = localStorage.getItem('cometchat:authToken');
      if (authToken !== null) {
        this.setState({ authToken }, () => {
          this.reAuthenticateUserWithToken(this.state.authToken);
        });
      } else {
        this.setState({ redirect: true });
      }
    }
  );
};
```

In this method, you get the logged in user and join the group using the `joinGroup()` method . If an error occurs in getting the user, the `authToken` stored in `localStorage` serves as a fallback option for re-authenticating the user. The `joinGroup()` method is not defined yet. Create the method inside your `Chat.js` to look like this:

```
joinGroup = () => {
  const GUID = this.state.receiverID;
  const password = '';
  const groupType = CometChat.GROUP_TYPE.PUBLIC;
  CometChat.joinGroup(GUID, groupType, password).then(
    group => {},
    error => {
      if (error.code === 'ERR_ALREADY_JOINED') {
        this.reAuthenticateUserWithToken();
      }
    }
  );
};
```

Here in this method, the user is subscribed to this group and they can now send and receive messages from this group. Also, the `fetchMessages()` method is called to fetch previous messages when the user successfully joins the group. Add the `fetchMessages()` method too:

```
fetchMessages = () => {
  const GUID = this.state.receiverID;
  const limit = 30;
  const messagesRequest = new CometChat.MessagesRequestBuilder()
    .setGUID(GUID)
    .setLimit(limit)
    .build();
  messagesRequest.fetchPrevious().then(
    messages => {
      const textMessages = messages.filter(msg => msg.type === 'text');
      this.setState({ messages: [...textMessages] });
      this.scrollToBottom();
    },
    error => {
      console.log('Message fetching failed with error:', error);
    }
  );
};
```

This fetches the previous messages sent to the group. To enable users to see the newest messages, the `scrollToBottom()` method is called. Add a `scrollToBottom()` method to your class like so:

```
scrollToBottom = () => {
  const page = document.querySelector('.page');
  page.scrollTop = page.scrollHeight;
};
```

Now that you can fetch previous messages, it’s time to enable users to send new messages too. To achieve this, you first need to create a `handleChange()` method to update the state whenever the user types a new message. Add this method to your class component:

```
handleChange = e => {
  this.setState({ messageText: e.target.value });
};
```

Thereafter, you add the `sendMessage` method like so:

```
sendMessage = e => {
  e.preventDefault();
  const { receiverID, messageText, messageType, receiverType } = this.state;
  const textMessage = new CometChat.TextMessage(
    receiverID,
    messageText,
    messageType,
    receiverType
  );
  CometChat.sendMessage(textMessage).then(
    message => {
      this.setState({ messageText: '' });
      const oldMessages = [...this.state.messages];
      const filtered = oldMessages.filter(msg => msg.id !== message);
      this.setState({ messages: [...filtered, message] });
      this.scrollToBottom();
    },
    error => {
      console.log('Message sending failed with error:', error);
    }
  );
};
```

This method is called when the form in the `render()` method is submitted. After the `sendMessage` method of `ComeChat` is called, the input field is cleared and new messages will be added to the messages array. New messages are also filtered in case of duplicates, and lastly, the `scrollToBottom()` is called to give focus to new messages.

The second method you called in the `componentDidMount` method was `receiveMessages`. Now, create the method inside your class:

```
receiveMessages = () => {
  const listenerID = 'supergroup';
  CometChat.addMessageListener(
    listenerID,
    new CometChat.MessageListener({
      onTextMessageReceived: textMessage => {
        const oldMessages = this.state.messages;
        oldMessages.push(textMessage);
        this.setState(
          {
            messages: [...oldMessages]
          },
          () => this.scrollToBottom()
        );
      }
    })
  );
};
```

Since it’s only text messages that you are concerned with, only the `onTextMessageReceived` handler is used. On receiving new messages, the messages array is updated to show messages in real time.

After that, you have to add a logout method to enable authenticated users to log out of the application. Add a logout method in the `Chat.js` file like so:

```
logout = () => {
  CometChat.logout().then(() => {
    localStorage.removeItem('cometchat:authToken');
    this.setState({ redirect: true });
  });
};
```

When a user clicks the logout button, you call the `logout()` method, then, you reset the `localStorage` and redirect the user to the Home page.

Now that you have defined your components, you would update the `App.js` file with the routes. Open your `App.js` file and replace it with this:

```
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Chat from "./components/Chat";
import Signup from "./components/Signup";
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/signup" component={Signup} />
            
      </Switch>
    </Router>
  );
}
export default App;
```


Now, you have successfully finished building your app. Run this command in the root directory of your app:

```
npm start
```

You should have something similar to what was shown to you earlier.

## Conclusion
In this article, you learned how to build an anonymous chat using React, React Bootstrap and CometChat Pro. You can now comfortably integrate group chats into React apps. As far as CometChat Pro SDK goes, there are a ton of other features not covered in this article. Feel free to expand on this by diving deeper into the [documentation](https://prodocs.cometchat.com/docs/js-quick-start).