NextAuth 사용해서 Github 로그인 구현하기

NextAuth를 이용해서 Github 로그인을 간단하게 구현할 수 있다.

 

1. next-auth를 설치한다

yarn add next-auth

 

2. github에 OAuth 셋팅하기

github 로그인을 이용하기 위해서는
github에 가서 약간의 설정을 해줘야한다.

New OAuth App를 클릭해서 권한을 만들어준다.

표시한 부분을 입력해준다.

Client ID와 그 아래 Secret key가 필요하다.

 

3. NextAuth.js 공식문서 참고해서 적용하기

그리고 나서 NextAuth.js 공식 문서에 있는거 그대로 따라해주면 된다.

Getting Started | NextAuth.js

 

pages/api/auth 경로에 [...nextauth].js 파일을 생성해준다.
해당 파일에 아래 코드를 적어준다.
대신 process.env.GITHUB_ID랑 process.env.GITHUB_SECRET는 내가 발급받은 것으로 적용해야한다.
.env 파일에 작성해놓고 사용하면된다.

import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    // ...add more providers here
  ],
}
export default NextAuth(authOptions)

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

signIn, signOut 기능을 이용할 수 있다.