로그인 구현

1.로그인하기 누르면 redirect로 uri로 이동하여 인가코드를 받는다

2.callback페이지를 따로 만들어서 callback페이지에서 accesstoken과 refresh token을 cookie로 저장하는 작업을 한다.

3.백엔드랑 통신할때 카카오에서 받은 인가코드를 넘겨줘야하는데, 백엔드 측에서 일일이 웹사이트 도메인을 등록하는 것보다

 params: { redirect_uri: process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI },

이런식으로 GET요청시 requestbody에 해당 도메인의 정보와 인가 코드를 유동적으로 보내주었다

4.callback페이지에서 code안에 인가코드를 넣어줬는데, 이 code가 있으면 loginHandler라는 함수로 가고 그 함수 안에서 response를 제대로 받았다면 onLoginSuccess함수로 이동한다.

5.그리고 이 onLoginSuccess 함수에서 cookie설정을 완료한다. 

import { Cookies } from 'react-cookie';

const cookies = new Cookies();

export const setCookie = (name: string, value: string, option?: any) => {
  return cookies.set(name, value, { ...option });
};

export const getCookie = (name: string) => {
  return cookies.get(name);
};

export const removeCookie = (name: string, option?: any) => {
  return cookies.remove(name, { ...option });
};

//onLoginSuccess함수
// accessToken 설정
    setCookie('accessToken', `${accessToken}`, {
      path: '/',
      sameSite: true,
    });

    // refreshToken 설정
    setCookie('refreshToken', `${refreshToken}`, {
      path: '/',
      sameSite: true,
    });

!!!BUT

여기서 발생한 첫번째 문제 !

페이지 refresh를 하지 않으면..쿠키 안에 바로 들어가지 않는다...ㅜㅜ이 문제는 어쩔 때 되고 안되고 그래서 해결하기 꽤 어려웠는데 그냥 reload를 바로 자동으로 하게 코드를 짜면 되긴한다..근데 왠지 모르는 찝찝함 ㅜㅜ..

사실 이 문제 때문에 refresh토큰 문제때문에 꽤 힘들었다.. refresh토큰은 5분마다 계속 발급받아야해가지고 애를 먹었다..

6.자 이제 마지막으로 refresh토큰을 어떻게 해야지 계속해서 받아올 수 있을까 고민하다  api.intercepter를 사용하였다

const getRefreshToken = mem(

  async (): Promise<string | void> => {

    try {

      const refresh = getCookie('refreshToken');

      const response = await api.post('/token/refresh/', { refresh: `${refresh}` });

      // 새로운 토큰 저장

      const accessToken = response.data.access;

      const refreshToken = response.data.refresh;

      setCookie('accessToken', `${accessToken}`, {

        path: '/',

        sameSite: true,

        // httpOnly: true,

        // secure: true,

      });

      if (refreshToken !== null) {

        setCookie('refreshToken', `${refreshToken}`, {

          path: '/',

          sameSite: true,

          // httpOnly: true,

          // secure: true,

        });

      }

      return accessToken;

    } catch (e) {

      removeCookie('accessToken');

      removeCookie('refreshToken');

    }

  },

  { maxAge: 31536000 },

);

 

accessApi.interceptors.response.use(

  (response) => {

    if (!(response.status === 200 || response.status === 201 || response.status === 204)) throw new Error();

    if (response.data.errors) throw new Error(response.data.errors);

    return response;

  },

  async (err) => {

    const {

      config,

      response: { status },

    } = err;

    if (status !== 401 || config.sent) {

      return Promise.reject(err);

    }

    //config.sent = true;

    const accessToken = await getRefreshToken();

    const old = getCookie('accessToken');

    if (accessToken == old) {

      window.location.reload();

    }

    if (accessToken) {

      accessApi.defaults.headers.Authorization = `Bearer ${accessToken}`;

      config.headers.Authorization = `Bearer ${accessToken}`;

      // 401로 요청 실패했던 요청 새로운 accessToken으로 재요청

      const originalResponse = await axios.request(config);

      return originalResponse;

    }

    return Promise.reject(err);

  },

);

    const old = getCookie('accessToken');

    if (accessToken == old) {

      window.location.reload();

    }

여기서 accessToken == old한 이유가 바로 accessToken과 refreshToken이 새로 발급되도 바로 cookie안에 들어가지지 않는 다는 것었는데 token이 옛날 거면 reload해서 해당 interceptor 로직을 다시 반복하게 해주는 것으로 구현하였다. 이렇게하면 오류는 절대 안뜨고 refreshToken도 제대로 받아와 진다...하지만 조금 찝찝하다

 

 

왜 쿠키가 바로 안들어가지는 걸까? 아직 JWT와 cookie에 대해서 잘 몰라서 그런가.. 아니면 비동기 처리가 문제인건가?아시는 분 있으면 꼭 알려주세요 ㅜㅜ

 

<아쉬운 점>

refreshtoken cookie에 넣어주려면 페이지 자동 reload시켜야함