next auth + 여러 소셜로그인

구글

Next-auth 세팅 (Google)

• 공식 문서 참조: https://next-auth.js.org/providers/google

1. API 키 생성
   Google Cloud Console에서 API 및 서비스 > 사용자 인증 정보 메뉴로 이동하여 클라이언트 ID와 비밀번호를 생성합니다.
   • 생성된 클라이언트 ID와 비밀번호는 환경변수(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET)에 추가합니다.
   • 승인된 리디렉션 URI에 http://localhost:3000/api/auth/callback/google를 추가합니다.
2. […nextauth].js 파일에 다음 코드 추가:

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

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    })
  ],
});

useSession 훅으로 세션 관리

useSession 훅을 사용하여 Navbar에 로그인/로그아웃 적용해보기

import { useSession, signIn, signOut } from "next-auth/react";

export default function Component() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        Signed in as {session.user.email} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }

  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  );
}

naver

NextAuth 설정 (Naver 로그인)

1. 네이버 API 설정

1. https://developers.naver.com/main/에서 네이버 디벨로퍼 가입 후, 네이버 로그인 기능을 클릭합니다.
2. 오픈 API 이용 신청에서 서비스 URL에 로컬 호스트 추가:
   • http://localhost:3000 추가
3. Callback URL 추가:
   • http://localhost:3000/api/auth/callback/naver 추가
4. 애플리케이션 정보의 클라이언트 아이디 및 시크릿 키를 환경변수로 저장:
   • NAVER_CLIENT_ID
   • NAVER_CLIENT_SECRET

2. NextAuth 설정

[...nextauth].js 파일에 다음 코드를 추가:

import NaverProvider from "next-auth/providers/naver";

export const authOptions = {
  providers: [
    NaverProvider({
      clientId: process.env.NAVER_CLIENT_ID,
      clientSecret: process.env.NAVER_CLIENT_SECRET,
    }),
  ],
};

export default NextAuth(authOptions);

카카오

Next-auth 세팅 (Kakao: Next-auth Kakao Provider)

1. https://developers.kakao.com/ 카카오 개발자 사이트에 가입 후, 앱 등록 > 동의 항목 설정
   • 내 앱 > 앱설정 > 앱 키 > REST API 키 복사 (KAKAO_CLIENT_ID)

2. 내 앱 > 제품 설정 > 카카오 로그인 > 보안에서 Client Secret 코드 발급 (KAKAO_CLIENT_SECRET)

3. 내 앱 > 제품 설정 > 카카오 로그인 > 활성화

4. 내 앱 > 제품 설정 > 카카오 로그인 > 동의 항목 구성 (닉네임, 필수, 프로필, 이메일)

5. 내 앱 > 제품 설정 > 카카오 로그인 > Redirect URI > http://localhost:3000/api/auth/callback/kakao

6. 애플리케이션 정보의 클라이언트 아이디 및 시크릿 키 저장

2. [nextauth].js 파일에 다음 코드 추가:

import KakaoProvider from "next-auth/providers/kakao";

providers: [
  KakaoProvider({
    clientId: process.env.KAKAO_CLIENT_ID,
    clientSecret: process.env.KAKAO_CLIENT_SECRET,
  })
]

2. Prisma Schema 변경: refresh_token_expires_in (Int) optional 필드 추가

model Account {
  id                     String   @id @default(cuid())
  userId                 Int
  type                   String
  provider              String
  providerAccountId      String
  refresh_token          String?  @db.Text
  refresh_token_expires_in Int?
  ...
}

로그인시 callbackUrl 속성 추가

• 로그인 후, 로그인 화면으로 돌아오지 않고 루트 페이지로 가도록 callbackUrl 속성 추가

Next Auth 공식 도큐: https://next-auth.js.org/getting-started/client#signin

signIn('google', { callbackUrl: 'http://localhost:3000/bar' })

About 유재석

개발자 유재석 입니다. Web Developer.

Email : jaeseok9405@gmail.com

Website : https://github.com/yoo94