[Next.js] 로컬환경에서 GitHub OAuth가 작동하지 않던 문제

개요

---

 

https://github.com/Seang-G/Next_Blog

GitHub - Seang-G/Next_Blog

Next.js 풀스택 활용법을 익히기 위해 

Next.js(FE, BE) - Prisma(ORM) - VerCel Postgres(DB) - GitHub OAuth(인증)를 활용한

블로그 서비스 프로젝트를 진행하다 발생한 문제이다.

 

 

 

문제

---

 

 

Vercel에서 작성한 가이드를 보며 프로젝트를 진행하다가  GitHub OAuth부분에서 문제가 발생했다.

How to Build a Fullstack App with Next.js, Prisma, & PostgreSQL

 

 

/api/auth/signin

깃허브 로그인 버튼은 잘 나왔으나, 이를 클릭했더니..

 

(O_O)...

ERR_SSL_PROTOCOL_ERROR가 발생했다.

 

여기서 이상한 점은 Vercel에서 호스팅 중인 사이트에서는 멀쩡하게 작동한 것이다.

 

 

원인 및 시도

---

 

http를 사용 중인 localhost환경에서 https로 접속을 시도해서 발생한 문제인 듯했다.

 

GitHub OAuth에서는 http로 콜백 하도록 설정했고,

방화벽, 실시간 보호, 크롬 보안은 전부 꺼봤지만 같은 문제가 계속 발생했다.

 

 

해결

---

 

로컬환경을 https로 바꾸기로 하였고 그 방법은 검색을 통해 아래 링크에서 찾을 수 있었다.

How can I use Next.js over HTTPS instead of HTTP? · vercel next.js · Discussion #10935

 

npm run dev를 실행시킬 때 next dev에 --experimental-https를 붙여주면 된다.

// 기존
// pakage.json

"scripts": {
    "dev": "npx prisma generate && WATCHPACK_POLLING=true next dev",
    "build": "next build",
    "start": "next start"
},

//변경
//pakage.json

"scripts": {
    "dev": "npx prisma generate && WATCHPACK_POLLING=true next dev --experimental-https",
    "build": "next build",
    "start": "next start"
},

npx prisma generate는 Prisma Client 스키마 파일 변경을 업데이트해준다.

WATCHPACK_POLLING=true는 WSL에서 Fast Refresh가 작동하지 않을 때 사용한다.

Fast Refresh는 React에서 파일이 변경되었을 때 변경사항이 바로 반영되는 기능을 말한다.

 

이후 GitHub OAuth 콜백 링크를 https로 수정하고 테스트해 본 결과

정상적으로 로그인된 것을 확인할 수 있다!

 

 

끝...?

---

사실 --experimental-https를 사용하면서 큰 문제가 발생했었다.

프로젝트의 next.js 버전은 12 이지만,

--experimental-https는 13.5에 추가됐다는 것이다...

 

next.js를 업데이트하고 많은 문제가 발생했지만, 이는 다음에 다뤄보려 한다.