token을 관리해보자!

💡 우리는 백단을 Nest.js로, 프론트단을 Next.js로 사용하고 있다. 그런데 Access Token을 Nest.js에서 cookie로 만들려고 했더니, Nest.js → Next.js(api) → Next.js(front)로 가기 때문에 생성을 할 수 없었다. 그래서 다른 방법을 생각해 보는데…

위에서 말한대로 Next.js에도 SSR이 있기 때문에 그걸 통해서 Nest.js와 통신을 하려고 작업 중이다.

• 로그인 시 순서는
  • Next.js Front → Next.js Back → Nest.js → Next.js Back → Next.js Front의 순서로 가고 있다.
  • Token도 이와 동일한 순서로 가서 Nest.js에서 만들어진다.

그래서!

Nest.js에서 Access Token과 Refresh Token을 모두 만들고, 보안이 중요한 Refresh Token은 Next.js Back에서 쿠키로 만들어주고, Access Token은 Local Storage에 저장하기로 했다.

1. Next.js Front에서 소셜 로그인 요청 page.ts

2. Next.js Back에서 Nest.js로 요청 route.ts

3. Nest.js에서 소셜 로그인

4. 토큰 생성

    this.jwtService.sign({ id }, { secret });

   Access Token과 Refresh Token 모두 생성해준다.

   • 아직 Refresh Token을 저장할 DB는 만들어주지 않았다. (추후 구현 예정)

5. Next.js에서 Token 받아오기

    const response = NextResponse.json({ token });
    response.cookies.set('refreshToken', refreshToken, {
      httpOnly: true,
      path: '/',
      sameSite: 'strict',
      secure: true,
    });
   
    return response

   여기서 참 많이 헤맸다..

   NextResponse.json({ token }); 은 Front까지 갈 녀석이고,

   아래는 쿠키를 굽는 방법이다.

6. 받아온 Access Token을 Local Storage에 저장

    const { token } = data;
   
    LocalStorage.setItem('AccessToken', token);

   LocalStorage에 저장하려면 useEffect를 쓰는 방법과, Class를 만들어서 사용하는 방법이 있는데 나는 Class를 사용하는 방법으로 구현하였다.

    class LocalStorage {
      static setItem(key: string, value: string) {
        if (typeof window === 'undefined') return;
        localStorage.setItem(key, value);
      }
   
      static getItem(key: string) {
        if (typeof window === 'undefined') return null;
        return localStorage.getItem(key);
      }
   
      static removeItem(key: string) {
        if (typeof window === 'undefined') return;
        localStorage.removeItem(key);
      }
    }
   
    export default LocalStorage;

   이렇게 하지 않으면 rendering되기 전에 Local Storage에 저장하려고 하기 때문에 에러가 발생한다!

   나중에 꺼내서 쓸 때는 const accessToken = LocalStorage.getItem('AccessToken'); 이렇게 쓸 수 있다.