Ably's Fully Featured Scalable Chat App
Tags: webdev, programming, tutorial
Published: 2022-02-01 13:06:39

### Creating a Universal Authentication System with Auth0 for Ably's scalable chat application.

###

This is the second part of [Ably’s Fully Featured Scalable Chat App](https://ably.com/blog/fully-featured-scalable-chat-app) series. We have been working on creating a prototype for an open-source chat application that anyone could use at real-world scales of traffic, with many of the bells and whistles one would expect from a modern chat application. This means integrated media, notifications, and more.

If you want to try out this application yourself, you can get the code from [GitHub](https://github.com/ably-labs/fully-featured-scalable-chat-app) and follow the [README](https://github.com/ably-labs/fully-featured-scalable-chat-app#readme) on the steps for local setup.

Our goal is for you to be able to take the code and create your own scalable chat application or mix and match elements from it into other applications that need a chat element.

Ably handles the complexity of distributed messaging between clients, presence checks, and authorization of messages. By making use of [WebSockets](https://ably.com/topic/websockets) we can have persisted, realtime communication. Making use of Ably as a [Pub/Sub broker](https://ably.com/pub-sub-messaging), we will be able to have the consistent ordering of messages and reliable message ordering. You can try out these features by [signing up for a free Ably account](https://ably.com/signup).

Before starting on these elements, however, we need the absolute fundamentals of chat. One of the most crucial things to get right is the authentication of users.

Authentication requires:

*   All information we store on users to be secure
*   We should provide 2FA and reasonable methods to recover an account should login credentials be forgotten
*   Password resetting should be possible
*   We need to be able to assign permissions, user information, and more to a user

## 

## Starting Off

Prior to starting on our authentication system, we already have a few things in place.

We have a frontend server that is hosting a [ReactJS](https://reactjs.org/) application, compiled using [Snowpack](https://www.snowpack.dev/). On this, we have a basic page as seen below which allows for a user to set a username for themselves.

![Starting Off](https://images.ctfassets.net/23aumh6u8s0i/10HfnKU3xmw1aTcBXfQNwP/36fc8f2a57b7a7dc1f323cfd090c7ea8/Uploaded_from_Fully_Functional_Scalable_Chat_App)

Once a user sets their username, they’ll be taken to the main chat application page, which has the available hard-coded chat channels on the left, which you can click on to load a [React Component](https://reactjs.org/docs/react-component.html) on the right of the screen for chatting within that channel.

![Starting Off](https://images.ctfassets.net/23aumh6u8s0i/6UCmezwQzxO2oDofbC3JaX/5433dd6b9b2d8409fb4a6f79b599c8e5/ably-chat.png)

The chat uses Ably. When a user clicks on one of the chat channels on the left of the screen, we use the [Ably React Hooks](https://ably.com/blog/ably-react-hooks-npm-package) library to connect to one of Ably’s servers and subscribe to its associated [Ably Channel](https://ably.com/documentation/realtime/channels). For example, to subscribe to the Ably Channel for the ‘global-welcome’ chat room:

```javascript
[ channel ] = useChannel(“global-welcome”, (message) => {
// Append message to our chat box component
});
```

If we want to publish a message to this channel, we can make use of the channel object returned by the `useChannel` function:

```javascript
channel.publish("message", messageFromChatBox);
```

We do both of these within the FFS app inside our [ChatContainer](https://github.com/ably-labs/fully-featured-scalable-chat-app/blob/main/app/src/components/Chat/ChatContainer.jsx) code, which you can check if you’d like to see real examples.
[Read more...](https://auth0.com/blog/ably-fully-featured-scalable-chat-app/?utm_source=content_synd&utm_medium=sc&utm_campaign=auth0_ably)