로그인에 refreshToken 적용하기

// src/hooks/useOAuthLogin.ts
const useOAuthLogin = (type: "google" | "github") => {
  const history = useHistory();
  const { login } = useMember();

  // 백엔드 서버로 OAuth 로그인 요청을 보낸다.
  const getAccessToken = async (code: string) => {
    const { data } = await api.get<AuthData>(
      `/login/oauth/${type}/token?code=${code}`
    );

    login(data);
    history.push(ROUTE.HOME);
  };

  useEffect(() => {
    // ...
  }, []);
};

// src/contexts/member/MemberProvider.tsx
const MemberProvider = ({ children }: Props) => {
  const queryClient = useQueryClient();
  const modal = useModal();
  const dialog = useDialog();

  const [accessToken, setAccessToken] = useAccessToken();

  // userInfo를 가져오는 요청을 보낸다.
  const { data: userInfo, refetch: refetchMember } = useMyInfo({
    accessToken,
    errorHandler: // ...,
    // ...
  });

  const login = async (authData: AuthData) => {
    setAccessToken(authData.accessToken);

    // 로그인 응답으로 받은 data를 SSR 서버에 전송한다.
    frontendApi.post('/auth/login', authData);
  };

  const logout = () => {
    // member query에 캐시되어있는 값을 제거해준다.
    queryClient.removeQueries(QUERY_KEYS.MEMBER);
    setAccessToken('');
    backendApi.defaults.headers.common['Authorization'] = '';

    frontendApi.post('/auth/logout');
  };

  const contextValue: ContextValue = useMemo(
    // ...
  );

  return <Context.Provider value={contextValue}>{children}</Context.Provider>;
};

const EXPIRED_IN = 71400000;

const useAccessToken = () => {
  // 서버에서 script 태그로 받은 accessToken을 앱 내 변수로 담는다.
  const [accessToken, setAccessToken] = useState(
    hasWindow ? window.__accessToken__ : ""
  );

  // 사용자가 로그인된 상태에서 accessToken이 만료된다면, 서버에 다시 토큰 재발급 요청을 보낸다.
  useEffect(() => {
    const timerId = setTimeout(async () => {
      const {
        data: { accessToken },
      } = await frontendApi.post<{ accessToken: string }>("/auth/renewToken");

      setAccessToken(accessToken);

      backendApi.defaults.headers.common[
        "Authorization"
      ] = `Bearer ${accessToken}`;
    }, EXPIRED_IN);

    return () => clearTimeout(timerId);
  }, [accessToken]);

  return [accessToken, setAccessToken] as const;
};

// server/index.tsx
app.use("/auth", authRoute);

// server/auth.ts
const router = express.Router();

router.post("/login", (req, res) => {
  const { body } = req;
  const isAuthRequest =
    body?.accessToken && body?.refreshToken && body?.expiredIn;

  if (!isAuthRequest) {
    res.status(400).send("올바른 요청 양식이 아닙니다.");

    return;
  }

  res
    .cookie("refreshToken", body.refreshToken, {
      httpOnly: true,
      maxAge: body.expiredIn,
    })
    .status(200)
    .send("true");
});

// 로그아웃 요청 시 쿠키의 refreshToken을 제거해준다.
router.post("/logout", (_, res) => {
  res.clearCookie("refreshToken").status(200).send("true");
});

router.post("/renewToken", async (req, res) => {
  const { accessToken, refreshToken, expiredIn } = await getNewAuthToken(req);

  res
    .cookie("refreshToken", refreshToken, {
      httpOnly: true,
      maxAge: expiredIn,
    })
    .status(200)
    .json({ accessToken });
});

export default router;

// server/utils.ts
const PUBLIC_IP_API = "https://api.ipify.org/?format=text";

const getNewAuthToken = async (req: express.Request): Promise<AuthData> => {
  // 클라이언트에 refreshToken이 없다면 로그아웃 상태로, 토큰 재발급 요청을 하지 않는다.
  if (!req.cookies.refreshToken) return;

  const { refreshToken } = req.cookies;

  // nginx proxy 환경에서 client IP를 가져오는 방법
  let clientIP = req.headers["x-forwarded-for"];

  // 처음 로그인 요청을 보낸 클라이언트의 ip와 토큰 재발급 요청을 보낸 클라이언트의 ip가 다르다면 백엔드 서버에서 401 에러를 리턴한다.
  if (process.env.NODE_ENV !== "production") {
    const { data: publicIP } = await axios.get(PUBLIC_IP_API);
    clientIP = publicIP;
  }

  // 클라이언트가 전송한 stale한 refreshToken으로 새 refreshToken을 발급받는다.
  try {
    const { data: authData } = await api.post<AuthData>(
      "/login/oauth/refreshToken",
      {
        refreshToken,
        clientIP,
      }
    );

    return authData;
  } catch (error) {
    console.error(error.response);
  }
};

let clientIP = req.headers["x-forwarded-for"];

// etc/nginx/sites-available/default
server {
  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://localhost:9000/;
  }
  // ...
}

const newAuthData = await getNewAuthToken(req);

app.get("/", (req, res) => {
  // 1. 재발급받은 토큰이 있다면 cookie에 refreshToken을 담아주고,
  // 3. 유저 정보를 새로 prefetch하여 로그인된 상태의 html을 구성한다.
  if (newAuthData) {
    res.cookie("refreshToken", newAuthData.refreshToken, {
      httpOnly: true,
      maxAge: newAuthData.expiredIn,
    });

    await queryClient.prefetchQuery(QUERY_KEYS.MEMBER, () =>
      getMember({ accessToken: newAuthData.accessToken })
    );
  }

  // 2. 재발급받은 accessToken을 클라이언트에 script로 전송한다.
  const accessTokenScript = newAuthData
    ? `<script>window.__accessToken__ = "${newAuthData.accessToken}"</script>`
    : "";

  fs.readFile(indexFile, "utf8", (err, data) => {
    if (err) {
      // ...
    }

    const result = data
      .replace('<div id="root"></div>', `<div id="root">${reactApp}</div>`)
      .replace(
        /<head>(.+)<\/head>/s,
        `<head>$1
          ${styleTags} ${scriptTags} ${reactQueryState} ${accessTokenScript}
         </head>`
      );

    return res.send(result);
  });
});