[유데미 러닝크루] Next.js 스터디 3주차 – Next.js와 Lucia로 로그인부터 세션 관리까지, 인증 시스템 구현

npm i lucia @lucia-auth/adapter-sqlite better-sqlite3 bcrypt

app/
  (auth)/
    layout.js
    login/page.jsx
    signup/page.jsx
  actions/
    auth-actions.js
components/
  auth-form.jsx
  logout-button.jsx
lib/
  db.js
  user.js
  auth.js

// app/actions/auth-actions.js
"use server";
import { createUser, getUserByEmail } from "@/lib/user";
import { createAuthSession } from "@/lib/auth";
import bcrypt from "bcrypt";

export async function signup(prevState, formData) {
  const email = (formData.get("email") || "").toString().trim();
  const password = (formData.get("password") || "").toString();

  // 유효성 검사
  if (!email.includes("@")) return { ok:false, message:"유효한 이메일을 입력하세요." };
  if (password.length < 8) return { ok:false, message:"비밀번호는 8자 이상이어야 합니다." };

  // 중복 체크
  const exists = await getUserByEmail(email);
  if (exists) return { ok:false, message:"이미 가입된 이메일입니다." };

  const hash = await bcrypt.hash(password, 10);
  const user = await createUser({ email, passwordHash: hash });

  // 세션 생성 (자동 로그인)
  await createAuthSession(user.id);
  return { ok:true, message:"가입 완료" };
}

// lib/db.js
import Database from "better-sqlite3";
export const db = new Database("app.db");

// lib/user.js
import { db } from "./db";

export async function createUser({ email, passwordHash }) {
  const stmt = db.prepare("INSERT INTO users (email, password_hash) VALUES (?, ?)");
  const info = stmt.run(email, passwordHash);
  return { id: info.lastInsertRowid, email };
}

export async function getUserByEmail(email) {
  const row = db.prepare("SELECT id, email, password_hash FROM users WHERE email = ?").get(email);
  return row || null;
}

// components/auth-form.jsx
"use client";
import { useFormState } from "react-dom";
import { signup, login } from "@/app/actions/auth-actions";

export default function AuthForm({ mode = "login" }) {
  const action = mode === "login" ? login : signup;
  const [state, formAction] = useFormState(action, { ok:false, message:"" });

  return (
    <form action={formAction}>
      <input name="email" type="email" placeholder="email" required />
      <input name="password" type="password" placeholder="password (8+)" required />
      <button type="submit">{mode === "login" ? "로그인" : "회원가입"}</button>
      {state?.message && <p>{state.message}</p>}
    </form>
  );
}

// app/actions/auth-actions.js (일부)
export async function login(prevState, formData) {
  const email = (formData.get("email") || "").toString().trim();
  const password = (formData.get("password") || "").toString();

  const user = await getUserByEmail(email);
  if (!user) return { ok:false, message:"이메일 또는 비밀번호가 올바르지 않습니다." };

  const ok = await bcrypt.compare(password, user.password_hash);
  if (!ok) return { ok:false, message:"이메일 또는 비밀번호가 올바르지 않습니다." };

  await createAuthSession(user.id);
  return { ok:true, message:"로그인 성공" };
}

// lib/auth.js  (Lucia v3 예시)
import { Lucia } from "lucia";
import { nextjs } from "lucia/middleware";
import { betterSqlite3 } from "@lucia-auth/adapter-sqlite";
import { db } from "./db";
import { cookies } from "next/headers";

export const auth = new Lucia(betterSqlite3(db), {
  sessionCookie: { attributes: { secure: process.env.NODE_ENV === "production" } },
  middleware: nextjs()
});

export async function createAuthSession(userId) {
  const session = await auth.createSession(userId, {});
  const cookie = auth.createSessionCookie(session.id);
  cookies().set(cookie.name, cookie.value, cookie.attributes);
}

export async function destroySession() {
  const sessionId = cookies().get(auth.sessionCookieName)?.value;
  if (!sessionId) return;
  await auth.invalidateSession(sessionId);
  const blank = auth.createBlankSessionCookie();
  cookies().set(blank.name, blank.value, blank.attributes);
}

export async function verifyAuth() {
  const sessionId = cookies().get(auth.sessionCookieName)?.value ?? null;
  if (!sessionId) return { user:null, session:null };
  return auth.validateSession(sessionId); // { user, session }
}

// app/(auth)/layout.js  — 보호 라우트
import { verifyAuth } from "@/lib/auth";
export default async function AuthLayout({ children }) {
  const { user } = await verifyAuth();
  if (!user) {
    // 비로그인: 로그인 페이지로 리다이렉트 (간단 예시)
    return (<div>로그인이 필요합니다. <a href="/login">로그인</a></div>);
  }
  return (<section>{children}</section>);
}

// app/actions/auth-actions.js (일부)
import { destroySession } from "@/lib/auth";

export async function logout() {
  "use server";
  await destroySession();
}

// components/logout-button.jsx
"use client";
import { logout } from "@/app/actions/auth-actions";

export default function LogoutButton(){
  return <form action={logout}>
    <button type="submit">로그아웃</button>
  </form>;
}

// app/login/page.jsx  — 로그인 페이지
import AuthForm from "@/components/auth-form";
export default function Page(){ return (<AuthForm mode="login" />); }

// app/signup/page.jsx — 회원가입 페이지
import AuthForm from "@/components/auth-form";
export default function Page(){ return (<AuthForm mode="signup" />); }