정중식의 개발공부로그

회원기능 만들기 Auth.js사용한 소셜 로그인

03 May 2023 | nextjs

NextAuth (Auth.js) 라이브러리를 사용하면 소셜로그인 구현이 쉽다.

NextAuth 세팅

라이브 러리 설치

npm install next-auth

pages/api/auth/[…nextauth].js
위의 경로에 파일 만들고, 아래 코드처럼 입력

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

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

참고로 소셜로그인은 기본적으로 JWT방식이 기본이라서 secret : 란에 JWT 생성용 암호를 임의로 길게 입력해주면 된다.

내 시크릿 코드가 깃허브에 그대로 유출되는거를 방지하기 위해서 .env 파일에 암호를 써서 사용해주자.

로그인 버튼과 페이지 생성

next-auth라이브러리안에 있는 기능을 설정해주면 자동으로 로그인페이지를 제작헤준다.
onClick이 들어가니깐 ‘use client’ 컴포넌트로 만들어서 집어넣는다.


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

// 로그인기능
<button onClick={()=>{ signIn() }}>로그인버튼</button>

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

layout.js 파일에 로그인 기능이있는 컴포넌트인 LoginBtn 컴포넌트 불러오기

(layout.js는 서버컴포넌트라서, 클라이언트 컴포넌트 하나를 따로 생성해서 불러와줬디.)

(app/layout.jsx)

import LoginBtn from "./LoginBtn.js"

(...)
<body>
  <div className="navbar">
    <Link href="/" className="logo">Appleforum</Link>
    <Link href="/list">List</Link>
    <LoginBtn></LoginBtn>
  </div>
  {children}
</body>

페이지에서 로그인된 유저의 정보 출력을 할 때

서버 컴포넌트에서 유저정보 가져와서 클라이언트 컴포넌트에 전송해주는게 낫다. useSession 함수는 html을 다 보여주고나서 한 박자 늦게 실행될 수 있기 때문이다.

  • client component의 경우
(page.js 옆에 있는 layout.js)

'use client'

import { SessionProvider } from "next-auth/react"

export default function Layout({ children }){
  return (
    <SessionProvider>
      {children}
    </SessionProvider>
  )
}

SessionProvider로 감싸놓으면 이 안에 들어가는 client component 컴포넌트들은 로그인된 유저 정보를 출력할 수 있다.

(page.js)

'use client'

import { useSession } from 'next-auth/react'
export default function Page(){
  let session  = useSession();
  if (session) {
    console.log(session)
  }
(생략)

useSession() 쓰면 그자리에 지금 로그인한 유저의 정보가 담겨있다.

  • server component의 경우
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)
  }

getServerSession() 가져오고 authOptions 가져와서 컴포넌트안에서 사용하면 그 자리에 유저 정보가 남는다.

let session 같은 변수에 담아서 출력해보거나 하면 된다.

참고로 authOption은 맨 위에서 NextAuth 세팅 카테고리해서 작성한 파일이다.

Related Posts