Socket-auth

Implement User/Password Authentication in Socket.IO and ReactJS

In this project we will use ReactJS to build an authentication system to secure Socket.IO access.

In the front-end

ReactJS
Socket.IO-Client

In the back-end

NodeJS
MongoDB
Socket.IO

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just …
All data ( usernames, passwords, notifications, messages…) will be stored in MongoDB

Why using Socket.IO

Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.
Performant
In most cases, the connection will be established with WebSocket, providing a low-overhead communication channel between the server and the client.
Reliable
Rest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect.
Scalable
Scale to multiple servers and send events to all connected clients with ease.

Authentication in Socket.IO

A lot of articles exist in the internet, showing how to create a chat application using Socket.IO with no authentication at all !!!, or using query strings.
Putting credentials (username and password ) in a query string is a bad security practice, urls are not treated as sensitive information , and all servers logs urls with visible credentials.
If we call Socket.IO in our application with query strings

const connectSocket = io(process.env.REACT_APP_SERVER, {
      query: {
        username: "user1",
        password: "password1"
      }
    });

And when we open Dev tools, as you can see, query params are included as plain text in the request urls
In our tutorial, we will use a more secure approach, we will send credentials as socket.emit() message
The a connection is established between and the server and the client

GitHub

https://github.com/adelpro/Socketio-auth