커서AI로 만든 게시판 웹서비스 - 구글 로그인 연동

지난 주 게시판 웹서비스 만들기에 이어서 이번에는 기능을 조금 더 확장해 본 경험에 대하여 포스팅합니다.

구글 로그인 인증(Auth) 추가

 

구글 로그인 인증 (Auth) 추가

지난 포스팅에서도 작성하였지만 생성된 md 파일들을 그대로 Cursor AI에 넣고, 아래와 같은 방식으로 진행하면서 바로 구글 로그인 인증 (Auth)을 추가하였습니다.

그런데 실제로 구현된 것을 실행하였을 때, 한 번에 성공하지는 못했었습니다. 그래서 해당 에러 메시지를 복붙해서 수정하면서 문제를 해결했습니다.

구글 로그인을 시도하였을 때, 아래와 같은 에러가 발생했습니다. 확인 후 수정사항을 제안해주세요.

Unhandled Runtime Error
FirebaseError: Firebase: Error (auth/configuration-not-found).

Call Stack
createErrorInternal
node_modules/firebase/node_modules/@firebase/auth/dist/esm2017/index-68602d24.js (503:1)
_fail
node_modules/firebase/node_modules/@firebase/auth/dist/esm2017/index-68602d24.js (471:1)
_performFetchWithErrorHandling
node_modules/firebase/node_modules/@firebase/auth/dist/esm2017/index-68602d24.js (947:1)
async _validateOrigin
node_modules/firebase/node_modules/@firebase/auth/dist/esm2017/index-68602d24.js (9690:33)

Authentication > Sign-in method 탭 이동
Google 제공자 클릭
"사용 설정" 토글 활성화

Cursor AI 에서 가이드해준 내용을 따라가면서 Firebase > Authentication 에 설정을 하였습니다.

 

Authentication > Settings 탭 이동
승인된 도메인 섹션 확인
localhost가 목록에 있는지 확인 (기본적으로 포함되어 있어야 함)
없으면 "도메인 추가" 버튼으로 localhost 추가

다음 단계도 마찬가지로 Cursor AI 에서 가이드해준 내용을 따라가면서 Firebase > Authentication 에 localhost 를 설정해주었습니다.

localhost 이외에 실제 URL 도 추가해주고 배포하면 구글 연동이 쉽게 되는 것을 확인할 수 있습니다.

 

정말... 엄청 나네요. 그리고 사용자를 확인해보면 이렇게 users 리스트에 데이터가 있는 것을 조회할 수 있습니다.

Cursor AI 덕분에... 비개발자들도 구글 연동을 쉽게 할 수 있겠습니다.