프론트엔드

유튜브 강좌로 프론트엔드 개발을 배우고 아이디어를 직접 개발해서 스타트업 창업을 목표로 합니다.

#NextAuth

Next.js 14 에서 NextAuth 라이브러리를 활용하여 구글 로그인 만들기

Next.js 는 Next Auth 라이브러리를 활용하여 로그인을 쉽게 관리할 수 있다.

1. 설치

터미널에 아래 명령어 입력해서 라이브러리 설치

npm install next-auth

2. 라우터 추가

/app/api/auth/[...nextauth]/route.js

import { authOptions } from "@app/auth"
import NextAuth from "next-auth/next"

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

3. 라우터 추가

JWT 토큰의 생성 및 검증은 NextAuth 라이브러리 내부에서 자동으로 처리된다. 사용자가 로그인할 때마다 NextAuth가 JWT 토큰을 생성하고, 요청이 들어올 때마다 해당 토큰을 검증하고 세션을 관리한다.

/app/auth.js

import NextAuth, { getServerSession } from 'next-auth/next'
import prisma from "@prisma/prisma"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { isSameDay } from '@lib/utils'
import { grantAndIncrementStamp } from '@lib/actions'

export const authOptions = {
  pages: {
    signIn: "/",
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  session: {
    strategy: 'jwt',
    maxAge: 1 * 24 * 60 * 60
  },
  callbacks: {
    async jwt({ token, user, account }) {
      if (user) token.accessToken = account.access_token
      
      return token
    },
    async session({ session, token }) {
      session.user.id = token.sub
      session.user.name = token.name
      session.user.email = token.email
      session.user.image = token.picture
      session.user.accessToken = token.accessToken

      return session;
    },
  },
};

export default NextAuth(authOptions);

export function auth() {
  return getServerSession(authOptions);
};

4. Provider 생성

/lib/Provider.js

'use client'

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

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

5. Layout.js 에 Provider 적용

/app/layout.js

import Provider from "@lib/Provider";
import "@style/globals.css";

export default async function RootLayout({ children }) {

  return (
    <html lang="kr">
      <body>
        <Provider>
            <div>{ children }</div>
        </Provider>
      </body>
    </html>
  );
}

6. page.js 에 로그인 버튼 적용

/app/page.js

"use client";

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

export default function Home() {
  return (
    <button type="button" onClick={() => signIn("google")}>구글 로그인</button>
  );
}

NextAuth 홈

https://next-auth.js.org/getting-started/example

작성자 @하보리·0 ·9달 전

[이전 키워드] 키슈 베타서비스

[키슈공지] 댓글 등록, 수정, 삭제, 답글 등록, 수정, 삭제 기능이 업데이트 되었습니다.

[다음 키워드] NextAuth

NextAuth 콜백에서 sighIn 함수 역할

채널을 구독하면 구독한 채널에 키워드를 등록할 수 있습니다.