Develop Reference

Integrating socket.io with express is it a good idea? and if so how to go about it?

I'm must say I'm very new to back end development,
I'm currently working on an exercise project of making a fake money poker website. I use Node.js socket.io/express-session/passport
At first, I mainly used express with a HTTP server listening on one port. Averagely Like this:
const express = require("express")
const app = express()
app.get('/home',connectEnsureLogin.ensureLoggedIn("/loginPage"),function(req, res) {
//console.log(req.user.username+": sessionId: "+req.sessionID);
return res.sendFile( __dirname+"/website/index.html");
}
);
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log("Poker site Server started on ${PORT})")
The website wasn't working very fast. When a client joined a poker table they needed to ask the server every second for new updates on the state of the game so that was a lot of HTTP requests coming into my server. So I decided without much theoretical certitude that it seemed like a good idea: To have the server use socket.io sockets to hand info for clients that are in poker tables, but when they are not in poker tables and are just browsing the site I use a HTTP server to handle their request. Code wise I feel I haven't really managed to do this correctly. My code with Express, express-session, and passport combined makes sure only to hand information to users authenticated. But since The socket.io servers seem totally separate from all the express code, they don't share the same authentication functionality as the express code. So I need to somehow link my express and socket.io code so I can check if a client is authenticated before handing him any info via sockets. here is the system I'm currently using I didn't put all my code but I tried to summarize the essential parts:
const express = require('express');
const app = express();
//i creat the http server that is somehow linked with my express app when this server is listening
//it will call express handling methods.
const http = require('http').Server(app);
const io = require('socket.io')(http);
const path = require("path");
const passport = require("passport");
const connectEnsureLogin = require('connect-ensure-login');
const AccountInfo = require("./AccountInfo").AcccountInfo;
const expressSession = require('express-session')({
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: false
});
//passport setup
passport.use(AccountInfo.createStrategy());
passport.serializeUser(AccountInfo.serializeUser());
passport.deserializeUser(AccountInfo.deserializeUser());
//body parser
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
//Sessions
app.use(expressSession);
//!!!!here is where I connect socket.io with the sessions i found this in another forum.
// thanks to this code I can access the session that a client is using when their socket connects.
io.use(function(socket, next) {
expressSession(socket.request, socket.request.res, next);
});
//so when a clients socket connects i save his socket.id to his session.
io.on('connection',function(socket) {
console.log(`socket.io connected: ${socket.id}`);
// save socket.io socket in the session
socket.request.session.socketio = socket.id;
socket.request.session.save();
});
//once the clients socket is connected directly after the clients sends a HTTP "PUT" request
//and this code answers it.
app.post('/Table/ConnectSocketToTable',Utilities.ensureLoggedIn(),function(req, res)
{
//I retrieve the socket using the socket.id I had saved in the session.
let socket = io.sockets.sockets.get(req.session.socketio);
let player = GetPlayerFromAnyTable(req.user.username);
if(player==null)//the player can't be in two tables at once
{
//since now we are in an express callback, express made sure that the client is indeed
//authenticated with the middle-ware: "Utilities.ensureLoggedIn()" also just before I made sure
//the client is not in another table. So we are good to go we can now link the socket to the table
//and have the client receive all the info about the state of his table
socket.join("table-"+req.session.passport.table);
req.user.socket = socket;
let table = GetTable(req.session.passport.table);
table.sitPlayer(req.user);
}
else
{
//the player is already connected so we just update his socket to a new one
player.requestUnseat=false;
player.account.socket =io.sockets.sockets.get(req.session.socketio);
}
socket.on('chatMessage', function(data,time) {
socket.to("table-"+req.session.passport.table).emit("chatMessage",req.user.username,data,time);
console.log(`send chat message : ${data}`);
});
socket.on('disconnect', function() {
GetTable(req.session.passport.table).requestUnsitUsername(req.user.username);
console.log(req.user.username +" was disconnected so now requesting unsit");
});
console.log("the socket of "+req.user.username+" has being connected to table-"+req.session.passport.table);
return res.sendStatus(200);
});
So for me, the way I'm doing this seems pretty bad since "app.post('/Table/ConnectSocketToTable'...)" and "io.on('connection',...)" are two different request listening functions I feel I should probably just do everything in one.
So should I do all the checks in the "io.on('connection',...)" function and somehow manage to make sure the client is authenticated within the callback of io.on('connection',callback) ?
or should I find a way to make the socket connection happen in the initial HTTP call the client uses to join a table, which is what I initially wanted?
But really I'm kinda lost because I'm telling myself maybe I don't even need Express anymore and I should just use socket.io for everything. I seem to clearly lack the general understanding that would allow me to know what approach I should be going for so any help is welcome. I started doing this self-made exercise to get into server-side development but also if there is any other recommended exercise to start up with back-end development I'm definitely interested in hearing about it.

From random testing I found out how to authenticate to my express session from the socket code you don't actually have to do it in the callback of io.on('connection',callback) you just need to add a few more middleware functions like this:
//connecting express sessions
io.use(function(socket, next) {
expressSession(socket.request, socket.request.res, next);
});
//connecting passport
io.use(function(socket, next) {
passport.initialize()(socket.request, socket.request.res, next);
});
//connecting passport sessions
io.use(function(socket, next) {
passport.session()(socket.request, socket.request.res, next);
});
//check if client is authenticated returns error if authentication failed
io.use((socket, next) => {
console.log("started socket Connection");
if(!socket.request.isAuthenticated&&socket.request.isAuthenticated())
{
socket.request.session.socketio = socket.id;
socket.request.session.save();
console.log("table "+socket.request.session.passport.table);
console.log("user.username "+socket.request.user.username);
console.log(`is authentificated`);
next();
}
else
{
console.log(`failed socket connection`);
next(new Error("unauthorized"));
}
});```

Where to store user session in Sapper app

I have started moving an app from React to Sapper. I am new to SSR architecture and want to know what the best way is to store the user session and data.
I am using Firebase for my auth and database. After using the client side firebase API to get the session keys and other user data how would I store the data? I have seen some tutorials making a user.js store, but in the Sapper docs I see it recommends using the session store. So which is better? And what would be the flow from client side to the server side session store?
E.g. If I were to make a login folder under which I have the svelte component and the server side route. Would there be a post "endpoint" that would set the session.user?

It's a bit tricky. I managed to get this working with both client and server using a authentication middleware
https://github.com/itswadesh/sapper-ecommerce/blob/master/src/server.js

The best way I have found so far is using JWT's:
Either get a JWT from a third party (Google, facebook, github) or sign your own.
server.js:
express()
.use(
compression({
threshold: 0
}),
sirv('static', {
dev
}),
cookieParser(),
bodyParser.json({strict: false}),
bodyParser.urlencoded({ extended: false }),
async (req, res, next) => {
const token = req.cookies['AUTH']
const profile = token && !dev ? await getBasicUserInfo(token) : false
return sapper.middleware({
session: () => {
return {
authenticated: !!profile,
profile
}
}
})(req, res, next)
}
)
then with every request just add 'credentials':'include to your requests to the server.
you will have to verify the token on every request but this method makes you app super scalable

Heroku Google OAuth Error

I am getting a very frustrating error. When I make the google OAuth request in my local development environment it is working perfectly. (using passport authentication). Pushing to Heroku I am getting a status 200 versus the status 302 I get in development that redirects me to the google oauth login page. The screen is just showing up blank with no errors. I have tried to intentionally put an error with the client ID, but it isn't even registering the request at all.
Log-In
Brings me to a blank screen on heroku, and registers no request at all.
Please Help!
Server-Side Passport:
// .use is generic register
passport.use(
new GoogleStrategy(
{
clientID: keys.googleClientID,
clientSecret: keys.googleClientSecret,
// need url for where user should go on callback after they grant permission to our application on google auth page
callbackURL: "/auth/google/callback",
// have to authorize this callback url in the google oauth console.developors screen because of security reasons
proxy: true // trust the proxy our request runs through so heroku callbacks to the correct url
},
async (accessToken, refreshToken, profile, done) => {
// after authenticated on the next get request to google it will call this with the accessToken, aka callback function
// console.log("access token", accessToken);
// console.log("refresh token", refreshToken);
// console.log("profile", profile);
// check to see if user id already exists before saving it to DB so it does not overlap...mongoose query...asynchronous operation
// using async await
const existingUser = await User.findOne({
googleId: profile.id
});
// get promise response
if (existingUser) {
// already have record
// finish passport auth function
return done(null, existingUser); // passes to serialize user so serialize can pull that user id
}
// we don't have a new record so make one
const user = await new User({
// creates new model instance of user
googleId: profile.id
}).save(); // have to save it to DB
// get promise from save since asynchronize, then finish with response
done(null, user); // passes to serialize user so serialize can get that id
}
)
); // create new instance of GoogleStrategy
Server-Side API:
app.get(
"/auth/google", // passport, attempt to authenticate the user coming in on this route
passport.authenticate("google", {
// google strategy has internal code, that is 'google', so passport will know to find the google passport authenticator
scope: ["profile", "email"] // options object
// specifies to google we want access to this users profile and email information from their account, these are premade strings in the google oauth process not made up
})
);
// in this callback route they are going to have the code, and google will see that and it will handle it differnetly by exchanging the code for an actual profile, it will call the next part of the GoogleStrategy, aka the accessToken to be saved to Database
// #route GET auth/google/callback
// #desc Get callback data from google to redirect user if signed in
// #access Private can only access this after signed in
app.get(
"/auth/google/callback",
passport.authenticate("google"),
// after authenticate process is done, send user to correct route
(req, res) => {
// redirect to dashboard route after sign-in
res.redirect("/surveys");
// full HTTP requrest, so it reloads versus AJAX request which uses react and redux and is much faster
}
);
Client - Side
<div
className="collapse navbar-collapse nav-positioning"
id="navbarNav"
>
<ul className="navbar-nav">
<li className="nav-item google-link">
<a className="nav-link" href="/auth/google">
Google Login
</a>
</li>
</ul>
</div>
Index.js
// Route file, or starter file
const express = require("express");
// node.js does not have support from E6,
// so we use common js modules
// import vs require :
// common vs ES6
// bring in mongoose
const mongoose = require("mongoose");
// tell express it must make use of cookies when using passport
const cookieSession = require("cookie-session");
const passport = require("passport");
// pull in body-parser middleware to get req.body
const bodyParser = require("body-parser");
// connect it to DB in keys so it is not posted to github
const keys = require("./config/keys");
//connect mongoose
mongoose.connect(keys.mongoURI);
// ########## MODELS ################
// THIS MUST BE ABOVE WHERE YOU USE IT, SO ABOVE PASSPORT
require("./models/User");
require("./models/Survey");
// don't have to require recipient because its included inside Survey
// pull in passport service, we are not returning anything in passport, so we do not need const passport because nothing to assign
require("./services/passport");
// Generate a new application that represents a running express app
const app = express(); // vast majority use single app
// this will listen for incoming requests, and route them on to different route handlers
// parser so every time a req has a req.body comes in then it will be assigned to the req.body property
app.use(bodyParser.json());
app.use(
cookieSession({
// age for auth cookies to last... 30 days
maxAge: 30 * 24 * 60 * 60 * 1000,
// give cookie a key
keys: [keys.cookieKey]
})
);
// tell passport to use cookies
app.use(passport.initialize());
app.use(passport.session());
// done with authentication flow
//require that file returns a function, which is then immediately called with the app object
require("./routes/authRoutes")(app);
require("./routes/billingRoutes")(app);
require("./routes/surveyRoutes")(app);
if (process.env.NODE_ENV === "production") {
// if in production make sure express will serve up production assets
// like main.js
app.use(express.static("client/build"));
// Express will serve up index.html file if it doesn't recognize the routes
const path = require("path");
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
// dynamically figure out what port to listen to... Heroku, heroku will inject env variables in moment of deploy, but only works in production not development environment
const PORT = process.env.PORT || 5000; // if heroku port exists assign it that, else, assign it 5000
app.listen(PORT); // listen for requests and route them to the correct handler on port 5000
/* ###### HEROKU PREDEPLOY ##### */
// specifiy node version and start script for heroku in package.json
// make .gitignore for dependencies which should not be committed on deploy, heroku will install them itself
// app.use wires up middleware for our application
// ############### TIPS
/*
Google first, because its been asked before...
Run in module
*/

I have the same issue with this problem too. I solve it by define an absoluteURI on the config keys. because google look at url callback at https:// and heroku path is http:// which it should be fix when you add proxy: true but it is not.
On the config keys add
dev: absoluteURI: localhost:5000
prod: absoluteURI: http://herokupath
// .use is generic register
passport.use(
new GoogleStrategy(
{
clientID: keys.googleClientID,
clientSecret: keys.googleClientSecret,
callbackURL: absoluteURI + "/auth/google/callback",
proxy: true
},

I believe the problem is that your app on heroku is only listening for http requests. If your link to the OAuth page has the form "https://your-domain.com/auth/google", then your app's routes will not match against that route (because of the https) and so your app will show a blank page, just like it will show for any route that it's not listening for.
One way to get around this problem and still use https (and therefore still show the secure logo next to the url) is to use https for every link except for this OAuth link. Your get and post requests within the app will be using http, but any link visible on the url will use https. Something like this would work:
app.use(function(req, res, next) {
if (process.env.NODE_ENV === "production") {
const reqType = req.headers["x-forwarded-proto"];
// if not https redirect to https unless logging in using OAuth
if (reqType !== "https") {
req.url.indexOf("auth/google") !== -1
? next()
: res.redirect("https://" + req.headers.host + req.url);
}
} else {
next();
}
});
And any frontend link that points to the OAuth login page should be an http link

Please take a look at this SO answer. It looks like your scope params need to be modified for the google auth to work.

express csurf (csrf middleware) not working with XSRF in angularjs

Express and Angular both have their own csrf middleware. I cannot get them to work at all and there does not seem to be any coherent guide on the internet about this. My understanding is that express 4.0 uses csurf as its csrf middleware, and I have to set X-XSRF-TOKEN on angularjs.
There are scattered pieces about how to do this, with information that sometimes conflict:
How to test endpoints protected by csrf in node.js/express
angular, django and csrf
CSURF Angular Implementation
But I have tried them and they do not work. My _csrf is always undefined on the Angular clientside, and csurf always gives success despite no csrf token was given from the client.
Furthermore, I am using express-jwt to keep user session, so I am unsure if this will interfere with cookie-session (required by curf).
Here is my simple angular/express app for handling register with csrf (not working):
angular app.js
var app = angular.module('app', ['ngCookies', 'ui.router']);
app.config(function($stateProvider) {
$stateProvider.state('register', {
url: '/register',
controller: 'RegisterCtrl',
templateUrl: 'views/register.html'
});
});
// register csrf
app.run(['$http', '$cookies', function($http, $cookies) {
$http.defaults.headers.post['X-XSRF-TOKEN'] = $cookies.csrftoken;
}]);
// controller
app.controller('RegisterCtrl', ['$scope', '$cookies', '$http',
function($scope, $cookies, $http) {
$scope.data = { email: "", password: "", _csrf: $cookies._csrf};
$scope.submitForm = function() {
// This will alert 'undefined'
alert("This is csrf token: " + $scope.data._csrf);
$http.post('/register', data).success(function(done) {
console.log('success');
var jwt_token = done["jwt_token"];
// save token to local storage.
}).error(function(err) {
console.log('error');
});
}
}
]);
express app.js
var express = require('express');
var app = express();
var http = require('http').Server(app);
var expressJwt = require("express-jwt");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true});
app.use(bodyParser.json());
// csrf setup
var session = require('cookie-session');
var csrf = require('csurf');
app.use(session({
secret: 'keyboard cat'
}));
app.use(csrf());
// This part taken from csurf guide:
// https://github.com/expressjs/csurf
app.use(function(err, req, res, next) {
if (err.code !== 'EBADCSRFTOKEN') return next(err)
res.status(403);
res.send('session has expired or form tampered with');
});
app.post("/login", function(req, res) {
var email = req.body.email;
var password = req.body.password;
// save user to db ...
var jwt_token = // create and sign jwt token to be given back to registered user
res.json({"jwt_token": jwt_token});
});
http.listen(3000, function() {
console.log("Express started");
});
Now, if I submit the register form, the alert() will say the _csrf is undefined. On the expressjs side, app.post('/login') is run all the way through without having failed even though the csrf token should be bad (undefined since csrf on angular side is not working). This indicates that csurf is not working at all on the express side.
Can someone provide an in-depth explanation to integrating csurf in express 4.0, xsrf in Angular, and have them work together?

I had problems integrating both as well, and reached the following structure (just relevant parts):
express app.js
var cookieParser = require('cookie-parser');
var session = require('cookie-session');
var csrf = require('csurf');
app.use(session({
secret: 'keyboard cat'
}));
app.use(cookieParser('secret'));
app.use(csrf());
app.use(function (req, res, next) {
res.cookie("XSRF-TOKEN",req.csrfToken());
return next();
});
In AngularJS side there is no need of changes. It identifies XSRF-TOKEN automatically.
Now, to explain the piece of code above, i need to refer to the csurf lib. It is a middleware to handle all the csrf authentication, but it implements another csrf library, called csrf. This csrf returns a "class" with four functions (secret, secretSync, create, verify).
What csurf does is, when you call its middleware, generates a secret through the secretSync method and stores in your session. You can access that through the variable req.session.csrfSecret. However, it does not execute the req.csrfToken method, which uses this secret to return a csrf Token. To return correctly the csrf token, you need to call it in another middleware.
Another important thing, the name of the returning cookie must be "XSRF-TOKEN", and not "_csrf". Therefore, Angular identifies it automatically and appends to HTTP requests the "X-XSRF-TOKEN", which is identified by the csurf middleware.
Hope it helps.

Maintain sessions in Node.js

How can I maintain my SESSIONS in Node.js?
For example, I want to store UserID in SESSION using Node.js. How can I do that in Node.js? And can I use that Node.js SESSION in PHP too?
I want the following in Node.js:
<?php $_SESSION['user'] = $userId; ?>

First install the session package
npm install express-session --save
Initialization of the session on your server page
var express = require('express');
var session = require('express-session');
var app = express();
app.use(session({secret: 'ssshhhhh', saveUninitialized: true, resave: true}));
Store session
sess = req.session;
var user_id = 1;
sess.user_id = user_id;
Access the session
sess = req.session;
sess.user_id

Let me divide your question in two parts.
How can I maintain my SESSIONS in Node.js?
Answer: Use express-session middleware for maintaining SESSIONS
Can I use that a Node.js SESSION in PHP too?
Answer:
Yes, you can use that session in PHP too, but keep in mind you have to store that session in the database.

ExpressJS has official session middleware, and it is also the current de-facto standard web framework for Node.js.
If you wish to implement session support on your own, this is how the implementation is normally done, upon every request:
Check if the cookie contains a session ID
If not, create a session object that is either stored in memory, on file, or in a database (or a combination of those), and set the session id in the response cookie to match this object's identifier.
If the cookie does contain a session ID, locate the session object by the ID.
Provide the obtained/created object from step 1 as the persisted session object for the request.
You will also have to implement some timeout mechanism, so that after a while the session objects are deleted, at least from memory.

You could use the express-session middleware.
Combine it with connect-redis or connect-mongo to store your sessions inside a database and save memory if memory is valuable to you (like in a cloud setup).
express-sessions (npm)
If you store it in, say, MongoDB, use the PHP MongoDB driver to pick it up from there.

You don't need to do it by yourself. There are some amazing modules in Node.js that handle this kind of things for you.
You can use session middleware from Express.js, as suggested before.
However, I'd recommend you to use Passport.js. This module does the authentication part for you, has a lot of strategies that you could integrate in your website (log in with Facebook, Google, Twitter, etc.), and deals with all the session stuff automatically, using serializeUser() and deserializeUser() functions whenever you need to.
You can take a look at this here, within the "Sessions" section: Configure Passport.js

Session that gives access/permission to view a user's area, as well as it's a credential, so we can use it over the application.
I used jsonwebtoken to make a token which will has the user's details with time after a successful login attempt by the user. I stored it in Redis, and it can be used for a pre-declared time limit.

To maintain a session is now older, and you should try with using JWT token. It is very effective and easy. But still to maintain the session in Node.js:
In your Express.js configuration:
var cookieParser = require('cookie-parser');
var session = require('express-session');
app.use(cookieParser());
app.use(session({
secret: 'secret',
resave: true,
saveUninitialized: true,
rolling: true,
cookie: {
path: '/',
maxAge: 60000 * 1000
},
name: 'SID'
}));
Store session after Login:
var session = req.session;
if (user) {
session.user = user._id;
session.save();
console.log(session);
}
Check Session from middleware:
var session = req.session;
if (session.user) {
req.userid = session.user;
next();
} else {
return res.status(401).send({
code: 401,
message: Constant.authentication_fails
});
}

Follow the below steps:
npm install express-session --save
Write the below code:
var express = require('express');
var session = require('express-session');
var app = express();
app.use(session({secret: 'your secret key', saveUninitialized: true, resave: true}));
var userId = 1234;
app.get('/', function (req, res, next) {
req.session.userId = userId;
});

Storing a session in Node.js is fairly easy but you need to understands its step, you could handle this manually, also you can use few NPM modules. Passport can help you to authenticate and login and store the session i would recommend you to read its documentation, Passport allow you to authenticate user with different other platform like Google, github many more.
If you are going to use passport use these below NPM module
Passport
Passport Local
Express-flash
Express-session
2 -Import these modules in your main app.js:
const flash = require('express-flash')
const session = require('express-session')
const passport = require('passport')
app.use(session({
secret:'secret',
resave:false,
saveUninitialized:false
}))
app.use(flash())
app.use(passport.initialize())
app.use(passport.session())
3- Create the passport.js file. You can name anything. So basic understanding behind this is that you have to check the valid user coming from your input form, and you have to compare the email id with your model. If it is valid, check the password and then return the user. Once that is done, serialize and deserialize your user data to store in the session..
I would recommend to check this part in the documentation for more clear understanding: Overview
const localStrategy = require('passport-local').Strategy
const bycrypt = require('bcrypt')
const User = require('../model/User')
const initalize = function(passport) {
const auth = async(email, password, done) => {
try {
const user = await User.findOne({email:email})
if(!user) {
throw new Error("Incorrect Email ..!")
}
const match = await bycrypt.compare(password, user.password)
if(!match) {
throw new Error('Incorrect Password..!')
}
return done(null, user)
}
catch (error) {
console.log(error)
done(null,false,error)
}
}
passport.use(new localStrategy({usernameField:'email'}, auth))
passport.serializeUser(function(user, done) {
done(null, user.id);
});
passport.deserializeUser(function(id, done) {
User.findById(id, function(err, user) {
done(err, user);
});
});
}
module.exports = initalize
4 - Now go to your login router and use the below code
const passport = require('passport')
require('../passport/passport')(passport)
routes.get('/signin', (req,res) => {
res.render('signin', {
pageTitle: 'sign in'
})
})
routes.post('/signin', passport.authenticate('local', {
successRedirect: '/welcome',
failureRedirect: '/',
failureFlash: true
}))

You can use sessions in Node.js by using the 'express-session' package in Node.js.
You have to install express and express-session in your application:
const express = require('express');
const session = require('express-session');
const app = express();
"secret" is used for the cookie, and we have to add some secret for managing a session.
"request" we use as a request variable as we use $_SESSION in PHP.
var sess;
app.get('/',function(req,res){ // Get request from the app side
sess = req.session;
sess.email; // Equivalent to $_SESSION['email'] in PHP.
sess.username; // Equivalent to $_SESSION['username'] in PHP.
});
Here is full documentation in Code for Geek about the session in Node.js if you want to learn in detail about the session in Node.js.

You can handle the session in two ways.
Using express-session
Using JWT web token and handle your own session (token-based session handling).
I think token-based session handling is more important rather than using express-session. You will get a problem when you scale your server and also a problem with some single device login situation.
For checking I have a token-based session handling Node.js folder structure. You can check it, and it may be helpful.