[NestJS] Auth Token을 쿠키에 저장하기

email, password를 통해 로그인하여 access token을 생성하고, 생성된 access token으로 사용자 정보를 조회해 보는 것을 해보았어요. 이어서 token을 쿠키에 저장하는 로직을 구현해 보려고 합니다.

 

1. cookie-parser, @types/cookie-parser 설치

먼저 관련 패키지를 다운로드하여 설치합니다.

$ npm install --save cookie-parser
$ npm install --save-dev @types/cookie-parser

 

2. /login 로직 수정

'app.controller.ts'에서 /login 부분을 살펴보면 authSevice의 login을 이용하여 생성된 access_token을 바로 return 해주고 있는데요. 여기서 return 하는 부분을 수정하여 쿠키에 저장하도록 합니다.

async login(
    @Body() user: UserDto,
    @Res({ passthrough: true }) res: Response,
  ) {
    const access_token = await this.authService.login(user);
    res.cookie('Authentication', access_token, {
      domain: 'localhost',
      path: '/',
      httpOnly: true,
    });
    return access_token;
  }

access_token에 생성한 토큰을 저장하고, 이를 쿠키에 저장하도록 수정하였습니다. 전, 후 비교는 아래와 같습니다.

 

3. cookie parser 설정

swagger 사용할 때도 main에서 setup 했던 거 기억나시죠? cookie parser를 사용하기 위해서도 main.ts에서 설정을 해줍니다.

기존에 swagger 설정 했던 부분과 포트 3000 listen 사이에 아래의 코드를 추가해 줍니다.

// cookieyParser
app.use(cookieParser());

 

4. jwt에서 쿠키 사용 설정

그리고 저장된 쿠키를 이용하여 토큰을 확인할 수 있도록 jwtStrategy를 수정합니다.

'jwt.strategy.ts'

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromExtractors([
        (request) => {
          return request?.cookies?.Authorization;
        },
      ]),
      // Request에서 JWT를 추출하는 방법 중 Header에 Bearer Token 사용
      // ExtractJwt.fromAuthHeaderAsBearerToken()
      ignoreExpiration: false, // jwt 보증을 passport 모듈에 위임함. 만료된 JWT인경우 request거부, 401 response
      secretOrKey: jwtConstants.secret, // token 발급에 사용할 시크릿 키
    });
  }

 

5. Postman 테스트하기

기존의 /auth/login을 실행한 결과 Cookies에 (1)이 생겼어요.

확인해 보니 Authentication이 제대로 저장되어 있네요.