자동 로그인 구현 질문

React로 NodeBird SNS 만들기

작성

563

안녕하세요
자동 로그인을 구현해보려고 하는데 몇주째 안되고 있어서 질문 드립니다..

계정 정보를 쿠키에 암호화하여 저장해서 자동 로그인을 구현하려고 하고 있습니다.
useEffect 에서 쿠키 확인 후에 dispatch 시키면 로그인 쿠키도 잘 넘어오고 정상적으로 로그인이 되는데요,

SSR에서 구현하려고 _app.js 에 getInitialProps 안에 코드를 넣으면 될 것 같아서

const auto = ctx.req.cookies.auto ? JSON.parse(ctx.req.cookies.auto) : null;
ctx.store.dispatch({
type: LOG_IN_REQUEST,
 data: {
        auto.email,
        auto.password
  }
});

대략 이런식으로 넣어서 사용하려고 했는데 유저 정보는 넘겨 받지만 서버쪽이나 브라우저에서 로그인을 인식하지 못하고 로그인 쿠키값도 넘어오지 않아서 axios.defaults.withCredentials = true; 이 값을 넣어도 안되더라구요..

1. 이 방법이 잘 못된 방법인가요?..

2. express session에서 쿠키값을 넘겨받지 못하고 로그인 되지 않는 이유가 무엇인가요?..

react javascript

답변 7

제로초(조현영)

지식공유자

저도 전체 코드를 보지 못하여 정확한 원인 분석은 어렵습니다. 다만, 제 소스코드 ch7이나 ch8을 클론해서 비교해보시면 좋을 것 같습니다. 걔네 둘은 getInitialProps로 SSR을 하고 있습니다.

김웅

질문자

결국에는 getInitialProps 쪽에서 처리하는게 아닌, useEffect를 사용하여 마운트 된 후에 로그인을 시도하는 방식으로 처리 했었는데요...

혹시 처음부터 서버쪽에서 로그인을 시킬 수 있게 자동 로그인을 구현할 방법이 없을까요?..

_app.js 파일의 getInitialProps 안에서 dispatch 시켜도 로그인 처리가 되지 않습니다..
검색해보니 SSR 쪽에선 로그인이 안되는 것 같은데 다른 방법을 도저히 못찾았습니다ㅜㅜ

제로초(조현영)

지식공유자

혹시 로그인 라우터에서 프론트엔드로도 쿠키를 다시 보내나요? 백엔드에 로그인할 때 쿠키가 저장되었다면 그걸 다시 프론트로도 보내서 백엔드와 프론트엔드 쿠키를 일치시켜야 합니다. 백엔드와 프론트엔드 주소로 각각 들어가서 개발자도구에서 Application -> Cookie에서 쿠키가 제대로 들어갔는지 확인해보셔야 합니다.

김웅

질문자

 if(ctx.isServer){
    var isLogined = ctx.req.cookies.[login session cookie name] ? true : false;
    var auto = ctx.req.cookies.[auto login cookie name] ? JSON.parse(ctx.req.cookies.[auto login cookie name])
 : null;
    if(!isLogined && auto){
      var bytes1 = CryptoJS.AES.decrypt(auto.em, process.env.COOKIE_SECRET);
      var bytes2 = CryptoJS.AES.decrypt(auto.pa, process.env.COOKIE_SECRET);
      var email = JSON.parse(bytes1.toString(CryptoJS.enc.Utf8));
      var password = JSON.parse(bytes2.toString(CryptoJS.enc.Utf8));
      ctx.store.dispatch({
        type: LOG_IN_REQUEST,
        data: { email, password }
      });
    }
 }

이미 로그인이 되었는지 구하고, 자동 로그인 쿠키값도 구해서 CryptoJS로 암호화된걸 해제하여 dispatch로 보내는 식으로 코드를 짜보았지만 처음 로드 시에 로그인이 된 것 처럼 나오지만 글을 쓰거나 페이지를 이동했을 때 로그인이 되지 않았다고 나오네요..

제로초(조현영)

지식공유자

로그인 라우터는 req.isAuthenticated가 없을텐데 어떤 라우터에 req.isAuthenticated 미들웨어가 붙어있나요?

김웅

질문자

네. 로그인 라우터는 모두 이렇게 만들어져 있는 라우터를 사용하고 있습니다.

router.post('/login', (req, res, next) => {
    passport.authenticate('local', (err, user, info) => {
...

dispatch코드를 getInitialProps 여기에 넣었을 때, passport.authenticate를 성공하여 유저의 정보는 가져오지만 세션이 생성되지 않는 것 같습니다

req.isAuthenticated() 이 코드에서 막히는 걸 보면 로그인이 되지 않는 것 같습니다..

제로초(조현영)

지식공유자

자동로그인을 할 때 라우터에서 passport.authenticate를 진행하나요? passport를 거치지 않으면 로그인 자체가 안 됩니다.

인프런 커뮤니티 질문&답변

자동 로그인 구현 질문