데브허브 | DEVHUB | Simplest Way to Add Google Login/Signup with Better Auth (2025 Tutorial)Simplest Way to Add Google Login/Signup with Better Auth (2025 Tutorial)
- Better Stack을 활용하여 Google 로그인 및 회원가입 기능을 구현하는 것이 핵심 목표입니다. 🎯
- 이메일 및 비밀번호 어댑터가 이미 구현되어 있어야 하며, 그렇지 않은 경우 관련 Better Stack 구현 비디오를 먼저 시청해야 합니다. 🛠️
- Google Cloud Console에서 OAuth 2.0 클라이언트 ID(웹 애플리케이션)를 생성하고, 승인된 리디렉션 URL(예:
http://localhost:3000/api/auth/callback/google)을 추가하여 Google 자격 증명을 확보해야 합니다. ☁️
- 발급받은 Google 클라이언트 ID와 클라이언트 시크릿을
.env 파일에 GOOGLE_CLIENT_ID 및 GOOGLE_CLIENT_SECRET으로 추가해야 합니다. 🔑
better-o.ts 파일에 Google 소셜 프로바이더를 클라이언트 ID와 시크릿을 사용하여 구성해야 합니다. ⚙️
- Google 로그인 버튼 클릭 시
OClient.signIn('google', { callbackUrl: '/your-redirect-path' }) 함수를 호출하여 Google 로그인 흐름을 시작합니다. 🚀
- Google 로그인 버튼의
type을 button으로 설정하여 기본 폼 제출 동작을 방지해야 합니다. 🛑
- Google Cloud Console에서 올바른 프로젝트 아래에 자격 증명을 생성하여 로그인 시 표시되는 프로젝트 이름이 애플리케이션과 일치하도록 해야 합니다. 💡
- Better Stack은 인증 솔루션으로 매우 강력하게 추천됩니다. 👍