[Next.js] NextAuth.js + Prisma 로그인 기능 개발하기

 

업체별 인증코드 발급받기

 

구글

https://console.cloud.google.com/apis/dashboard

Google 클라우드 플랫폼

 

 

링크에 접속하여 프로젝트를 추가합니다.

 

 

 

User Type을 외부로 선택합니다.

 

 

 필수 정보만 입력하고 저장 후 완료합니다.

 

 

 

 

 사용자 인증 정보 > 사용자 인증 정보 만들기 > OAuth 클라이언트 ID 생성

 

 

 

 

생성된 OAuth 클라이언트에 들어가서 URL 정보를 입력합니다.

리디렉션 URI는 꼭 '/api/auth/callback/google'로 작성해야합니다.

 

 

해당 페이지에서 클라이언트 ID 및 시크릿 정보를 확인할 수 있습니다.

 

 

카카오 (prisma 적용 연구중)

https://developers.kakao.com/console/app

카카오계정

 

 

 

링크에 접속하여 카카오 로그인 서비스를 사용할 애플리케이션을 추가합니다.

 

 

 

저는 사용할 이미지가 아직 없어서 앱 아이콘을 제외하고 모두 채워주었습니다.

 

 

 

앱 키에서 제공하는 Javascript 키를 ClientID로 사용하게 됩니다.

 

 

 

플랫폼에서 Web 플랫폼 등록을 진행합니다.

 

 

 

사이트 도메인을 입력해줍니다. 저는 실제 도메인과 로컬 주소 모두를 입력해두었습니다.

 

 

 

 

카카오 로그인에서 카카오 로그인을 활성화 시키고 Redirect URL을 추가합니다.

 

 

 

Redirect URL은 /api/auth/callback/kakao로 작성해주셔야 원활하게 동작합니다.

 

 

 

 

동의항목에서 필요한 정보의 동의 상태를 변경합니다. 저는 우선 닉네임만 활성화 시켰습니다.

 

 

 

보안에서 Client Secret을 발급받습니다. clientSecret 키 정보도 clientID와 함께 인증을 위해 사용됩니다.

 

 

 

** Prisma로 DB를 사용중인 상태라고 생각하고 작성하겠습니다 **

https://fjdkslvn.tistory.com/153

[Next.js] Prisma로 기존 MYSQL 연동하기

 

 

 

1. next-auth 및 필요한 prisma 모듈 설치

npm install next-auth @types/next-auth @next-auth/prisma-adapter

 

 

 

2. schema.prisma 업데이트 (MYSQL)

model User {
  id            String      @id @default(uuid())
  name          String
  email         String?     @unique
  emailVerified DateTime?   @map("email_verified")
  image         String?
  createdAt     DateTime    @default(now())
  updatedAt     DateTime    @updatedAt
  accounts      Account[]
  favorites     favorites[]
  sessions      Session[]

  @@map("users")
}

model Account {
  id                String   @id @default(cuid())
  userId            String   @map("user_id")
  type              String?
  provider          String
  providerAccountId String   @map("provider_account_id")
  token_type        String?
  refresh_token     String?  @db.Text
  access_token      String?  @db.Text
  expires_at        Int?
  scope             String?
  id_token          String?  @db.Text
  createdAt         DateTime @default(now())
  updatedAt         DateTime @updatedAt
  user              User     @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
  @@index([userId], map: "accounts_user_id_fkey")
  @@map("accounts")
}

model Session {
  id           String   @id @default(cuid())
  userId       String?  @map("user_id")
  sessionToken String   @unique @map("session_token")
  accessToken  String?  @map("access_token") @db.Text
  expires      DateTime
  createdAt    DateTime @default(now())
  updatedAt    DateTime @updatedAt
  user         User?    @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@index([userId], map: "sessions_user_id_fkey")
  @@map("sessions")
}

model VerificationRequest {
  id         String   @id @default(cuid())
  identifier String
  token      String   @unique
  expires    DateTime
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt

  @@unique([identifier, token])
}

 

schema.prisma 파일에 사용자 관련 모델을 추가합니다.

 

prisma 공식 페이지에서 안내한 형태 그대로 사용하면 p.account.findUnique() 관련 오류가 발생합니다.

오류가 발생하지 않도록 수정된 모델을 사용하시면 좋을것같습니다.

 

(MYSQL이 아니더라도 같은 오류가 발생하시면 아래 이슈 문서 추천드립니다.)

https://github.com/nextauthjs/next-auth/issues/3815

Invalid `p.account.findUnique()` invocation with prisma · Issue #3815 · nextauthjs/next-auth

 

 

 

 

 

파일에 모델을 추가하였다면 아래 명령어를 차례대로 실행하여 실제 DB 및 Prisma에 적용될 수 있도록 합니다.

 

npx prisma db pull

 

 

npx prisma migrate diff --from-empty --to-schema-datamodel prisma/schema.prisma --script > prisma/migrations/0_init/migration.sql

이 명령어는 본인의 파일 구조를 확인하시고 실행하시면 됩니다.

 

 

npx prisma generate

 

여기까지 하시면 새로 생성된 모델이 적용됩니다.

 

 

 

3. SessionProvider 적용

AuthProvider 파일을 생성하고 메인 layout.tsx 파일에 적용합니다.

 

#components > providers > authProvider.tsx

"use client";
 
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";
import { Session } from "next-auth";
 
type Props = {
  session?: Session | null;
  children: ReactNode;
};
 
export default function AuthProvider({ session, children }: Props) {
  return <SessionProvider session={session}>{children}</SessionProvider>;
}

 

# layout.tsx

import type { Metadata } from "next";
import { Noto_Sans_KR } from 'next/font/google';
import "@/styles/globals.css";
import AuthProvider from '@/components/providers/authProvider'

...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html>
      <body className={noto.className}>
      	<AuthProvider>
       	  {children}
      	</AuthProvider>
      </body>
    </html>
  );
}

 

 

4. auth API 작성

app > api > auth > [...nextauth] > route.ts

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()


const handler = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      return { ...token, ...user };
    },

    async session({ session, token }) {
      session.user = token as any;
      return session;
    },
  },
  session: {
    strategy: 'jwt'
  },
  secret: process.env.NEXTAUTH_SECRET
});

export { handler as GET, handler as POST };

 

app > api > auth > [...nextauth] > route.ts 위치에 위 코드를 작성해줍니다.

 

• PrismaAdapter : prisma에 연결된 DB에서 user 정보를 자동으로 관리하도록 합니다.
• provider : google, kakao 등 자동 로그인이 필요한 서비스를 연결할 수 있습니다.
• clientId, clientSecret : 인증을 위해 각 서비스 발급받아서 사용하는 정보입니다. (보안상 환경변수로 사용하기 위해 .env에서 불러와 사용합니다.)
• jwt, session : user ID를 받아내기 위해 jwt 및 session을 설정합니다.
• NEXTAUTH_SECRET : JWT를 암호화하고 이메일 확인 토큰을 해시하는데 사용됩니다. (배포시 필수)

 

NEXTAUTH_SECRET 생성 명령어

// 터미널에 입력해서 NEXTAUTH_SECRET를 얻을 수 있습니다.
openssl rand -base64 32

 

 

 

 

5. Session 타입 확장 

import { DefaultSession } from "next-auth";
 
declare module "next-auth" {
  interface Session {
    user?: {
      id?: string;
      role?: string;
    } & DefaultSession["user"];
  }
}

 

각 user를 식별할 수 있는 id 정보를 받기 위해서 타입 확장을 진행합니다.

 

 

6. 로그인

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

const Navbar: React.FC = () => {
  const { data: session } = useSession();

  useEffect(() => {
    console.log(session?.user?.id);
    console.log(session?.user?.name);
    console.log(session?.user?.email);
  },[session])
  
  return (
    <div>
        {session
        ?<>
          <div>{`${session.user?.name}님`}</div>
          <div  onClick={() => signOut()}>로그아웃</div>
        </>
        :<div onClick={() => signIn()}>로그인</div>}
    </div>
  );
};

export default Navbar;

 

• useSession : session을 통해 로그인 한 사용자의 정보를 받아낼 수 있습니다.
• signIn, signOut : 로그인, 로그아웃을 할 수 있습니다.

 

 

 

 

[공식문서 및 참고문서]

 

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

Getting Started | NextAuth.js

https://next-auth.js.org/configuration/initialization#route-handlers-app

Initialization | NextAuth.js

https://powerku.tistory.com/312

next-auth 이용해서 10분만에 소셜 로그인 구현 하기

https://blog.teamelysium.kr/nextjs-auth

NextAuth.js로 간편 로그인 기능 구현하기

 

https://velog.io/@dosomething/Next-auth-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84

Next-auth 를 이용한 로그인 구현