[Next] Next.js13 Next Auth로 구글 로그인 구현하기 (1)

Next.js에서 Next Auth 라이브러리를 사용해서 구글, 카카오, 라인 등 로그인 기능을 쉽게 구현할 수 있다.

 

1. 설치

터미널에 아래 명령어 입력해서 라이브러리 설치하기

npm install next-auth

 

2. API Route 추가

사용 방법

 

Next.js13은 pages에서 app 디렉토리로 바뀌었기 때문에 app 디렉토리에 api/auth/[...nextauth] 폴더를 생성하고

그 안에 route.ts 또는 js파일을 만든다.

([...] 대괄호로 감싸는 이유는 유연하게 동적 경로를 만들기 위해서)

import NextAuth from "next-auth"

const handler = NextAuth({
  ...
})

export { handler as GET, handler as POST }

 

위 처럼 코드를 복사해서 넣고 ...에는 Providers를 확인해서 지원하는 소셜 로그인 서비스를 찾아서 코드를 삽입하면 된다.

구글, 네이버, 카카오, 라인, 애플 등 지원되는게 엄청 많다! 예를 들어 구글 로그인을 구현하려고 할 때 Example에 있는 코드를 넣으면 된다.

 

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    }),
  ],
});

export { handler as GET, handler as POST };

여기서 파일을 ts로 생성했다면 오류가 날텐데 뒤에 || "" 를 입력해준다.

 

3. 구글  로그인 API

이제 클라이언트 ID를 생성하고 키를 발급받아야 하기 때문에 구글 클라우드에 가서 새 프로젝트를 생성한다. 

- 프로젝트 이름 입력 후 만들기 > API 및 서비스 > 사용자 인증 정보 클릭

- 사용자 인증 정보 만들기 > API 키 클릭

 

API 키 생성 완료

 

- 사용자 인증 정보 만들기 > OAuth 클라이언트 ID > 동의 화면 구성 클릭

- OAuth 동의 화면에서 외부 체크 후 만들기 클릭

 

- 동의 화면에서 로그인 시 나올 앱 이름, 이메일 등 필수 입력값만 넣고 넘어가기 

- 범위 추가 또는 삭제 버튼 클릭

 

로그인 시 필요한 정보 체크하고 업데이트 > 저장 후 계속 버튼 클릭해서 넘어가기

 

ADD USERS 클릭 후 테스트 사용자 추가하고 저장 후 계속 버튼 클릭해서 다음으로 넘어가면 요약화면이 나온다!

 

다시 사용자 인증 정보에서 사용자 인증정보 만들기 > OAuth 클라이언트 ID 클릭

애플리케이션 유형은 웹 애플리케이션 선택하고 이름 작성 후

승인된 자바스크립트 원본에 실제 사용할 URL 주소를 넣어주면 되는데 나는 로컬호스트로 넣었다. (배포할 땐 꼭 바꿔주기)

 

승인된 리디렉션 URI엔 http://localhost:3000/api/auth/callback/google 넣어주기

 

.env 파일에 생성된 클라이언트 ID와 시크릿키를

GOOGLE_CLIENT_ID와 GOOGLE_CLIENT_SECRET 으로 추가해주기