=
Book a Demo
Tutorials

How to Build a React Chat Application with QuickBlox UI Kit

Andriy Avryata Andriy Avryata Last Update: Sep 17, 2026
How to Build a React Chat Application with QuickBlox UI Kit

To build a React chat application with QuickBlox, install the quickblox JavaScript SDK and the quickblox-react-ui-kit package, add a QBconfig.ts file with your QuickBlox application credentials, then wrap your app in QuickBloxUIKitProvider and render QuickBloxUIKitDesktopLayout. This gives you real-time messaging, typing indicators, file attachments, and a customizable chat UI without building the messaging layer from scratch.

This tutorial walks you through the full setup, from creating a QuickBlox application to building a working authenticated chat interface with Create React App and TypeScript.

Applies to: React 17–18, Create React App, Webpack.

Prerequisites

Before you begin, you’ll need:

  • Node.js and npm installed
  • Basic familiarity with React and TypeScript
  • A QuickBlox account
  • A QuickBlox application and application credentials

You’ll also use the QuickBlox JavaScript SDK and React UI Kit.

This tutorial is based on the QuickBlox React chat sample on GitHub.

Why Add Chat to Your React App

Real-time chat increases user engagement by enabling instant conversation, collaboration, and feedback inside your application. With QuickBlox React UI Kit, you get prebuilt components for one-on-one and group messaging, typing indicators, message history, file attachments, and notifications — so you can add full chat functionality to a React app without building the messaging infrastructure yourself.

React chat interface

Register a QuickBlox Account and Create an Application

  • Go to quickblox.com and click Sign Up.
  • Fill in your name, email address, and password, and complete any verification prompts.
  • Once registered, log in and go to the Applications section.
  • Click Create new app, enter your application name and type, and follow the on-screen steps.
  • Once created, locate your application credentials — you’ll need these in Step 4.

Follow the official QuickBlox instructions closely here; account and application setup is the foundation for everything that follows.

Create a React Project with TypeScript

Install required tools. Confirm Node.js and npm are installed:

node -v

npm -v

Create the project. From your terminal, run:

npx create-react-app my-app --template typescript

Remove the default content. Delete or modify the sample files in src — including App.css and logo.svg — so you’re starting from a clean base.

Run the project.

cd my-app

npm start

Open http://localhost:3000 to confirm the app is running before continuing.

Add Dependencies

Install the QuickBlox JavaScript SDK and React UI Kit:

npm install quickblox --save

npm install quickblox-react-ui-kit --save

Import them where you’ll use QuickBlox functionality (e.g. App.tsx):

import QuickBlox from 'quickblox';

import 'quickblox-react-ui-kit';

Add supporting packages. This project also uses:

npm install node-sass --save

npm install react-router-dom --save

npm install @mui/material --save

npm install @mui/icons-material --save
  • node-sass — Sass support for styling
  • react-router-dom — routing between auth and chat screens
  • @mui/material / @mui/icons-material — UI components and icons for the sign-in/sign-up forms

Add the QBconfig.ts File

Add a QBconfig.ts file to src.  This defines how the UI Kit connects to your QuickBlox application: appId, authKey, authSecret, and accountKey identify and authenticate your app; apiEndpoint and chatEndpoint define where requests are sent.

export const QBConfig = {

  credentials: {

    appId: 'YOUR_APP_ID',

    authKey: 'YOUR_AUTH_KEY',

    authSecret: 'YOUR_AUTH_SECRET',

    accountKey: 'YOUR_ACCOUNT_KEY',

    sessionToken: '',

  },

  appConfig: {

    chatProtocol: {

      Active: 2,

    },

    debug: false,

    endpoints: {

      apiEndpoint: 'https://api.quickblox.com',

      chatEndpoint: 'chat.quickblox.com',

    },

    on: {

      async sessionExpired(handleResponse: any, retry: any) {

        console.log(`Test sessionExpired... ${handleResponse} ${retry}`);

      },

    },

    streamManagement: {

      Enable: true,

    },

  },

};

Replace the placeholder values with the credentials from the QuickBlox dashboard.

Set Up the Project Structure

Organize src into these subdirectories:

  • assets/CustomTheme/ — holds CustomTheme.ts, where you define your app’s color scheme
  • layout/Auth/ — holds Auth.tsx and Auth.scss, the shared layout for sign-in/sign-up
  • styles/ — SCSS files for custom styling

Add SignIn and SignUp files directly in src.

This separation keeps authentication, layout, and styling concerns independent and easier to maintain as the app grows.

Create the SignIn, SignUp, and Auth Components

  • SignIn — a login form (built with @mui/material) that authenticates an existing user
  • SignUp — a registration form for creating a new user
  • Auth — the shared layout wrapping SignIn and SignUp, managing the transition between them

Full component code is available in the QuickBlox React chat sample on GitHub.

Build the Main App Component with the Chat Provider

Add state for currentUser, authorized, theme, and errorMessage, then wrap your app in QuickBloxUIKitProvider:

import { useState } from 'react';

import { QuickBloxUIKitProvider, QuickBloxUIKitDesktopLayout } from 'quickblox-react-ui-kit';

 

function App() {

  const [authorized, setAuthorized] = useState(false);

  const [theme, setTheme] = useState('lightTheme');

  const [errorMessage, setErrorMessage] = useState('');

 

  const initLoginData = {

    userName: '',

    password: '',

  };

  const [currentUser, setCurrentUser] = useState(initLoginData);

 

  return (

    <QuickBloxUIKitProvider

      maxFileSize={100 * 1000000}

      accountData={{ ...QBConfig.credentials, sessionToken: '' }}

      loginData={{

        userName: currentUser.userName,

        password: currentUser.password,

      }}

    >

      <div className="App">

        <QuickBloxUIKitDesktopLayout theme={new CustomTheme()} />

      </div>

    </QuickBloxUIKitProvider>

  );

}

 

export default App;

maxFileSize sets the maximum attachment size, accountData provides SDK connection details, and loginData passes the current user’s credentials.

Add Authentication Routes

Add three routes: / (the chat interface, shown only if authorized), /sign-in, and /sign-up.

import { Routes, Route } from 'react-router-dom';

import { QuickBloxUIKitProvider, QuickBloxUIKitDesktopLayout } from 'quickblox-react-ui-kit';

import CustomTheme from './assets/CustomTheme/CustomTheme';

import Auth, { UserData } from "./layout/Auth/Auth";

import SignIn from "./SignIn/SignIn";

import SignUp from "./SignUp/SignUp";

 

function App() {

  // ...state as above

 

  return (

    <QuickBloxUIKitProvider

      // ...

    >

      <div className="App">

        <Routes>

          <Route

            path="/"

            element={

              authorized ? (

                <div>

                  <QuickBloxUIKitDesktopLayout theme={new CustomTheme()} />

                </div>

              ) : (

                <Auth>

                  <SignIn errorMessage={errorMessage} />

                </Auth>

              )

            }

          />

          <Route

            path="/sign-in"

            element={

              <Auth>

                <SignIn errorMessage={errorMessage} />

              </Auth>

            }

          />

          <Route

            path="/sign-up"

            element={

              <Auth>

                <SignUp errorMessage={errorMessage} />

              </Auth>

            }

          />

        </Routes>

      </div>

    </QuickBloxUIKitProvider>

  );

}

 

export default App;

Configure QuickBloxUIKitProvider

The UI Kit follows an MVVM pattern: the Presentation layer (your components inside QuickBloxUIKitProvider) talks to the DataDomain (DataSource, UseCases, Repositories), which manages the connection to QuickBlox.

Initialize the SDK and set up session handling:

const prepareSDK = async (): Promise<void> => {

  if ((window as any).QB === undefined) {

    if (QB !== undefined) {

      (window as any).QB = QB;

    } else {

      let QBLib = require('quickblox/quickblox.min');

      (window as any).QB = QBLib;

    }

  }

 

  RemoteDataSource.initSDK({

    appIdOrToken: QBConfig.credentials.appId,

    authKeyOrAppId: QBConfig.credentials.authKey,

    authSecret: QBConfig.credentials.authSecret,

    accountKey: QBConfig.credentials.accountKey,

    config: QBConfig.appConfig,

  });

  remoteDataSource.setInitSDKSuccessed();

 

  QB.chat.onSessionExpiredListener = (error: any) => {

    if (error) {

      console.log('onSessionExpiredListener - error: ', error);

    } else {

      logoutUIKitHandler();

    }

  };

};

 

Create a session:

function createSession(): Promise<any> {

  const QBS = (window as any).QB;

  return new Promise((resolve, reject) => {

    QBS.createSession((sessionErr: any, sessionRes: any) => {

      if (sessionErr) reject(sessionErr);

      else resolve(sessionRes);

    });

  });

}

 

Log in:

const loginAction = async (): Promise<void> => {

  if (currentUser.userName.length > 0 && currentUser.password.length > 0) {

    remoteDataSource

      .loginWithUser(currentUser)

      .then(async () => {})

      .catch((loginErr) => {

        setErrorMessage(loginErr);

        setAuthorized(false);

        navigate('/sign-in');

      });

  }

};

 

Log out:

function logOutActions() {

  const QBS = (window as any).QB;

  QBS.chat.disconnect();

  QBS.destroySession(() => null);

}

 

Create a user:

const createUser = (user: QBUser): Promise<QBUser> => {

  const QBLib = (window as any).QB;

  return new Promise((resolve, reject) => {

    const userLoginData = {

      login: user.login,

      password: user.password,

      full_name: user.full_name,

      custom_data: user.custom_data || 'You could store in this field any string value or null',

    };

 

    QBLib.users.create(userLoginData, (createErr: any, createRes: any) => {

      if (createErr) reject(createErr);

      else resolve(createRes);

    });

  });

};

 

With prepareSDK, createSession, loginAction, logOutActions, and createUser in place, your app can authenticate users and connect them into a working chat session.

Next Steps

You’ve now created the foundation of a React chat application using the QuickBlox React UI Kit.

From here, you can explore additional messaging functionality and customize the application for your use case:

  • Customize the React UI Kit
  • Configure one-to-one and group conversations
  • Add file and image sharing
  • Configure typing indicators and message status
  • Add push notifications
  • Add voice and video calling

For deeper implementation details, see:

Frequently Asked Questions

What is the QuickBlox React UI Kit?

The QuickBlox React UI Kit is a set of prebuilt React components for adding chat functionality to web applications. It works with the QuickBlox JavaScript SDK and provides ready-made interfaces for conversations, messages, attachments, typing indicators, and other common chat features.

Do I need to build a chat backend for a React app using QuickBlox?

No. QuickBlox provides the backend infrastructure and SDKs needed for real-time messaging, user management, chat dialogs, message history, and related functionality. The React UI Kit provides the user interface components that sit on top of this messaging infrastructure.

Can I customize the QuickBlox React UI Kit?

Yes. You can customize the appearance of the React UI Kit, including colors and fonts, to better match your application's design. You can also configure components and behavior depending on your implementation requirements.

Does the QuickBlox React UI Kit support file attachments and typing indicators?

Yes. The UI Kit supports common chat features including file attachments and typing indicators, as well as real-time messaging and other functionality provided through the QuickBlox SDK.

Can I use the QuickBlox React UI Kit in an existing React application?

Yes. You can install the QuickBlox JavaScript SDK and React UI Kit packages in an existing React project and integrate the UI Kit into your application's component structure.