🔐next-auth 인증(authentication) 라이브러리 (1)

https://next-auth.js.org/ 공식 홈페이지

📄 주요 특징

1. 다양한 인증 제공자 지원

• next-auth는 Google, Facebook, GitHub, Twitter 등 다양한 OAuth 제공자와의 통합을 지원합니다.
• 이메일/비밀번호를 이용한 인증이나 Magic Link(이메일 링크를 통한 로그인) 방식도 제공합니다.

2. 세션 관리

• next-auth는 사용자의 로그인 상태를 세션으로 관리하며, 서버 측 및 클라이언트 측에서
  세션 정보를 쉽게 접근할 수 있습니다.
• JWT(JSON Web Tokens)를 사용하여 세션을 관리하거나 데이터베이스에 세션을 저장할 수 있습니다.

3. 보안

• CSRF(교차 사이트 요청 위조) 공격 방지 및 다양한 보안 기능이 기본적으로 제공됩니다.
• 암호화된 쿠키를 사용하여 사용자 정보를 안전하게 관리합니다.

4. 확장성

• 커스터마이징이 용이하여 사용자 정의 로그인 페이지, 인증 로직, 콜백 등을 손쉽게 설정할 수 있습니다.
• 데이터베이스 어댑터를 통해 사용자 정보를 저장하고 관리할 수 있습니다.

5. 서버리스 환경에 최적화

• Next.js의 API 라우트를 사용하여 서버리스 환경에서도 효율적으로 동작합니다.
• 별도의 백엔드 서버를 구축할 필요 없이 인증 기능을 제공할 수 있습니다.
  

📄 주요 개념

1.Provider

• OAuth 제공자나 이메일 인증 같은 방법을 설정하는 부분입니다.
• 예: Google, GitHub 등의 외부 인증 제공자.

2. Session

• 사용자의 인증 상태를 나타내는 정보입니다.
• 클라이언트와 서버 모두에서 접근할 수 있으며, 인증된 사용자 데이터를 포함합니다.

3. Callbacks

• 인증 흐름 중 특정 이벤트에 대한 후속 처리를 정의하는 기능입니다
• 예: 로그인 후 사용자 데이터를 데이터베이스에 저장하거나, JWT에 추가 데이터를 포함시키는 등의 작업

4. Database Adapters

• 사용자 데이터 및 세션 데이터를 데이터베이스에 저장할 수 있도록 도와주는 어댑터입니다
• MongoDB, PostgreSQL, MySQL 등 다양한 데이터베이스를 지원합니다

// pages/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    // 다른 제공자도 추가 가능
  ],
  callbacks: {
    async session(session, token) {
      session.user.id = token.id;
      return session;
    },
    async jwt(token, user) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
  },
});

next-auth는 Next.jsd에서 인증 기능을 쉽게 추가하고 확장할 수 있는 강력한 라이브러리입니다. OAuth 제공자와 이메일 인증을 포함한 다양한 인증 방식을 지원하며, 사용자 정의가 용이합니다. ⏩ 사용자 인증과 관련된 복잡한 작업을 간단하게 처리할 수 있습니다.

🔐 Credentials 인증

• 사전적 의미 : 자격 증명
• next-auth에서 제공하는 Credentials 인증은 사용자가 입력한 아이디/비밀번호를 사용하여 사용자 정의 로그인 시스템을 구현
• 기본적으로 데이터베이스나 외부 API를 사용해 사용자를 인증할 수 있으며, OAuth와 같은 외부 프로바이더 없이 사용자 자격 증명을 처리

주요 특징

1. 유연한 사용자 인증
   • CredentialsProvider 는 이메일/비밀번호, 사용자 이름/비밀번호, 또는 그 외 필요한 사용자 정의 데이터로 로그인할 수 있음
   • 외부 API나 데이터베이스와 통합하여 인증을 처리할 수 있음
2. 사용자 정의 입력
   • 로그인 폼에서 사용자 정의 필드를 정의할 수 있으며, credentials 설정에서 이러한 필드를 처리할 수 있습니다.
3. 보안
   • 사용자 입력을 안전하게 처리하기 위해 HTTPS를 사용하고, 비밀번호는 해싱 및 저장 전 처리해야 합니다

설정 방법

1. CredentialsProvider 설정
   next-auth의 NextAuth 설정에서 CredentialsProvider 를 사용하여 사용자 정의 인증 설정

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

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

const handler = NextAuth({
    providers: [
        CredentialsProvider({
            name: "Credentials",
            credentials: {
                email: { label: "Email", type: "text" },
                password: { label: "Password", type: "password" },
            },
            async authorize(credentials, req) {
                // 사용자 인증 처리하는 부분 (DB에서 사용자 정보 검증)
                const params = {
                    email: credentials?.email,
                    password: credentials?.password
                };
                const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login/`, {
                   method: 'POST',
                   headers: {
                    "Content-Type": "application/json"
                   },
                   body: JSON.stringify(params)
                });

                const res = await response.json();

                if (res.message === "OK") {
                    return res;
                } else {
                    throw new Error(res.message);
                }
            },
        }),
    ],
    // 추가 옵션 설정 (예: 세션 관리)
});

export { handler as GET, handler as POST }

중요한 점:

- `credentials` 객체의 키는 로그인 창에서 보낸 `input` 필드의 `name` 속성과 일치해야 함
- `email`과 `password`를 보낸다면, `CredentialsProvider`에서도 `email`과 `password`로 받아야 함

2. 사용자 인증 로직

• 데이터베이스나 API 호출을 통해 사용자가 제공한 credentials이 유효한지 검증

app/api/login/route.ts

import { connectToDatabase } from '@/app/lib/mongodb';
import { NextRequest, NextResponse } from 'next/server';
import { Users, UsersType } from '../models/user';

// 1. 사용자가 입력한 아이디 -> DB 에 계정 조회
// 2. 계정이 존재하는지 체크
// 2-1. 계정 존재하지 않다면 결과 리턴
// 2-2. 계정이 존재한다면 입력된 패스워드를 bcrypt.compare 함수로 패스워드를 비교하고 결과를 리턴

const bcrypt = require("bcrypt");

export async function POST(request: NextRequest) {
  try {
    // 요청 본문(body) 가져오기
    const body = await request.json();

    // 클라이언트에서 보낸 데이터 출력
    console.log('Login Server Received data:', body);

    const dbName = process.env.DB_NAME_CHICKEN;
    const collectionName = process.env.COLLECTION_USERS;

    console.log('@@@ Before connecting to database');

    const db = await connectToDatabase(dbName as string);
    const collection = db.collection(collectionName as string);

    console.log(`-- Database connected`);
    console.log(`-- Connected to databse: ${db.databaseName}`);

    const inputPassword: String = body.password;
    const userInfo: UsersType = await Users.findOne({ email: body.email}).exec();

    if (userInfo === null) {
      return Response.json({
        message: "계정이 존재하지 않습니다.",
        result: ""
      })
    }

    const isMatched: boolean = await bcrypt.compare(inputPassword, userInfo.password);
    
    return NextResponse.json({
      message: isMatched ? 'OK !' : '아이디 혹은 비밀번호를 확인해주세요.'
    });
  } catch (error) {
    console.error('Error handling request:', error);
    return NextResponse.json({ message: 'Error processing request' }, { status: 500 });
  }
}

3. 로그인 폼

• signIn 함수를 사용해 로그인 요청을 보낸다.
  NextAuth.js에서 제공하는 클라이언트 측 함수로, 사용자가 인증을 시도할 때 호출한다. 이 함수는 프로미스를 반환하며, 성공 여부 및 추가 정보를 포함한 객체를 반환한다.
  ⏩credentials 인증과 함께 사용자가 입력한 데이터를 서버로 전송

🔐signIn 함수의 응답 값

const result = await signIn(provider, options);

주요 반환 값 속성

• result.ok: (boolean) 로그인 시도가 성공했는지 여부. true일 경우 성공, false일 경우 실패.
• result.error: (string | undefined) 로그인 실패 시 에러 메시지를 포함. 성공 시에는 undefined.
• result.status: (number | undefined) HTTP 응답 상태 코드. 성공 시에는 undefined일 수 있으며, 실패 시 HTTP 상태 코드가 포함될 수 있음.
• result.url: (string | null | undefined) 리디렉션될 URL. redirect: false를 사용할 경우 이 속성이 포함됩니다.

실제 result json 값
로그인 성공한 경우 -> {"error":null,"status":200,"ok":true,"url":"http://localhost:3000"}
실패한 경우 -> {"error":"CredentialsSignin","status":401,"ok":false,"url":null}

function Login() {
    // 로그인 정보
    const [formData, setFormData] = useState({
        email: '',
        password: ''
    });

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (!e.target) return;
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value
        });
    };

    const router = useRouter();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        
        // 로그인 처리
        console.log(`로그인 => email: ${formData.email}, password: ${formData.password}`);

        try {
            const res = await signIn("credentials", {
                redirect: false,
                email: formData.email,
                password: formData.password,
                callbackUrl: "/",
            }).then((result) => {
                console.log(result!.error);

                if (result?.ok) {
                    console.log('인증에 성공하였습니다.');
                    router.push("/");   // 인증 성공 후 리다이렉트. 홈으로 설정
                }
                else {
                    showToast.error(result?.error ?? '로그인에 실패했습니다.');
                 //   return;
                }
            });
        } catch (error) {
            console.error(`Network error: ${error}`);
        }
      };
  
  return (
    <form onSubmit={handleSubmit}>
    	<input type="text" name="email" className="grow" placeholder="이메일을 입력해주세요." 
		onChange={handleChange} />
        <input
            type={showPassword ? 'text' : 'password'}
            name="password"
            className="grow"
            placeholder="비밀번호를 입력해주세요."
            onChange={handleChange}
        />
              
        <button type="submit" className={'btn my-6 ylw w-full'}>로그인</button>
    </form>
   );
}

export default Login;

추가 고려 사항

1. 비밀번호 보안:

   • 비밀번호는 안전한 해시 알고리즘(Bcrypt, Argon2 등)으로 해싱한 후 저장해야 합니다.
   • 로그인 시 입력된 비밀번호를 해시하여 데이터베이스의 해시된 비밀번호와 비교합니다.

2. 세션 관리:

   • next-auth는 세션 관리를 자동으로 처리하며, 사용자는 로그인 후 인증된 세션을 유지할 수 있습니다.

3. 에러 처리:

   • signIn 함수의 결과에서 오류 메시지를 확인하고, 사용자에게 적절한 피드백을 제공할 수 있습니다.

next-auth의 Credentials 인증은 사용자 정의 인증 시스템을 구현할 수 있는 강력하고 유연한 도구. 사용자 입력 필드를 설정하고, 데이터베이스 또는 외부 API와 연동하여 사용자 인증을 처리하며, authorize 메서드를 통해 세부적인 인증 로직을 작성할 수 있음

세션 관리

1. 사용자 인증:

• authorize 함수에서 사용자가 입력한 자격 증명(예: 이메일과 비밀번호)을 검증합니다.
  검증에 성공하면 사용자 객체를 반환하고, 실패하면 null을 반환하거나 에러를 발생시킵니다.

2. 세션 생성:

• authorize 함수가 반환한 사용자 객체는 next-auth에 의해 자동으로 세션에 저장됩니다.
  기본적으로 사용자 객체의 일부 정보(예: id, name, email)가 세션에 저장되며, 이를 JWT에 포함하거나 데이터베이스에 저장할 수 있습니다.

3. 세션에 사용자 정보 저장:

• callbacks 옵션의 jwt 및 session 콜백을 통해 세션에 저장되는 사용자 정보를 커스터마이징할 수 있습니다.

const handler = NextAuth({
    <... 위 코드 참고>
    pages: {
        signIn: "/login"
    },
    session: {
        strategy: 'jwt',
        maxAge: 30 * 24 * 60 * 60,  //30일동안 세션 유지
        updateAge: 24 * 60 * 60,    // 24시간마다 세션 갱신
    },
    callbacks: {
        async jwt({ token, user}) {
            // 사용자 인증 후 JWT에 사용자 정보 저장
            if (user) {
                token.email = user.email;
                token.name = user.name;
            }
            return token;
        },
        async session({ session, token }) {
            // 세션 객체에 사용자 정보 추가
            if (session.user) {
                session.user.email = token.email;
                session.user.name = token.name;
            }

            return session;
        }
    },

주요 콜백 설명

• jwt 콜백:
  - 사용자 인증 후 JWT 토큰에 저장할 사용자 정보를 설정
  - 사용자 객체가 있을 때만 JWT 토큰에 사용자 정보를 추가

• session 콜백:
  - 클라이언트 측에서 접근할 수 있는 세션 객체에 사용자 정보를 추가
  - jwt 콜백에서 설정한 토큰 정보를 세션에 복사하여 클라이언트에서 사용할 수 있도록 함

CredentialsProvider에서 인증에 성공하면 사용자 정보가 자동으로 세션에 저장됩니다.
jwt와 session 콜백을 사용하여 세션에 저장되는 정보를 커스터마이징할 수 있습니다.
클라이언트는 useSession 훅이나 getSession 함수를 통해 세션 정보를 쉽게 접근할 수 있습니다.