미해결
[리뉴얼] React로 NodeBird SNS 만들기
next-auth 로그인 시 unauthorized 문제
문제가 몇일째 안풀리는게 있어 문의드려요제가 next-auth를 사용해서 로그인 프로세스를 해보고 있습니다.로컬에서 별도로 배포환경 만들어서 테스트를 했을 때에는 잘 되는데 배포시에 계속 Unauthorized 에러가 발생해서요제가 작성한 [...nextauth].ts 코드입니다.import NextAuth, { User } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { refreshAccessToken } from 'utils/tokenRefresh';
export default NextAuth({
providers: [
CredentialsProvider({
name: 'Credentials',
credentials: {
userId: { label: 'UserId', type: 'text', placeholder: 'jsmith' },
password: { label: 'Password', type: 'password' },
},
authorize: async (credentials) => {
const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/users/signin`, {
method: 'POST',
body: JSON.stringify({
userId: credentials!.userId,
password: credentials!.password,
}),
headers: { 'Content-Type': 'application/json' },
});
const user = await res.json();
// 로그인 성공 시 사용자 객체를 반환하고, 실패 시 null을 반환
if (res.ok && user) {
console.log('ok user', user);
return user;
} else {
console.log('error user', user);
return false;
}
},
}),
],
secret: process.env.NEXTAUTH_SECRET,
// session: {
// strategy: 'jwt',
// maxAge: 0, // 브라우저가 닫히면 세션 종료
// // updateAge: 24 * 60 * 60, // 24시간마다 세션 갱신 (옵션)
// },
callbacks: {
async jwt({ token, user }) {
// 사용자 로그인 시 토큰 설정
if (user) {
return {
...token,
accessJwt: user.result?.accessJwt,
refreshJwt: user.result?.refreshJwt,
companyId: user.result?.companyId,
userName: user.result?.userName,
accessTokenExpires: Date.now() + 3600 * 1000,
};
}
// 토큰 만료 확인 및 리프레시
if (Date.now() > token.accessTokenExpires!) {
const newAccessJwt = await refreshAccessToken(token.refreshJwt!);
return refreshAccessToken(newAccessJwt);
}
return token;
},
async session({ session, token }) {
if (token && token.accessJwt) {
const customUser = session.user as User;
if (!customUser.result) {
customUser.result = {
accessJwt: '',
refreshJwt: '',
companyId: '',
userName: '',
};
}
customUser.result.accessJwt = token.accessJwt;
customUser.result.refreshJwt = token.refreshJwt;
customUser.result.companyId = token.companyId;
customUser.result.userName = token.userName;
session.user = customUser;
}
return session;
},
},
});
NEXT_PUBLIC_BACKEND_URL 환경변수는 별도의 백엔드를 구성한 주소이구요 배포는 도커를 사용했습니다.FROM node:20.10 as builder
# pnpm 설치
RUN npm install -g pnpm
WORKDIR /usr/src/app
COPY package*.json ./
RUN pnpm install
ARG NEXT_PUBLIC_BACKEND_URL
ARG NEXTAUTH_SECRET
COPY . .
RUN NEXT_PUBLIC_BACKEND_URL=https://${NEXT_PUBLIC_BACKEND_URL} NEXTAUTH_SECRET=${NEXTAUTH_SECRET} pnpm run build
FROM node:20.10
RUN npm install -g pnpm
WORKDIR /usr/src/app
COPY --from=builder /usr/src/app/package*.json ./
RUN pnpm install --prod
COPY --from=builder /usr/src/app .
# COPY --from=builder /usr/src/app/.next ./.next
EXPOSE 3000
CMD ["pnpm", "run", "dev"]NEXTAUTH_SECRET은 프론트 주소를 도커 실행 시 넣어줘야 한대서 도커 실행 할 때 환경변수로 따로 넣어줬구요Docs, Stackoverflow, ChatGPT 등 여러 방면으로 찾아봤는데 해결이 안되더라구요..강의하고는 별개 내용이긴 한데 더이상 물어볼 데가 없어서 강사님께 여쭈어봅니다..
