[Next.js+React+Typescript] 로그인 구현하기 # 2 (feat. SSR)

[썸넬 할게 딱히 없어서 벚꽃 얹고 기분나빠하는 카롱이.]

JWT-DECODE

로그인 API로 시도를 해보니 정말로(...) access token, refresh token 딱 두개만 응답값으로 나온다.

decoding 하는 라이브러리는 여러개가 있었는데 그중에 jwt.io에서도 제공하는 jsonwebtoken을 사용하려고 보니까 얘가 제대로 import가 안되는것...
자꾸 해당 모듈을 찾을 수 없다고 하는데...

https://github.com/auth0/node-jsonwebtoken/issues/785

우회하는 방법이 아니면 import를 할 수 없는가보다.
(21년도에 오픈된 이슈인데도 아직 해결이 안됐나;)

아니면 다른 방법이 있는데, 내가 못찾는거라든가.
typescript에서 사용하는 @types/jsonwebtoken이 있길래
이걸 써보려고 해도 도통 되질 않았따..ㅠㅠ

어제 밤새 이런저런 방법으로 시도해봐도 안되길래 포기하고 다른 라이브러리를 찾았다.
어차피 decoding 기능만 있으면 되니깐. (직접 만들어도 되기는 하겠지만)

https://www.npmjs.com/package/jwt-decode

Last Publish가 5 month ago이니 쓸만하겠다 싶어서 이 라이브러리를 사용하기로 했따.
그리고 token 값을 decoding 하니 정상적으로 값이 들어있는 것을 확인할 수 있었다.

access token을 local storage에 넣기

로그인 API의 응답값을 라이브러리를 통해 decoding한 다음 local storage에 담았다.

window.localStorage.setItem('userInfo', JSON.stringify(userInfo));

저번에 얘기했듯, local storage에는 string type이 들어가기 때문에 object를 넣어주고 싶다면 문자열로 변환 후 넣어줘야 한다.

refresh token을 cookies에 넣기

https://nextjs.org/docs/app/api-reference/functions/cookies

Next.js에서 제공하는 cookies function이 있는데 문제(?)가 있다면 Next.js가 SSR이기에 cookies에 값을 세팅할 때 client side에서는 할 수 없다는 점이었다.

그래서 client side인 페이지안에서 세팅을 해줄 수는 없고 server side에서 사용해줘야 한다.

//utils/cookie/index.tsx
'use server';

import { cookies } from 'next/headers'
 
async function setCookie(name: string, value: string) {
  
  cookies().set(name, value);
}

export default setCookie;

위와같이 하나 만들어 주고.

setCookie('refreshToken', value.data.refreshToken);

client side page에서 세팅을 해주면

위와 같이 세팅된 것을 확인할 수 있다.