In the previous article we have implemented chat functionality. Our users can join a room and start sending messages to a room. By implementing that we have covered very basic functionality of Phoenix channels.

Today I would like to go deeper and take a look at Presence feature, which ships with Phoenix since version 1.2. In this article, we will use Presence functionality to implement a list of online users and render the typing indicator next to a username.

In the previous articles, we have build interface for our chat application. We have also implemented the authentication functionality so our users can register and login to the app. Now it is time to implement the main feature of our application. The communication between users. We are going to cover the basics of working with Phoenix Channels.

In the previous article, we have implemented authentication solution. But we still have some spots to cover. Our users still can access every page even though they are not logged in.

Today we will introduce some improvements in our authentication solution and do it by using the Plugs.

Let’s get started.

Authentication solutions are broad. They contain registration and login functionality, as well as Email confirmation, password recovery, update user’s profile etc.

We are going to cover the most valuable part and implement registration and login functionality.

You can find some existing libraries for that. Addict for example. But we are learning, right? It would be better for us to understand how everything works under the hood.

So let’s get started.

Bootstrap 4 has been out recently. Let’s use the advantage of that and learn how to integrate front-end libraries into Phoenix projects.