Next-Auth를 통한 소셜로그인

---

깃허브 OAuth 설정

1. github 로그인을 한다.

 

2. setting을 들어간다.

 

3. 왼쪽 메뉴에서 젤 아래 있는 Developer settings에 들어간다.

4. OAuth Apps 버튼을 누른다.

5. 새로운 어플리케이션을 만든다.

6. 앱 이름과 URL을 기입한다.

=> URL의 경우 배포하지 않은 개발 중인 사이트라면 아래와 같이 기입한다.

7. Client ID/PW 발급

=>PW 발급은 Generate a new clint secret을 누르면 된다.

---

소셜로그인 구현

 

1. 라이브러리 설치

npm install next-auth

 

2. 폴더 생성 후 js파일 생성

pages/api/auth/[...nextauth]. js 파일을 만든다.

 

3. 코드 작성

=> github가 아닌 다른 소셜로그인도 providers 안에 구현하면 된다.

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GithubProvider({
      clientId: '발급ID',
      clientSecret: '발급Secret',
    }),
  ],
  secret : 'jwt 생성시쓰는암호'
};
export default NextAuth(authOptions);

4. jwt 암호 설정 

=> 기본적으로 소셜로그인은 jwt(token) 방식을 지원하기 때문에 필요함.

 

5. 기능을 구현할 페이지 생성

=> onClick() 함수를 사용하므로 client component로 구현할 것.

 

6. 코드 작성

"use client";
import { signIn, signOut } from 'next-auth/react'

<button onClick={()=>{ signIn() }}>로그인버튼</button>
<button onClick={()=>{ signOut() }}>로그아웃버튼</button>

=> signIn = 로그인

=> signOut = 로그아웃

 

7. 로그인 시 깃허브 소셜로그인 창이 뜬다.

---

유저 정보 출력

 

1. authOptions를 import한다.

=> 발급 id 넣었던 js파일

2. getServerSeesion을 import 한다.

import { authOptions } from "/pages/api/auth/[...nextauth].js"
import { getServerSession } from "next-auth"

export default function Page(){
  let session = await getServerSession(authOptions)
  if (session) {
    console.log(session)
  }

 

=> console.log로 확인을 해보면 다음과 같이 저장되어 있다.

{
  user: {
    name: '',
    email: '',
    image: ''
  }
}

이제 유저 정보를 불러와서 사용할 수 있다.

=> 로그인 시 닉네임을 표시하거나 ~ 등등으로 활용

---

소셜로그인을 auth 라이브러리를 통해 정말 쉽고 간단하게 구현할 수 있다는 것을 알았던 강의!

이러한 라이브러리 개발자들은 어떻게 만드는지 좀 궁금하다.

다양한 라이브러리들이 차고 넘치는데, 뜯어보면 막상 되게 어지럽고 복잡한 코드가 많아 보인다..

아직 갈 길이 멀구나!! 파이팅 하자!!