Next-auth google connection error in AWS EC2

blog_ag 프로젝트를 진행하며 생겼던 ReactQuill 관련 에러 및 해결을 기록한 글입니다.

AWS EC2 환경에서 배포 중 Next-Auth의 Google 로그인 부분에서 리디렉션 오류 발생
👉🏻 구글 로그인 클릭시 원래 페이지로 리디렉션 되지 않고 http://localhost:3000/api/auth/~~로 리디렉션

❗️에러 해결 체크 사항

1. 구글 디벨로퍼 설정 확인

2. 작성한 코드 확인

3. 우분투 환경에서 작성한 환경변수 확인

❗️Resolution

1. 구글 디벨로퍼 설정 확인

등록한 프로젝트 - 사용자 인증 정보 - 승인된 자바스크립트 원본 & 승인된 리디렉션 URI에 생성한 인스턴스 URI 추가

2. 작성 코드 확인

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
});

작성한 [...nextauth].ts파일에 Google Provider에 clientId, clientSecret, secret 등록 완료

3. 우분투 환경에서 작성한 환경변수 확인

❗️작성한 환경 변수 중 NEXTAUTH_URL이 원인이었다.

NEXTAUTH_URL은 로그인시 다시 리디렉션될 URL을 설정하는 곳인데, 수정전 환경변수에 설정된 URL은 http://localhost:3000이었다.
하지만 생성된 인스턴스로 할당된 URL이 아니기 때문에 연결오류가 발생한 것.

따라서, CLI에서 우분투로 접속한 뒤 생성한 환경변수를 인스턴스에 할당된 URL로 변경하자 해결되었다.

Ubuntu CLI Command
1. 환경변수 생성/수정 : vim .env
2. 입력모드 : i
3. 종료 : :q
4. 저장하지않고 종료 : :q!
5. 저장하고 종료 : :wq

우분투 환경에서 생성한 환경변수(나의 경우엔 .env 파일)는 숨겨져 있어 일반적인 명령어로는 볼수 없으니 ls -a를 이용하여 확인할수 있다.