Next.js13 과 Express를 이용해서 jwt 토큰을 쿠키에 담아서 로그인과 회원가입 기능을 구현중인데 다시 받는 액세스 토큰이 쿠키에 저장이 되질 않습니다..

Question

안녕하세요현재 Next.js 13과 Express를 이용해서 jwt 토큰을 쿠키에 담아서 로그인과 회원가입 기능을 구현중입니다.처음에 회원가입이 완료됐을때는 브라우저 쿠키 창에 정상적으로 리프레시 토큰과 액세스 토큰도 저장이되고,응답 헤더에도 Set-Cookie가 정상적으로 찍힙니다.근데 문제는 액세스 토큰이 만료되고 리프레시 토큰을 서버에 다시 보내서 새로운 액세스 토큰을 발급 받으려고할때, 이 액세스 토큰이 쿠키에 저장이 되지가 않는데요..- 회원가입 완료 됐을때 처음으로 액세스 토큰과 리프레시 토큰을 프론트쪽으로 보내주는 백엔드 코드import { Response, Request, NextFunction } from "express"; import { User } from "../../models/users"; import { HttpError } from "../../error/http-error"; import { RefreshToken } from "../../models/refreshTokens"; import * as dotenv from "dotenv"; import jwt from "jsonwebtoken"; import { hashingToken } from "../../utils/hashing"; dotenv.config(); const jwtSecret = process.env.JWT_SIGNATURE; export const userSignUp = async ( req: Request, res: Response, next: NextFunction ) => { const { userName, userEmail, userId } = req.body; let newUser; let accessToken; let refreshToken; let existingUser; // 중복 회원 검사해주기 try { existingUser = await User.findOne({ where: { userEmail: userEmail, }, }); } catch (err) { const error = new HttpError( "회원가입에 실패하셨습니다. 다시 시도해주세요", 500 ); return next(error); } // 이미 회원가입 된 유저라면 if (existingUser) { const error = new HttpError( "이미 존재하는 회원입니다. 로그인해주세요!", 422 ); return next(error); } // 회원 정보 Db에 저장해주기 try { newUser = await User.create({ userName: userName, userEmail: userEmail, userId: userId, isAdmin: false, nowLoggedIn: true, }); if (!jwtSecret) { throw new Error("JWT 시그니처를 정의해주세요!"); } // 토큰 생성 해주기 accessToken = jwt.sign( { id: newUser.id, userEmail: userEmail }, jwtSecret, { algorithm: "HS256", expiresIn: "1h", } ); refreshToken = jwt.sign({ id: newUser.id }, jwtSecret, { algorithm: "HS256", expiresIn: "7d", }); // refresh 토큰 해시화 const hashedToken = await hashingToken(refreshToken); // refresh 토큰 테이블에 해시화 된 refresh 토큰 저장 const newRefreshToken = await RefreshToken.create({ refreshToken: hashedToken, userId: newUser.id, }); } catch (err) { const error = new HttpError( "회원가입 할 수 없습니다. 나중에 다시 시도하세요.", 500 ); return next(error); } // accessToken (test) res.cookie("accessToken", accessToken, { expires: new Date(Date.now() + 10 * 60 * 1000), secure: false, httpOnly: true, sameSite: "lax", path: "/", }); // refresh Token (test) res.cookie("refreshToken", refreshToken, { expires: new Date(Date.now() + 15 * 60 * 1000), secure: false, httpOnly: true, sameSite: "lax", path: "/", }); return res.json({ message: "회원가입이 정상적으로 처리 되었습니다!" }); };- 쿠키 보내준후 "/"페이지로 리다이렉트 될때, 그 쿠키 값을 받아서 다시 서버로 보내는 프론트쪽 코드import Header from "@/components/Header/Header"; import { cookies } from "next/dist/client/components/headers"; import { sendToken } from "@/pages/api/authApi"; export default async function Home() { const cookieStore = cookies(); const accessTokenObj = cookieStore.get("accessToken"); const refreshTokenObj = cookieStore.get("refreshToken"); const accessToken = accessTokenObj?.value; const refreshToken = refreshTokenObj?.value; console.log("accessToken : ", accessToken); console.log("refreshToken : ", refreshToken); let loginData; let userInfo; // 리프레시 토큰이 있을때만 sendToken 함수 실행 if (refreshToken) { loginData = await sendToken({ accessToken, refreshToken }); userInfo = loginData?.user; } // console.log("userInfo : ", userInfo); return ( <>

); }- 액세스 토큰을 보내다가, 액세스 토큰이 만료됐을때, 리프레시 토큰을 보내서 새로운 액세스 토큰을 발급받으려하는 프론트 코드type token = { accessToken: string | undefined; refreshToken: string | undefined; }; export const sendToken = async ({ accessToken, refreshToken }: token) => { try { // 쿠키에서 access 토큰값을 꺼내서 서버로 보냄 const res = await fetch("http://localhost:3002/api/users/login", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${accessToken}`, }, credentials: "include", }); // 만약에 access token이 만료가 됐다면 // refresh token을 서버로 보내서 access token을 다시 재발급 받음 if (!res.ok && res.status === 401) { const res = await fetch("http://localhost:3002/api/users/refresh", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ refreshToken: refreshToken }), credentials: "include", }); if (!res.ok) { console.log("새로운 엑세스 토큰을 받아오지 못했습니다."); throw new Error(); } else { const data = await res.json(); // access token을 브라우저에 쿠키로 저장해서 모든 페이지에서 사용할수 있도록 함 // cookieStore.set("accessToken", newAccessToken, { path: "/" }); console.log("액세스 토큰 만료 됐을때 data", data.newAccessToken); console.log(data); return data; } } else { const data = await res.json(); console.log("data : ", data); return data; } } catch (err) { console.error(err); } };- 살아있는 액세스 토큰을 받았을때 회원정보를 반환하는 백엔드 코드import { Request, Response, NextFunction } from "express"; import { HttpError } from "../../error/http-error"; import { User } from "../../models/users"; import jwt from "jsonwebtoken"; import * as dotenv from "dotenv"; dotenv.config(); const jwtSecret = process.env.JWT_SIGNATURE; export const userLogin = async ( req: Request, res: Response, next: NextFunction ) => { let user; try { const token = req.headers.authorization ? req.headers.authorization.split(" ")[1] : null; // req.cookies 자체를 읽지를 못함 console.log("req.headers.authorization : ", req.headers.authorization); if (token === undefined || token == null || !token) { return res.status(401).json({ message: "액세스 토큰이 없습니다!" }); } if (!jwtSecret) { throw new Error("JWT 시그니처를 정의해주세요!"); } let decodedToken; try { decodedToken = jwt.verify(token, jwtSecret); } catch (err) { if (err instanceof jwt.TokenExpiredError) { return res.status(401).json({ message: "토큰이 만료 되었습니다!" }); } // 토큰 검증 실패했다면 401에러 반환해서 다시 액세스토큰 재요청 하도록 하기 return res .status(401) .json({ message: "유효하지 않은 액세스 토큰입니다!" }); } if (typeof decodedToken === "object" && "id" in decodedToken) { const userRecord = await User.findOne({ where: { id: decodedToken.id, }, }); if (userRecord) { user = { id: userRecord.id, userName: userRecord.userName, userEmail: userRecord.userEmail, userId: userRecord.userId, nowLoggedIn: userRecord.nowLoggedIn, isAdmin: userRecord.isAdmin, }; } } } catch (err) { const error = new HttpError("인증에 실패했습니다.", 403); return next(error); } // 테스트용 쿠키, 이것도 전송 안됨 // res.cookie("cookie", "cookie", { // expires: new Date(Date.now() + 15 * 60 * 1000), // secure: false, // httpOnly: true, // sameSite: "lax", // path: "/", // }); return res.json({ user: user }); };- 액세스 토큰 만료 된후에 리프레시 토큰을 서버에서 받아서 새로운 액세스 토큰을 발급해주는 백엔드 코드import { Request, Response, NextFunction } from "express"; import { hashingToken } from "../../utils/hashing"; import { HttpError } from "../../error/http-error"; import { RefreshToken } from "../../models/refreshTokens"; import jwt from "jsonwebtoken"; import bcrypt from "bcrypt"; import * as dotenv from "dotenv"; import { User } from "../../models/users"; dotenv.config(); const jwtSecret = process.env.JWT_SIGNATURE; // 액세스 토큰 만료 됐을때 리프레시 토큰을 이용하여 액세스 토큰 다시 보내주는 함수 export const resendAccessToken = async ( req: Request, res: Response, next: NextFunction ) => { const { refreshToken } = req.body; // 쿠키자체를 읽지못함 // console.log("cookies : ", req.cookies); if (!jwtSecret) { throw new Error("JWT 시그니처를 정의해주세요!"); } let verifyToken; let tokenUserId; try { // 받은 리프레시 토큰을 조회 verifyToken = jwt.verify(refreshToken, jwtSecret); // 리프레쉬 토큰이 id 라는 프로퍼티를 가지고 있다면 if (typeof verifyToken !== "string" && verifyToken.hasOwnProperty("id")) { tokenUserId = verifyToken.id; } } catch (err) { return res .status(401) .json({ message: "유효하지 않은 리프레시 토큰입니다." }); } let refreshTokenData; let user; // Refresh토큰 테이블에 해시화 된 토큰 값 넣어서 일치하는아이디 있는지 찾아보기 try { refreshTokenData = await RefreshToken.findOne({ where: { userId: tokenUserId, }, }); } catch (err) { const error = new HttpError("리프레쉬 토큰 검증에 실패했어요! ", 500); return next(error); } // 만약 그에 맞는 리프레시 토큰이 존재하질 않는다면 if (!refreshTokenData) { return res.status(400).json({ message: "유효하지 않은 리프레쉬 토큰입니다.", }); } // 해당 토큰 정보에 해당하는 userId에 맞는 회원을 User 테이블에서 찾아주기 try { user = await User.findOne({ where: { id: tokenUserId, }, }); } catch (err) { const error = new HttpError( "데이터베이스에 회원이 존재하지 않습니다.", 500 ); return next(error); } // 새로운 액세스 토큰 const newAccessToken = jwt.sign( { id: tokenUserId, userEmail: user?.userEmail }, jwtSecret, { algorithm: "HS256", expiresIn: "1h", } ); console.log("newAccessToken : ", newAccessToken); // it doesn't work res.cookie("accessToken", newAccessToken, { expires: new Date(Date.now() + 10 * 60 * 1000), secure: false, httpOnly: true, sameSite: "lax", path: "/", }); res.cookie("cookie", "cookie", { expires: new Date(Date.now() + 15 * 60 * 1000), secure: false, httpOnly: true, sameSite: "lax", path: "/", }); // console.log("refresh : ", refreshTokenData.userId); return res.json({ message: "새로운 엑세스 토큰 발급 완료 !", user: user, newAccessToken: newAccessToken, }); };위의 코드가 전체 코드인데.. 처음 회원가입할땐 쿠키저장도 잘 되고 Set-Cookie도 잘되는거 보면 cors 에러가 있는것도 아닌거 같은데 뭐가 문제인지 모르겠습니다. console.log("newAccessToken : ", newAccessToken);이런식으로 테스트로 새로운 액세스 토큰을 콘솔창에 출력해보면, 새로운 토큰도 제대로 발급이 됩니다.스택오버플로우나 gpt나 구글링이나 다 해봐도 도저히 해결방법이 안나와서 글 올립니다.. 도움 부탁드립니다ㅠ

지나가는 개발자2 · Answer

- 액세스 토큰을 보내다가, 액세스 토큰이 만료됐을때, 리프레시 토큰을 보내서 새로운 액세스 토큰을 발급받으려하는 프론트 코드부분에서 try catch 안에서 401이 발생하면 밑에 코드를 실행시키는 것이 아니라 catch로 넘어가지 않나요?

codezzzz · Answer

httponly인데 프론트에서 쿠키 token 값 가져올수있나요?

dasdffqwf · Answer

axios나 fetch 요청할 때 header에 Cookie 정보 실어서 보내보세요.

Next.js13 과 Express를 이용해서 jwt 토큰을 쿠키에 담아서 로그인과 회원가입 기능을 구현중인데 다시 받는 액세스 토큰이 쿠키에 저장이 되질 않습니다..

3개의 답변

Q&A 목록