Passport 사용 하며,,

평소에 Nodejs랑 React를 얕게 공부해 놓은게 아까워서 한 번 써먹어볼(?) 생각으로 간단하게 클론프로젝트를 시작했다.

당연히 front는 React로 구현하고 back은 Node, DB는 MongoDB를 사용하고 있다.

회원가입/로그인/로그아웃 구현은 카카오로그인으로 구현 할 생각으로 passport 모듈을사용하며 생긴일,,,

Passport 모듈은 회원가입/로그인/로그아웃 과정을 간단히 해주는 모듈이다.

passport는 내부적으로 session모듈을 사용하는데 express-session 이후에 선언하여 따로 strategy를 구현해서 사용한다.

const passport = require('passport');
const passportConfig = require('./passport');
const cors = require('cors');

const app = express();
app.set('port',process.env.PORT||3005);
passportConfig();
connect();

app.use(cors({origin:true,credentials:true}));
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended:false}));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
    resave:false,
    saveUninitialized:false,
    secret:process.env.COOKIE_SECRET,
    cookie:{
        httpOnly:true,
        secure:false,
    },
    name:'connect.sid'
}));
app.use(passport.initialize());
app.use(passport.session());

 

Passport 를 사용하여 로그인을 하게 되면 Passport에서 세션에 user의 식별 id를 등록하는데 이렇게 등록하게되면

사용자의 요청에 담긴 세션쿠키의 정보를 읽고 Passport.session()을 요청마다 실행하게 되는데

passport.serializeUser을 통해 세션에 등록한 쿠키에 해쉬화된 사용자의 식별 Id를 passport.deserializeUser에서 해당 사용자가 존재하는지 찾는다. 근데 여기서 개발시에는 http://localhost로 개발을 진행하므로 cookie의 secure option을 false로 지정해주지 않으면 세션 쿠키가 등록되지 않는것을 확인할 수 있다. 나는 react server로 세션 쿠키를 넘겨줘야 하기 때문에 cors 등록을 하면서 credentials를 true로 설정해 놓았다. 

물론 front에서 요청시 axios 옵션으로 withCredentials:true를 지정해주어야 한다. 

cookie secure 옵션 때문에 쿠키 등록이 안되서 당황했던,,,