JWT를 이용한 로그인 인증 구현 시 accessToken 저장, 갱신 문제

Question

현재 JWT을 사용해 로그인 인증 시스템을 구현하고있습니다.현재까지 작업한 내용은서버에서 refreshToken은 http-only로 cookie에 담았고, accessToken은 response body에 담아서 가져왔습니다.여기서 accessToken을 localStorage나 sessionStorage 등이 아닌 in memory 방식으로 구현했습니다. (다양한 취약점 이슈 때문)accessToken을 state로 관리하니 새로고침 시 state가 초기화되어 이 때 /refresh api 함수를 통해 accessToken을 재발급받도록 구현했습니다.export default function Layout({ children }: Readonly) { const [user, setUser] = useState({}); const accessToken = useTokenStore((state) => state.accessToken); const setAccessToken = useTokenStore((state) => state.setAccessToken); useEffect(() => { console.log(accessToken); if (accessToken) { console.log("access token 있다"); fetchUserProfile().then((res) => setUser(res.user)); } if (!accessToken) { console.log("access token 없다"); fetchRefreshToken().then((res) => { setAccessToken(res.accessToken); fetchUserProfile().then((res) => setUser(res.user)); }); } const interval = setInterval(fetchRefreshToken, 5 * 1000); return () => clearInterval(interval); }, [accessToken, fetchRefreshToken]); return (

{children}

); }문제는 위처럼 코드를 작성하면 로그인중일 경우에는 로직이 잘 돌아가는데, 로그인하지 않았을 경우엔 첫 진입시 accessToken 이 없으니 !accessToken분기로 접근할것이고, 여기서 refreshToken이 없으니 fetchRefreshToken api 함수에서 오류가 발생하는 상황에 도달했습니다. 그런데 여기서 해당 분기를 어떻게 처리해야할지를 잘 모르겠습니다..프론트에서 분기 처리를 어떻게 하면 처음 페이지에 진입했을 때와 로그인했을 때를 구별할 수 있을까요?<추가>인증 공부한다고 express로 서버 코드도 배워서 간단하게 작성해봤는데 혹시 여기서 문제가 있었던걸까요?// Access Token 재발급 authRouter.get("/refresh", async (req, res: any) => { const refreshToken = req.cookies.refreshToken; if (!refreshToken) { return res.status(401).json({ message: "Refresh token missing" }); } try { const decoded = jwt.verify(refreshToken, JWT_SECRET_KEY) as JwtPayload; // 새로운 Access Token 및 Refresh Token 발급 const newAccessToken = createAccessToken({ email: decoded.email, }); const newRefreshToken = createRefreshToken({ email: decoded.email, }); // 새로운 Refresh Token 설정 res.cookie("refreshToken", newRefreshToken, { httpOnly: true, sameSite: "strict", maxAge: 30 * 24 * 60 * 60 * 1000, }); res.status(200).json({ accessToken: newAccessToken }); } catch (error) { console.error("Refresh token error:", error); res.status(401).json({ message: "Invalid or expired refresh token" }); } });

캐티 · Answer

document loaded - 토큰 발급 or 리턴로그인 세션이 주어져 있다면 토큰이 발급 되어요. 안 그럼 토큰이 안 나오므로 그냥 리턴으로 함수를 나가지 않나요.이 다음은 사용자가 로그인을 하는 적절한 액션을 하여야 해요.timeout - 토큰 재발급리프레시 토큰을 저장하였다면 이 토큰을 사용하여 새로운 토큰을 받아와요. 클라이언트에서 시간을 잴 수도 있지만 30분이면 25분 정도에 토큰을 자동 재발급 하거나, 그냥 30분을 넘겨서 토큰이 만료되게 하겠쩌.이 다음은 사용자가 액션을 할 때 가지고 있는 엑세스 토큰이 허가되지 않은 상태이면 리프레시 토큰을 사용해서 새로운 토큰을 받아오고 작업을 수행해요.재귀 호출을 사용하여야 하겠지만 나는 반복문이나 이중 함수를 사용할 것이어요.if( ! downloadUser() ){ updateTokenWithRefresh(); downloadUser() } eg // 요구된 액션이 실패하는 경우 리프레시토큰을 갱신하고 다시 시도한 다음 최종 실패에 대하여 ui를 정리함. function call(action){ if( ! action() ){ updateTokenWithRefresh() if( ! action() ){ clearUserInterface(); } } }일반적으로 이케하는 것이 좋스빈다.

scissors hand · Answer

fetchRefreshToken에 실패할 때 로그인 페이지로 이동하면 되지 싶습니다만...fetchRefreshToken() .then((res) => {..} .catch((error) => { // login page 이동 또는 error.status === 401 인지까지 확인해서 login page 이동 });

jeoyjng1 · Answer

현재 문제는 사용자가 로그인하지 않은 상태로 애플리케이션에 접근했을 때 fetchRefreshToken 호출이 실패하면서 발생하는 것으로 보입니다. 이 상황은 기본적으로 &#34;로그인 상태를 확인하고 적절히 분기 처리&#34;를 통해 해결할 수 있습니다.아래는 이 문제를 해결하기 위한 몇 가지 접근 방안을 제시합니다.1. refreshToken 존재 여부 확인fetchRefreshToken을 호출하기 전에 브라우저 쿠키에 refreshToken이 있는지를 확인하세요. 이 작업은 프론트엔드에서 document.cookie를 통해 간단히 확인할 수 있습니다.수정된 코드는 다음과 같습니다:typescriptCopy codefunction hasRefreshToken(): boolean { return document.cookie.split(&#34;; &#34;).some((cookie) &#61;> cookie.startsWith(&#34;refreshToken&#61;&#34;)); } useEffect(() &#61;> { if (accessToken) { console.log(&#34;access token 있다&#34;); fetchUserProfile().then((res) &#61;> setUser(res.user)); } else if (hasRefreshToken()) { console.log(&#34;refresh token 있다&#34;); fetchRefreshToken().then((res) &#61;> { setAccessToken(res.accessToken); fetchUserProfile().then((res) &#61;> setUser(res.user)); }); } else { console.log(&#34;로그인 상태가 아님&#34;); // 로그인 상태가 아님을 처리 (ex. 리다이렉션, 게스트 상태 유지 등) } const interval &#61; setInterval(() &#61;> { if (hasRefreshToken()) { fetchRefreshToken(); } }, 5 * 1000); return () &#61;> clearInterval(interval); }, [accessToken, fetchRefreshToken]);2. API 오류 처리 추가fetchRefreshToken 호출이 실패할 경우를 대비해 에러 처리를 추가하세요. 예를 들어, fetchRefreshToken이 401이나 403을 반환하면 사용자가 로그아웃 상태임을 명확히 알 수 있습니다.typescriptCopy codeasync function fetchRefreshToken() { try { const response &#61; await fetch(&#34;/refresh&#34;, { method: &#34;POST&#34;, credentials: &#34;include&#34; }); if (!response.ok) { throw new Error(&#96;HTTP error! status: ${response.status}&#96;); } return await response.json(); } catch (error) { console.error(&#34;Failed to refresh token:&#34;, error); // 추가 처리: 로그아웃 상태로 설정 return null; } }useEffect에서 fetchRefreshToken의 반환값이 null이면 로그인 상태가 아님으로 처리합니다.3. 초기 상태 확인 API 사용서버에서 refreshToken이 유효한지 확인하는 별도의 API를 제공할 수도 있습니다. 초기 진입 시 GET /auth/status 같은 API를 호출해 사용자의 로그인 상태를 확인한 후 이를 바탕으로 분기 처리하는 방법입니다.typescriptCopy codeuseEffect(() &#61;> { async function checkAuthStatus() { try { const res &#61; await fetch(&#34;/auth/status&#34;, { credentials: &#34;include&#34; }); if (res.ok) { const data &#61; await res.json(); setAccessToken(data.accessToken); setUser(data.user); } else { console.log(&#34;로그인 상태가 아님&#34;); // 게스트 상태 처리 } } catch (error) { console.error(&#34;Failed to check auth status:&#34;, error); } } checkAuthStatus(); }, []);4. 게스트 상태 명시적 처리로그인 상태와 게스트 상태를 명확히 구분하는 플래그를 추가로 관리하면 분기 처리가 더 쉬워집니다.typescriptCopy codeconst [isGuest, setIsGuest] &#61; useState(true); useEffect(() &#61;> { if (accessToken) { setIsGuest(false); fetchUserProfile().then((res) &#61;> setUser(res.user)); } else if (hasRefreshToken()) { fetchRefreshToken().then((res) &#61;> { if (res) { setIsGuest(false); setAccessToken(res.accessToken); fetchUserProfile().then((res) &#61;> setUser(res.user)); } }); } else { console.log(&#34;게스트 상태&#34;); setIsGuest(true); } const interval &#61; setInterval(() &#61;> { if (hasRefreshToken()) { fetchRefreshToken(); } }, 5 * 1000); return () &#61;> clearInterval(interval); }, [accessToken]);요약브라우저 쿠키에 refreshToken이 있는지 확인하는 로직 추가.fetchRefreshToken 호출 시 에러 처리를 통해 로그인 상태를 명확히 구분.초기 상태 확인용 API 호출로 로그인 상태와 게스트 상태를 구별.상태 플래그 (isGuest)를 추가로 관리해 분기를 명확히.이 방법들 중에서 프로젝트 구조와 요구사항에 맞는 것을 선택해 구현하면, 로그인 여부에 따라 적절히 처리할 수 있습니다.by ChatGPT

JWT를 이용한 로그인 인증 구현 시 accessToken 저장, 갱신 문제

3개의 답변

#express 목록