Passport.js 쿠키 저장이 안되어서 계속 검색하고 수정하는데 이제는 도대체 뭐가 문제인지 모르겠네요.

Question

리액트 앱이고, 서버와 앱을 다른 서버에 동작하게 하기 위해 작업중에 있습니다. ( Heroku와 Netlify를 사용해 배포를 하려고 합니다. ) 로컬에서 코드를 짜면서 프록시 설정으로 로컬호스트 포트 두개로 작업을 하다가 프록시 설정을 없애고 서버 주소가 들어갔을 때를 대비하려고 하니, 잘 동작하던 Passport.js가 고장나버렸습니다 ㅠㅠ 검색을 하다보니 CORS 문제인 것 같아서 처음에 app.use(cors())로만 되어있던 것을 credentials 세팅을 추가했습니다.(현재 코드는 아래에 첨부했습니다.) 몽고디비 세션에는 패스포트가 있는데, 쿠키가 문제인 것 같아서 계속 CORS에 관해서 찾았는데 이젠 해보라는 건 거의 다 해본 것 같아서 머리에 쥐가 나네요...ㅠㅠ 설명을 드리면, 1. 현재는 로그인을 시도하면 일단 성공을 해서 OPTIONS와 POST 둘다 200이 돌아오고, 로그인 POST는 res에 성공 후 데이터를 클라이언트로 받을 수 있습니다. 쿠키도 클라이언트에 저장됩니다. 2. 그런데 로그인 후 리덕스의 isLoggedIn 상태가 업데이트 되면(useEffect로) auth 확인을 다시 서버로 보내 사용자 정보를 받으려고 할 때 req.session에 passport가 없어서 deserializeUser가 작동하지 않습니다. 세션이 아예 없는 게 아니라 Passport만 없고 나머지 쿠키 정보는 있습니다. 3. auth확인이 되면 로그인 페이지를 떠나도록 코드가 되어있는데 실패로 로그인 페이지에 계속 머물러 있는 상태에서 로그인을 다시 시도하면 FireFox에서는 req.session에 passport가 보이고 deserializeUser가 작동합니다.(크롬은 아닙니다.) 하지만 리덕스의 isLoggedIn이 이미 true로 설정되어있기 때문에 auth확인이 다시 작동하지는 않습니다. 도대체 원인을 어디에서 찾아야하는 걸까요? 클라이언트:Axios.post( &#96;${process.env.REACT_APP_API_URI}/api/users/login&#96;, loginData, { crossDomain: true, withCredentials: true, } ).then((res) &#61;> res.data){ //리덕스 isLoggedin을 true로 저장함 } //isLoggedin 변경되면 auth check 로직이 바로 동작해서 서버의 authenticateCheck를 GETserver.js : app.use(helmet()); app.use(&#34;/uploads&#34;, express.static(&#34;uploads&#34;)); app.use(express.static(&#34;public&#34;)); // Passport configuration. require(&#34;./utils/passport&#34;); // connect to mongoDB mongoose .connect(db.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false, }) .then(() &#61;> console.log(&#34;mongoDB is connected.&#34;)) .catch((err) &#61;> console.log(err)); // CORS Middleware //to not get any deprecation warning or error const corsOptions &#61; { origin: process.env.CLIENT_URI, optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 credentials: true, methods: [&#34;POST&#34;, &#34;GET&#34;, &#34;DELETE&#34;, &#34;PUT&#34;, &#34;PATCH&#34;, &#34;OPTIONS&#34;], allowedHeaders: &#34;Origin, X-Requested-With, X-AUTHENTICATION, X-IP, Content-Type, Accept, x-access-token&#34;, }; // app.use(cors(corsOptions)); app.options(/\.*/, cors(corsOptions), function (req, res) { return res.sendStatus(200); }); app.all(&#34;*&#34;, cors(corsOptions), function (req, res, next) { next(); }); // to get json data // support parsing of application/json type post data app.use(express.json()); app.use((req, res, next) &#61;> { req.requestTime &#61; new Date().toISOString(); next(); }); //support parsing of application/x-www-form-urlencoded post data app.use(cookieParser()); // app.use(cookieParser(process.env.SESSION_SECRET_KEY)); // db session store const sessionStore &#61; new MongoStore({ mongoUrl: db.mongoURI, collection: &#34;sessions&#34;, }); // tell app to use cookie app.use( session({ secret: process.env.SESSION_SECRET_KEY, resave: false, saveUninitialized: false, store: sessionStore, cookie: { httpOnly: true, secure: false, sameSite: &#34;none&#34;, maxAge: 24 * 60 * 60 * 1000, // 24 hours //keys: [process.env.COOKIE_ENCRYPTION_KEY] }, name: &#34;pm-user&#34;, }) ); app.use(express.urlencoded({ extended: true })); // tell passport to make use of cookies to handle authentication app.use(passport.initialize()); app.use(passport.session()); app.use(compression()); app.use(flash()); app.use((req, res, next) &#61;> { console.log(&#34;req.session:&#34;, req.session); console.log(&#34;////// req.user: &#34;, req.user, &#34; //////&#34;); next(); });authcheck: exports.authenticateCheck &#61; (req, res, next) &#61;> { console.log(&#34;req.isAuthenticated():&#34;, req.isAuthenticated()); if (req.isAuthenticated()) { return next(); } else { return res.json({ isAuth: false, error: true, }); } };

Hey Moon · Answer

지금 보니 세션이 request 때마다 갱신되어서 몽고DB와 매칭이 안되는 것이 문제였습니다. Proxy 때 작동이 되었던 것 아마도 미들웨어 무슨 설정이 있었던 것 같은데 아직 모르겠어서 찾고 있는 중입니다.

Hey Moon · Answer

일단 해결했습니다. 제가 쿠키에 대해 잘 몰라서 그런 것 같네요. 클라이언트에서 보내는 모든 request에 { withCredentials: true} 해줘야 쿠키 갱신이 안되는 거였네요. 일단 크롬과 FF는 해결을 했는데 사파리는 아직... 방법을 찾고 있습니다 ㅠㅠ

Passport.js 쿠키 저장이 안되어서 계속 검색하고 수정하는데 이제는 도대체 뭐가 문제인지 모르겠네요.

2개의 답변

#passport.js 목록