Ably's Fully Featured Scalable Chat App

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 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 and follow the 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 we can have persisted, realtime communication. Making use of Ably as a Pub/Sub broker, 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.

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 application, compiled using Snowpack. On this, we have a basic page as seen below which allows for a user to set a username for themselves.

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 on the right of the screen for chatting within that channel.

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 library to connect to one of Ably’s servers and subscribe to its associated Ably Channel. For example, to subscribe to the Ably Channel for the ‘global-welcome’ chat room:

[ 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:

channel.publish("message", messageFromChatBox);

We do both of these within the FFS app inside our ChatContainer code, which you can check if you’d like to see real examples.
Read more...