https://github.com/adelpro/socketio-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.
https://github.com/adelpro/socketio-auth
nodejs react realtime socket-io
Last synced: 9 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/adelpro/socketio-auth
- Owner: adelpro
- Created: 2022-11-22T08:48:32.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-23T08:06:37.000Z (about 3 years ago)
- Last Synced: 2025-04-05T21:51:13.338Z (10 months ago)
- Topics: nodejs, react, realtime, socket-io
- Language: JavaScript
- Homepage:
- Size: 614 KB
- Stars: 4
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
## Thank you
[](https://github.com/adelpro/Socketio-auth/stargazers)
[](https://github.com/adelpro/Socketio-auth/network/members)