inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

next-auth 로그인 시 unauthorized 문제

758

작성자 없음

작성한 질문수 0

0

문제가 몇일째 안풀리는게 있어 문의드려요

제가 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 등 여러 방면으로 찾아봤는데 해결이 안되더라구요..

강의하고는 별개 내용이긴 한데 더이상 물어볼 데가 없어서 강사님께 여쭈어봅니다..

 

react redux node.js express next.js next-auth docker

답변 2

0

안정환

혹시, 문제 해결 하셨나요?

저도 클라우드에 배포할 때 비슷한 문제가 있어서 해결한 경험을 공유 드립니다.

${process.env.NEXT_PUBLIC_BACKEND_URL}

이 부분을 public IP가 아닌 클라우드의 private IP로 적어서 로그인 해보시면 되실수도 있을거 같아요.

도움이 되셨길 바랍니다.

0

제로초(조현영)

RBAC Access denied를 해결하시면 되지.않을까 싶습니다.

넥스트 버젼 질문

0

78

2

로그인시 401 Unauthorized 오류가 뜹니다

0

90

1

무한 스크롤 중 스크롤 튐 현상

0

176

1

특정 페이지 접근을 막고 싶을 때

0

103

2

createGlobalStyle의 위치와 영향범위

0

96

2

인라인 스타일 리렌더링 관련

0

92

2

vsc 에서 npm init 설치시 오류

0

147

2

nextjs 15버전 사용 가능할까요?

0

160

1

화면 새로고침 문의

0

122

1

RTK에서 draft, state 차이가 있나요?

0

153

2

Next 14 사용해도 될까요?

0

452

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

349

1

url 오류 질문있습니다

0

211

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

375

1

sudo certbot --nginx 에러

0

1279

2

Minified React error 콘솔에러 (hydrate)

0

470

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

247

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

328

1

npm run build 에러

0

519

1

front 서버 npm run build 중에 발생한 에러들

0

382

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

338

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

289

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

240

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

202

1