1. A way for end-users to signup (email & password is sufficient)
2. A way for users to login in.
3. Use CometChat Chat Widget and configure it such that:
- List of Users/Contacts is visible to all users with the search bar.
- All users can initiate voice call each other.
4. Login the logged-in user to CometChat
5. Add API call when a user registers so that the user is created in CometChat
Each subfolder and file will be explained in detail in the following section:
- img: Contains images for the application such as logo, background, and so on.
- favicon.ico: It is favicon.ico for the application.
- index.html: Root HTML file. HTML file for the home page.
- login.html: HTML file for the login page.
- screenshots: This folder contains images that are used for the README.md file.
- README.md: Describes the application and provides steps by steps to run the application.
- Step 1: You need to have Node.js installed on your machine.
Configuring CometChat SDK
- Head to CometChat Dashboard and create an account.
- After registering a new account, you need to the log in to the CometChat dashboard.
- Select this newly added app from the list.
- From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, which will be used later.
- Navigate to the Users tab, and delete all the default users (very important).
- Navigate to the Groups tab and delete all the default groups (very important).
- Create a file called config.js in the js folder of your project
- Import and inject your secret keys in the config.js file containing your CometChat and Firebase in this manner.
10. Make sure to include config.js in your .gitignore file from being exposed online.
Setting Up Firebase Project
To begin using Firebase, you’ll need a Gmail account. Head over to Firebase and create a new project.
Firebase provides support for authentication using different providers. For example, Social Auth, phone numbers, as well as the standard email and password method. Since you will be using the email and password authentication method in this tutorial, you need to enable this method for the project you created in Firebase, as it is by default disabled.
Under the authentication tab for your project, click the sign-in method and you should see a list of providers currently supported by Firebase.
Next, click the edit icon on the email/password provider and enable it.
Now, you need to go enable Firebase Realtime Database. We will Firebase Realtime Database to store the information of the users in the application. Please refer to the following part for more information.
Please follow the guidance from Firebase. After following all steps, you will see the database URL. If you just need to update the databaseURL property in your config.js file with that value.
On the other hand, your Firebase real-time database will be expired in the future. To update the rules you just need to select the “Rules” tab and update the read/write as you can see from the image below. Please do not forget to set the .indexOn for the “users” because we need to get the user’s information by email. Therefore, we need to make the query successful.
On the project’s overview page, select the add app option and pick web as the platform. After finishing this step, you should see your Firebase credentials as follow, please update your .env file with your Firebase credentials.
Once you’re done registering the application, you’ll be presented with a screen containing your application credentials.
The above image describes the data structure of the users. A user will contain the following information:
- avatar: the user’s avatar.
- email: the user’s email.
- id: the user’s id.
Configuring Styling for the Application
Setting Up Images for the Application
Configuring the Firebase File
This firebase.js file is responsible for interfacing with Firebase authentication and database services. Also, it makes ready our email/password authentication service provider enabling us to sign in with email/password. Secret keys will be retrieved from the config file. As mentioned above, please do not share your secret keys on GitHub. Please create a file which is called firebase.js file inside the js folder.
The Login Page
*Note: The forgot password text is used to make the UI more attractive, we have not had the forgot password feature, yet.
Create login.html in the source folder. The source code can be found from here.
- UUID: each created user should have a unique id. Hence, the UUID library is used to generate a unique key for each account.
- Validator: it is used to validate the login/sign-up form. Because you need to ensure that the input information is valid before creating a new account or letting a user log in to the chat application.
- Firebase: it helps us to interact with Firebase and use Firebase services such as Firebase Authentication, Firebase Realtime Database, and so on.
The Auth.js File
The Util.js File
The Login.js File
The file will take responsibility for handling the business logic for the login page. This file contains functions which can let the user register a new account or log in to the application. The full source code can be found from here.
After clicking the sign-up button, the registerNewAccount function will be triggered. It accepts a JSON object as a parameter and the JSON object contains the user’s information including the user’s email, user’s password, and user’s password confirmation. Before proceeding with further actions, the user’s information needs to be validated by using the validateNewAccount function. If the information is valid, the user’s avatar and user’s id will be generated. As mentioned before, each user should have a unique id. After that, the application will register a new account by using the Firebase Authentication service and then register an account on CometChat by using the CometChatWidget. You can refer to the below code snippet for more information.
How to Create Chat Widget on CometChat
- Step 1: Go to the CometChat dashboard by using your created account and then go to your created app. Hopefully, you had one after finishing the Configuring CometChat section.
- Step 2: You need to choose the Chat Widget option on the left sidebar. You will be redirected to the page in which you can create a new chat widget.
- Step 3: On the current page, you need to choose the New Chat Widget option, CometChat system will create a new chat widget for you and redirect you to the created chat widget.
- Step 4: You need to update your config.js with the following keys.
- Step 5: We need to turn off some features, because we just want to build a voice chat app, not a full chat application. At this step, please select the main settings section to customize its feature as follows.
- Step 6: We expand the Core Chat section on the right side, and configure the options as follows
As we can see, you don’t need to achieve the text chat feature. Therefore, we turn all of the options that are related to the text chat feature.
- Step 7: We configure the Voice and Video Calling/Conferencing section like this.
- Step 9: We need to configure the Navigation section as follows.
As we can see, we just need to show the list of users, we do not need to have the text chat feature. Therefore, we will hide the chats section, and the groups section.
The Home Page
- Step 1: Create index.html file in your project folder. The full source code can be found here.
The Index.js File
This file will take responsibility for showing greeting to the authenticated user on the header, handling the logic when clicking on the Logout button, and launching the CometChat Widget.
The full source code can be found from here.
After clicking the “Logout” button, we should call the logout function which is provided by the CometChat team. If the function is executed successfully, we need to redirect the user to the login page. You can refer to the below code snippet.
About the Author
Hiep Le is a software engineer. He takes a huge interest in building software products and is a full-time software engineer. Most of his work is focused on one thing - to help people learn.