Next-auth

✨ 들어가기

NextAuth.js는 Next.js 애플리케이션을 위한 Social 로그인을 쉽게 관리할 수 있는 라이브러리입니다 .

✨ 설치하기

yarn add next-auth

✨ 폴더구조 세팅하기

└── .env
└── 📁 pages
    ├── 📁 api
    │   └── 📁 auth
    │       └── [...nextauth].ts
    ├── _app.tsx
    └── _document.tsx

✨ 환경변수 설정하기

네이버, 카카오, 구글 로그인 총 3개의 소셜 로그인을 진행할 예정이므로 이에대한 개발자 등록을 진행한 뒤
각각에 해당하는 ID or Key / Secrect 을 환경변수로 설정해준다.

NEXT_PUBLIC_KAKAO_API_KEY=
NEXT_PUBLIC_KAKAO_JS_KEY=

NEXT_PUBLIC_KAKAO_SECRECT=nori

NEXT_PUBLIC_NAVER_ID=
NEXT_PUBLIC_NAVER_SECRET=

NEXT_PUBLIC_GOOGLE_CLIENT_ID=
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET=

1️⃣ Kakao

Kakao Developers 👈 카카오 개발자 센터로 들어간다.

내 애플리케이션에 들어가서 애플리케이션을 추가한다.

REST API 키를 .env 파일에 추가하고, Secret 키는 아무 문자열이나 입력해준다.

플랫폼 메뉴에서 Web으로 들어가 사이트 도메인을 설정해준다. 지금은 localhost에서 테스트 중이므로  http://localhost:3000  로 설정해준다.

카카오 로그인 메뉴로 들어가 활성화 설정, OpenID Connect 활성화 설정을 모두 ON으로 켜준다. Redirect URI 로는  http://localhost:3000/api/auth/callback/kakao 로 설정한다.

동의항목에서 서비스에서 사용할 정보들을 체크해준다.

 

2️⃣ Naver

Naver Developers.  👈 네이버 개발자 센터로 들어간다.

Application으로 들어가서 원하는 API를 선택한 뒤 Application 등록을 해준다. (네이버 로그인만 사용)

 

Client ID와 Secret 각각을 .env 파일에 추가해준다.

API 설정으로 들어가서 네이버 로그인에서 사용할 정보들을 체크한다.

서비스 URL로는 웹서비스에서 소셜 로그인을 적용할 곳으로 설정하고 Callback URL로는 api/auth/callback/naver를 설정해준다.

 

3️⃣ Google

Google Developers

Google Cloud 에 들어가서 검색 필드 옆의 화살표 ⬇️ 를 선택한다.

새 프로젝트 만들기를 선택하여 프로젝트를 생성한다.

API 및 서비스로 들어가서 + 사용자 인증 정보 만들기로 들어가 우선 API 키를 만든다.

웹 애플리케이션으로 선택한 후 승인된 자바스크립트, 리디렉션 URI를 입력해준다.

이후에 클라이언트 ID 와 클라이언트 보안 비밀이 생성되므로 이를 .env 파일에 넣어주면 완료 ! 

 

✨ SessionProvider 적용하기

  👇 각각의 소셜로그인에 대한 정보를 가져오기 위해서 SessionProvider를 적용해야 한다. 

import { Global, ThemeProvider } from '@emotion/react';
import type { AppProps } from 'next/app';
import { RecoilRoot } from 'recoil';
import { Header } from '../components/common';

import GlobalStyle, { resetStyle } from '../styles/globalStyle';
import theme from '../styles/theme';
import { SessionProvider } from 'next-auth/react';
export default function App({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <Global styles={resetStyle} />
        <Global styles={GlobalStyle} />
        <Header />
        <SessionProvider session={pageProps.session}>
          <Component {...pageProps} />
        </SessionProvider>
      </ThemeProvider>
    </RecoilRoot>
  );
}

 

✨ NextAuth 적용하기

👇 소셜 로그인으로 Kakao, Naver, Google 을 사용할 것이므로 이를 사용하기 위해 provider를  pages/api/auth/[...nextauth].ts 에 정의해준다.

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import NaverProvider from 'next-auth/providers/naver';
import KakaoProvider from 'next-auth/providers/kakao';
export default NextAuth({
  providers: [
    KakaoProvider({
      clientId: `${process.env.NEXT_PUBLIC_KAKAO_API_KEY}`,
      clientSecret: `${process.env.NEXT_PUBLIC_KAKAO_SECRECT}`,
    }),
    NaverProvider({
      clientId: `${process.env.NEXT_PUBLIC_NAVER_ID}`,
      clientSecret: `${process.env.NEXT_PUBLIC_NAVER_SECRET}`,
    }),
    GoogleProvider({
      clientId: `${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}`,
      clientSecret: `${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET}`,
    }),
  ],
});

✨  Social Login 사용하기

👇 pages/login.tsx 에서 소셜 로그인을 사용하고자 한다.

Kakao, Naver, Google Provider를 연결하였으므로 이는 singIn(소셜이름) 함수로 호출하여 사용하면 된다.

import {
  ImgKakaoLogo,
  ImgGoogleLogo,
  ImgNaverLogo,
} from '../public/assets/images';
import Image from 'next/image';
import styled from '@emotion/styled';
import { signIn, signOut, useSession } from 'next-auth/react';

export default function login() {
  const { data, status } = useSession();
  console.log(data?.user);
  return (
    <StLoginWrapper>
      <Image
        src={ImgNaverLogo}
        width={56}
        height={56}
        style={{ padding: '1.5rem' }}
        onClick={() => signIn('naver')}
      />
      <Image
        src={ImgKakaoLogo}
        width={56}
        height={56}
        style={{ padding: '1.5rem' }}
        onClick={() => signIn('kakao')}
      />

      <Image
        src={ImgGoogleLogo}
        width={56}
        height={56}
        style={{ padding: '1.5rem' }}
        onClick={() => signIn('google')}
      />
    </StLoginWrapper>
  );
}
const StLoginWrapper = styled.section`
  display: flex;
  justify-content: center;
  align-items: center;
`;

 

---

💛 결론

Next.js 에서 소셜 로그인을 편리하게 해주는 next-auth 라이브러리로 회원가입 및 로그인이 아주 편리해졌다.
더불어 로그인 화면을 커스텀해서 사용할 수 있다는 것 또한 큰 장점으로 보인다.