Back to Freecodecamp

Authentication with Socket.IO

curriculum/challenges/english/blocks/advanced-node-and-express/589fc831f9fc0f352b528e77.md

latest4.5 KB
Original Source

--description--

Currently, you cannot determine who is connected to your web socket. While req.user contains the user object, that's only when your user interacts with the web server, and with web sockets you have no req (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple!

passport.socketio@~3.7.0, connect-mongo@~3.2.0, and cookie-parser@~1.4.5 have already been added as dependencies. Require them as passportSocketIo, MongoStore, and cookieParser respectively. Also, we need to initialize a new memory store, from express-session which we previously required. It should look like this:

js
const MongoStore = require('connect-mongo')(session);
const URI = process.env.MONGO_URI;
const store = new MongoStore({ url: URI });

Now we just have to tell Socket.IO to use it and set the options. Be sure this is added before the existing socket code and not in the existing connection listener. For your server, it should look like this:

js
io.use(
  passportSocketIo.authorize({
    cookieParser: cookieParser,
    key: 'express.sid',
    secret: process.env.SESSION_SECRET,
    store: store,
    success: onAuthorizeSuccess,
    fail: onAuthorizeFail
  })
);

Note that configuring Passport authentication for Socket.IO is very similar to the way we configured the session middleware for the API. This is because they are meant to use the same authentication method — get the session id from a cookie and validate it.

Previously, when we configured the session middleware, we didn't explicitly set the cookie name for session (key). This is because the session package was using the default value. Now that we've added another package which needs access to the same value from the cookies, we need to explicitly set the key value in both configuration objects.

Be sure to add the key with the cookie name to the session middleware that matches the Socket.IO key. Also, add the store reference to the options, near where we set saveUninitialized: true. This is necessary to tell Socket.IO which session to relate to.

<hr>

Now, define the success, and fail callback functions:

js
function onAuthorizeSuccess(data, accept) {
  console.log('successful connection to socket.io');

  accept(null, true);
}

function onAuthorizeFail(data, message, error, accept) {
  if (error) throw new Error(message);
  console.log('failed connection to socket.io:', message);
  accept(null, false);
}

The user object is now accessible on your socket object as socket.request.user. For example, now you can add the following:

js
console.log('user ' + socket.request.user.username + ' connected');

It will log to the server console who has connected!

Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135#authentication-with-socketio-9" target="_blank" rel="noopener noreferrer nofollow">check out the project up to this point</a>.

--hints--

passport.socketio should be a dependency.

js
  const url = new URL("/_api/package.json", code);
  const res = await fetch(url);
  const packJson = await res.json();
  assert.property(
    packJson.dependencies,
    'passport.socketio',
    'Your project should list "passport.socketio" as a dependency'
  );

cookie-parser should be a dependency.

js
  const url = new URL("/_api/package.json", code);
  const res = await fetch(url);
  const packJson = await res.json();
  assert.property(
    packJson.dependencies,
    'cookie-parser',
    'Your project should list "cookie-parser" as a dependency'
  );

passportSocketIo should be properly required.

js
  const url = new URL("/_api/server.js", code);
  const res = await fetch(url);
  const data = await res.text();
  assert.match(
    data,
    /require\((['"])passport\.socketio\1\)/gi,
    'You should correctly require and instantiate "passport.socketio"'
  );

passportSocketIo should be properly setup.

js
  const url = new URL("/_api/server.js", code);
  const res = await fetch(url);
  const data = await res.text();
  assert.match(
    data,
    /io\.use\(\s*\w+\.authorize\(/,
    'You should register "passport.socketio" as socket.io middleware and provide it correct options'
  );