리액트 프로젝트에서 소셜 로그인 구현 단계는 다음과같습니다.
1.제일 먼저 구글 클라우드 콘솔 설정
콘솔에서 프로젝트 생성 후 OAuth 클라이언트 ID를 생성합니다.
다음 승인된 리디렉션 URI에 아래와 같은 URI를 추가합니다:
- http://localhost:3000/api/auth/callback/google (개발 환경)
- https://your-production-domain.com/api/auth/callback/google (배포 환경)
2.프로젝트 설정
터미널에서 프로젝트에 NextAuth.js를 설치합니다:
npm install next-auth
프로젝트 루트에 .env.local 파일을 생성하고, 아래 내용을 추가합니다:
3.API 라우트 설정
app/api/auth/[…nextauth].js 파일을 생성하고 다음 내용을 추가합니다:
4.버튼을 구현하고 핸들러 메서드를 구현합니다.
주의할 점은 signIn() 메서드를 사용할때 꼭 위 코드처럼 next-auth/react 라이브러리를 임포트 해줌니다.
다음 소셜 로그인 버튼을 눌러보면 콘솔에서 구글 계정정보를 확인 할수있습니다.
