同じブラウザで異なるセッションを管理したい

Question

開発環境

現在、ローカル環境での開発でTwitter認証を用いたwebアプリケーションを開発しています。
Docker、Expressを用いています。
動作確認の際、GoogleChromeとFirefoxの2画面でそれぞれ異なるTwitterアカウントで認証してテストしています。
Twitter認証にはpassport.jsを用いています。

バグの内容

最初にTwitter認証した人のセッションが、後からTwitter認証した人のセッションに書き換えられてしまいます。
これはpassport.session.idに保存したTwitterアカウントIDが上書きされていることから発覚しました。

質問内容

2画面の異なるブラウザないしは同じブラウザで動作確認を行う際に、Twitter認証を通した後にセッションが書き換えられないようにしたいです。
どのような処理をしたら良いでしょうか？

コード

以上のバグを解決するにあたって必要なコードを掲載します。
不備がありましたら教えてくださいますと助かります。すぐに追記いたします。

ディレクトリ構造

twipoke
 |-docker-compose.debug.yml
 |-docker-compose.yml
 |-twipoke
    |-bin
    |-node_modules
    |-public
    |-routes
    |   |-index.js
    |
    |-views
    |   |-home.ejs
    |   |-index.ejs
    |
    |-app.js
    |-Dockerfile
    |-package-lock.json
    |-package.json

Dockerfile

FROM node:12.18-alpine
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

docker-compose.yml

version: '3.4'

services:
  twipoke:
    image: dockerexpress
    build:
      context: twipoke
      dockerfile: ./Dockerfile
    ports:
      - 3000:3000

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var twitterConfig = require('./config/twitter_config');
var indexRouter = require('./routes/index');

// TwitterAPI設定-----------------------
var passport = require('passport');
var session = require('express-session');
var TwitterStrategy = require('passport-twitter').Strategy;
var TWITTER_CONSUMER_KEY = twitterConfig.consumer_key;
var TWITTER_CONSUMER_SECRET = twitterConfig.consumer_secret;
passport.serializeUser(function (user, done) {
  done(null, user.id);
});
passport.deserializeUser(function (obj, done) {
  done(null, obj);
});
passport.use(new TwitterStrategy({
    consumerKey: TWITTER_CONSUMER_KEY,
    consumerSecret: TWITTER_CONSUMER_SECRET,
    callbackURL: "http://localhost:3000/auth/twitter/callback" //本番環境はここを変える
}, function (token, tokenSecret, profile, done) {
    passport.session.id = profile.id;
    passport.session.twitter_token = token;
    passport.session.twitter_token_secret = tokenSecret;
    profile.twitter_token = token;
    profile.twitter_token_secret = tokenSecret;
    process.nextTick(() => {
      return done(null, profile);
    });
}));
//---------------------------------------

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'node_modules/socket.io/client-dist')));
// --------------------------
app.use(passport.initialize());
app.use(passport.session());
app.use(session({secret: 'secret'}));
// --------------------------

app.use('/', indexRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

index.js

var express = require('express');
var router = express.Router();
var passport = require('passport');
var loginController = require('../controllers/login');
var userInfoController = require('../controllers/userInfo');
var matchPreparationController = require('../controllers/matchPreparation');

/* GET home page. */
router.get('/', (req, res, next) => {
  res.render('index');
});

// twitter login OAuth------------------
router.post('/auth/twitter', passport.authenticate('twitter'));
router.get('/auth/twitter/callback', passport.authenticate('twitter', { successRedirect: '/home', failureRedirect: '/' }));
router.get('/home', loginController);
// -------------------------------------

// GET battle room create page
router.get('/room/:id', userInfoController);

router.get('/search', (req, res) => {
  res.render('search');
});

router.get('/matchPreparation/:id', matchPreparationController);

module.exports = router;

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>twipoke</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <div class="app-title">
      <h1>Twipoke</h1>
      <p>twitterフォロワーで対戦するアプリ</p>
    </div>
    <div class="app-image-container">
      <div class="left-arrow"></div>
      <div class="app-images"></div>
      <div class="right-arrow"></div>
    </div>
    <div class="app-info">
      <p>
        レート・ランキング機能対応
      </p>
      <p>
        あなたのフォロワーで競い合おう!!
      </p>
    </div>
    <form action="auth/twitter" method="POST">
      <button type submit>twitter</button>
    </form>
  </body>
</html>

Answer 1

自己解決しました。

sessionとcookieの理解が甘かったです。
ブラウザではcookieに任意のデータを記録するのがスマートでしたので、sessionに格納されたデータを使うのはナンセンスでした。
そのため、Twitter認証を通した時、passport.sessionに格納された諸データをcookie-parserを使ってcookieに移動させる必要がありました。

【下記認識で合っていると思いますが間違っていましたらご指摘ください】
sessionはローカルに保存されるデータのため、2画面でブラウザを起動したとしても後から通したTwitter認証データに上書きされてしまいます。
cookieであればブラウザごとにデータが保存されるため、今回のようなバグは発生しないようです。

Comments

[ockeghem]

> 【下記認識で合っていると思いますが間違っていましたらご指摘ください】
間違っていますよ。しかし、解決したのですよね

[yusuke.y]

勉強不足で恐縮です。
一連のバグは解決しました。

Answer 2

違う種類のブラウザを併用してもらう事が現実的だと思います。

ブラウザの拡張機能でそういうのがあれば、拡張機能を使っている人は解決できますが、コード側で解決することはできないと思います。
（私の知識不足ならごめんなさい）

Comments

[hiro_app]

実現しようとすると
・ログイン機能周りの大改修
普通ログイン済みかをセッション等で判断していると思いますが、セッションがあるのにログイン画面には入って新規でログインしたい。
なら、ログイン画面以外にブックマーク等で直接アクセスされたら誰がログインしている状態とするのか？
つまり、ログイン画面以外はブックマーク、URLアクセスもできないような制限が必要になるのでは？
また、ブックマーク等のアクセスを制限するなら、画面遷移関連の処理も一通り制御をかけて、試験をやり直しになるのでは？

・セッションを廃止
セッションに頼って実装している機能を軒並み別手段で実装し直す

超小規模ならできると思いますが・・・、基本的にどちらも非現実的だと思います。

中には例外もありますが、世の中にあるブラウザwebシステムで、ログイン情報は上書きが普通だと思います。

[yusuke.y]

例えば現在の実装でデプロイしたとして、同じ現象は起きますか？
aさんのログイン認証後にbさんがログイン認証をして、aさんがリロードするとbさんのデータに起きかわってしまうと言った具合に。

ちなみに異なるブラウザ（GoogleChromeとFirefoxまたはsafari）で動作確認をしていますがバグは発生しています。