{"id":19732963,"url":"https://github.com/adelpro/socketio-auth","last_synced_at":"2025-04-30T02:33:06.483Z","repository":{"id":171047166,"uuid":"569175745","full_name":"adelpro/Socketio-auth","owner":"adelpro","description":"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.","archived":false,"fork":false,"pushed_at":"2023-01-23T08:06:37.000Z","size":629,"stargazers_count":4,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T21:51:13.338Z","etag":null,"topics":["nodejs","react","realtime","socket-io"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adelpro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-22T08:48:32.000Z","updated_at":"2023-07-28T11:33:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"b1d5540b-d1c0-4ea5-813b-51def925f002","html_url":"https://github.com/adelpro/Socketio-auth","commit_stats":null,"previous_names":["adelpro/socketio-auth"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adelpro%2FSocketio-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adelpro%2FSocketio-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adelpro%2FSocketio-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adelpro%2FSocketio-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adelpro","download_url":"https://codeload.github.com/adelpro/Socketio-auth/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251629365,"owners_count":21618153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nodejs","react","realtime","socket-io"],"created_at":"2024-11-12T00:28:40.245Z","updated_at":"2025-04-30T02:33:06.475Z","avatar_url":"https://github.com/adelpro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Socket-auth\n\nImplement User/Password Authentication in Socket.IO and ReactJS\n\nIn this project we will use ReactJS to build an authentication system to secure Socket.IO access.\n\n## In the front-end\n\nReactJS\nSocket.IO-Client\n\n## In the back-end\n\nNodeJS\nMongoDB\nSocket.IO\n\nReact makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just …\nAll data ( usernames, passwords, notifications, messages…) will be stored in MongoDB\n\n## Why using Socket.IO\n\nSocket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.\nPerformant\nIn most cases, the connection will be established with WebSocket, providing a low-overhead communication channel between the server and the client.\nReliable\nRest 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.\nScalable\nScale to multiple servers and send events to all connected clients with ease.\n\n## Authentication in Socket.IO\n\nA 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.\nPutting 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.\nIf we call Socket.IO in our application with query strings\n\n```\nconst connectSocket = io(process.env.REACT_APP_SERVER, {\n      query: {\n        username: \"user1\",\n        password: \"password1\"\n      }\n    });\n```\n\nAnd when we open Dev tools, as you can see, query params are included as plain text in the request urls\nIn our tutorial, we will use a more secure approach, we will send credentials as socket.emit() message\nThe a connection is established between and the server and the client\n\n![img](https://miro.medium.com/max/4800/1*eU0o4wRMa0-zStKzjNt-3w.webp)\n\n## Thank you\n\n[![Stargazers repo roster for @adelpro/Socketio-auth](https://reporoster.com/stars/adelpro/Socketio-auth)](https://github.com/adelpro/Socketio-auth/stargazers)\n\n[![Forkers repo roster for @adelpro/Socketio-auth](https://reporoster.com/forks/adelpro/Socketio-auth)](https://github.com/adelpro/Socketio-auth/network/members)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadelpro%2Fsocketio-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadelpro%2Fsocketio-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadelpro%2Fsocketio-auth/lists"}