【Passport.js】ブラウザにcookieが保存されない。

Question

【困っていること】
ブラウザにcookieが保存されない。
ブラウザからサーバーにcookieが送り返されず、セッションが維持できない。

passportjsで認証機能を作ろうとしており、サインイン機能とログイン機能はできました。ユーザー登録して、そのユーザー名とパスワードでログインしたときのレスポンスのヘッダーにset-cookieがある(Networkタブで確認したところ、Set-cookie:connect.sid=に続けて文字列があります。)のですが、chromeの検証ツールでApplicationタブをみてもcookieが保存されていません。

どなたか対応策など教えていただければ幸いです。よろしくお願いいたします。

【試したこと、確認したこと】

・chromeのcookieの設定が、「シークレット モードでサードパーティの Cookie をブロックする」になっていることを確認。
もちろん、実行環境はシークレットモードではありません。

.axiosのオプションのwithCredentials: trueにした。

・passport-sessionのcookieの設定をhttpOnly:falseにした。
→ブラウザのコンソールでdocument.cookieと入力しenterを押しても””が返ってくる。

・バックエンドのcorsプラグインのoriginに"http://localhost:3000"に編集。

【環境】
フロント:react typescript
バックエンド:express
データベース:mysql

【コード】
バックエンド　

const express = require("express");
const bodyparser = require("body-parser");
const app = express();
const mysql = require("mysql");
const cors = require("cors");
const port = 9000;
const bcrypt = require("bcrypt");
const saltRounds = 10;

const db = mysql.createPool({
  host: "***********************",
  user: "guestuser",
  port: 3306,
  password: "************",
  database: "training",
});

app.use(cors());
app.use(express.json());
app.use(bodyparser.json({ type: "application/json" }));
app.use(bodyparser.urlencoded({ extended: true }));

app.get("/api/get/training", (req, res) => {
  const sqlSelect = "SELECT * FROM training order by tr_id";
  db.query(sqlSelect, (err, result) => {
    if (err) console.log(err);
    res.send(result);
  });
});

app.delete("/api/delete/:id", (req, res) => {
  const id = req.params.id;
  const sqlDelete = "DELETE FROM trainingrecord WHERE id = ?;";
  db.query(sqlDelete, [id], (err, result) => {
    if (err) console.log(err);
  });
});

app.get("/api/get/trainingrecord", (req, res) => {
  const { dt } = req.query;
  const sqlSelect = `SELECT * FROM trainingrecord join training on trainingrecord.trainingid = training.tr_id where dt = "${dt}" order by createdAt`;
  db.query(sqlSelect, (err, result) => {
    if (err) console.log(err);
    res.send(result);
  });
});

app.get("/api/get/trainingrecord/graph", (req, res) => {
  const { start, end } = req.query;
  const sqlSelect = `SELECT * FROM trainingrecord join training on trainingrecord.trainingid = training.tr_id where dt <= "${end}" and dt >= "${start}" order by createdAt`;
  db.query(sqlSelect, (err, result) => {
    if (err) console.log(err);
    res.send(result);
  });
});

app.get("/api/get/trainingrecord/distinct/", (req, res) => {
  // const { dt } = req.query;
  const sqlSelect = `SELECT DISTINCT dt FROM trainingrecord order by dt desc limit 5`;
  db.query(sqlSelect, (err, result) => {
    if (err) console.log(err);
    res.send(result);
  });
});

app.post("/api/insert/:userid/", (req, res) => {
  const userid = req.params.userid;
  const { dt, trainingid, count } = req.body;
  const sqlInsert =
    "INSERT trainingrecord (userid,dt,trainingid,count) values (?,?,?,?);";
  db.query(sqlInsert, [userid, dt, trainingid, count], (err, result) => {
    if (err) console.log(err);
    res.send(result);
  });
});

//サインイン
app.post("/signin/", (req, res) => {
  const { username, password } = req.body;
  const sqlInsert = "INSERT user (name,password) values (?,?);";
  bcrypt.hash(password, saltRounds, (err, hash) => {
    if (err) return console.log(err);
    db.query(sqlInsert, [username, hash], (err, result) => {
      if (err) {
        console.log(err);
        res.send(err);
        return;
      }
      res.send(result);
    });
  });
});

//認証機能など

const passport = require("passport");
const Strategy = require("passport-local").Strategy;
const session = require("express-session");
const cookiesession = require("cookie-session");
const cookieParser = require("cookie-parser");

app.use(cookieParser());
app.use(cookiesession());

app.use(
  session({
    secret: "testing",
    resave: false,
    saveUninitialized: true,
  })
);
app.use(passport.initialize());
app.use(
  passport.session({
    cookie: {
      httpOnly: false,
    },
  })
);

passport.use(
  new Strategy(
    {
      usernameField: "username",
      passwordField: "password",
    },
    (username, password, done) => {
      db.query(
        `select * from user where name = '${username}';`,
        (err, user) => {
          if (err) {
            return done(err);
          }
          if (!user) {
            return done(null, false);
          }
          bcrypt.compare(password, user[0].password, (err, result) => {
            if (err) return console.log(err);
            console.log(result);
            done(null, user);
          });
        }
      );
    }
  )
);

passport.serializeUser(function (user, done) {
  console.log("serializeUser");
  done(null, user[0].id);
});

passport.deserializeUser(function (username, done) {
  console.log("deserializeUser");
  done(null, { name: username });
});

app.post(
  "/login/",
  passport.authenticate("local", {
    session: true,
  }),
  (req, res) => {
    const uid = req.user[0].id;
    const sid = req.sessionID;
    const sqlInsert = "INSERT session (sid,uid) values (?,?);";
    db.query(sqlInsert, [sid, uid], (err, result) => {
      if (err) console.log(err);
      res.send(result);
    });
    res.send(req.user);
  }
);

app.get("/api/getuser", (res, req) => {
  console.log(req.session, "session");
  console.log(req.session.Session, "Session");
  console.log(req.session.Session.cookie, "Session.cookie");
});

//ポートリッスン
app.listen(port, () => {
  console.log(`listening at　port:${port}`);
});

フロント(axiosの部分を抜粋)

    axios
      .post('/login/', {
        password,
        username,
      })
      .then((response) => {
        console.log(response.data[0].id);
        setUserId(response.data[0].id);
      })
      .catch((err) => {
        console.log(err);
      });

Comments

[hoshi-takanori]

app.use(cors({ credentials: true })); は試しましたか？
https://www.positronx.io/express-cors-tutorial/#tc_7369_05

[webnakada]

ご回答ありがとうございます！

試してみると、
cookieのsamesiteプロパティ?にnoneとsecureを設定してくださいというエラーが出たので、
そうしてみます。secureはhttpsでないと使えないので、サーバーとブラウザ間をhttpsにしようと思います。