Next.js와 Firebase로 인증(Authentication) 구현해보기

npx create-next-app "프로젝트 이름"

npm install firebase

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
 
const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY, // 환경 변수로 설정
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};
 
const app = initializeApp(firebaseConfig);
 
export const auth = getAuth(app);

FIREBASE_API_KEY=API_KEY
FIREBASE_AUTH_DOMAIN=AUTH_DOMAIN
FIREBASE_PROJECT_ID=PROJECT_ID
FIREBASE_STORAGE_BUCKET=STORAGE_BUCKET
FIREBASE_MESSAGING_SENDER_ID=MESSAGING_SENDER_ID
FIREBASE_APP_ID=APP_ID

"use client";
import Link from "next/link";
 
const SignUpForm = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="w-full max-w-lg p-8 space-y-6 bg-white shadow-md rounded-lg">
        <h2 className="text-2xl font-bold text-center text-gray-800">
          회원가입
        </h2>
        <form className="space-y-4">
          {/* 이름 입력 */}
          <div>
            <label
              htmlFor="name"
              className="block text-sm font-medium text-gray-700"
            >
              이름
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              placeholder="이름을 입력하세요"
              autoComplete={"name"}
            />
          </div>
          {/* 이메일 입력 */}
          <div>
            <label
              htmlFor="email"
              className="block text-sm font-medium text-gray-700"
            >
              이메일
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              placeholder="이메일을 입력하세요"
              autoComplete={"email"}
            />
          </div>
          {/* 비밀번호 입력 */}
          <div>
            <label
              htmlFor="password"
              className="block text-sm font-medium text-gray-700"
            >
              비밀번호
            </label>
            <input
              type="password"
              id="password"
              name="password"
              className="w-full mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              placeholder="비밀번호를 입력하세요"
              autoComplete={"new-password"}
            />
          </div>
          {/* 회원가입 버튼 */}
          <div>
            <button
              type="submit"
              className="w-full px-4 py-2 text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
            >
              회원가입
            </button>
          </div>
        </form>
        {/* 로그인 링크 */}
        <div className="text-center">
          <p className="text-sm text-gray-600">
            이미 계정이 있으신가요?{" "}
            <Link
              href="/login"
              className="font-medium text-indigo-600 hover:text-indigo-500"
            >
              로그인
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
};
 
export default SignUpForm;

const SignUpPage = () => {
  return <SignUpForm />;
};
 
export default SignUpPage;

npm install server-only

"use server";
import "server-only";
import { FormState, SignupFormSchema } from "@/schema/signup.schema";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "@/services/firebase";
import { redirect } from "next/navigation";
 
export const signup = async (prevState: FormState, formData: FormData) => {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;
 
  // 회원가입 폼 유효성 검사
  // 저는 zod를 사용했지만 다른 라이브러리를 사용 및 직접 구현해도 됩니다.
  const validatedFields = SignupFormSchema.safeParse({
    name,
    email,
    password,
  });
 
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }
 
  try {
    // Firebase SDK를 사용하여 회원가입
    // createUserWithEmailAndPassword는 auth에서 제공하는 이메일과 비밀번호로 사용자를 생성하는 함수입니다.
    const response = await createUserWithEmailAndPassword(
      auth, // auth 인스턴스는 반드시 필요합니다.
      email,
      password
    );
  } catch (error) {
    console.error(error);
    return {
      errors: {
        email: ["이미 사용 중인 이메일입니다."],
      },
    };
  }
 
  redirect("/dashboard");
};

"use client"; // 반드시 사용해야 합니다.
import Link from "next/link";
import { useActionState } from "react";
import { signup } from "@/actions/signup";
 
const SignUpForm = () => {
  const [state, action, pending] = useActionState(signup, undefined);
 
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="w-full max-w-lg p-8 space-y-6 bg-white shadow-md rounded-lg">
        <h2 className="text-2xl font-bold text-center text-gray-800">
          회원가입
        </h2>
        {/* action 추가 */}
        <form className="space-y-4" action={action}>
          {/* 이름 입력 */}
          <div>
            <label
              htmlFor="name"
              className="block text-sm font-medium text-gray-700"
            >
              이름
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full mt-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              placeholder="이름을 입력하세요"
              autoComplete={"name"}
            />
            {state?.errors?.name && (
              <div className="text-red-500 text-sm mt-2">
                {state.errors.name.map((item) => (
                  <div key={item}>- {item}</div>
                ))}
              </div>
            )}
          </div>
          {/* 이메일 입력 */}
          {/* 생략 */}
          {/* 회원가입 버튼 */}
          <div>
            <button
              type="submit"
              className="w-full px-4 py-2 text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
              disabled={pending} // pending 상태일 때 버튼 비활성화
            >
              회원가입
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};
 
export default SignUpForm;

const LoginForm = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-lg">
        <h2 className="text-2xl font-bold text-center text-gray-800">로그인</h2>
        <form className="space-y-4">
          {/* 이메일 입력 */}
          {/* 비밀번호 입력 */}
          {/* 로그인 버튼 */}
        </form>
      </div>
    </div>
  );
};

const LoginPage = () => {
  return <LoginForm />;
};
 
export default LoginPage;

"use server";
import "server-only";
import { FormState } from "@/schema/signup.schema";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "@/services/firebase";
import { redirect } from "next/navigation";
import { createSession } from "@/lib/session";
 
export const signIn = async (prevState: FormState, formData: FormData) => {
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;
 
  // 유효성 검사 생략
 
  try {
    const response = await signInWithEmailAndPassword(auth, email, password);
  } catch (error) {
    console.error(error);
    return {
      errors: {
        email: ["이메일 또는 비밀번호가 일치하지 않습니다."],
      },
    };
  }
 
  redirect("/dashboard");
};

"use client";
import Link from "next/link";
import { useActionState } from "react";
import { signIn } from "@/actions/signIn";
 
const LoginForm = () => {
  const [state, action, pending] = useActionState(signIn, undefined);
 
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-lg">
        <h2 className="text-2xl font-bold text-center text-gray-800">로그인</h2>
        <form className="space-y-4" action={action}>
          {/* 이메일 입력 */}
          {/* 비밀번호 입력 */}
          {/* 로그인 버튼 */}
 
          {/* 에러 메시지 */}
          {state?.errors?.email && (
            <div className="text-red-500 text-sm">
              {state.errors.email.map((item) => (
                <div key={item}>- {item}</div>
              ))}
            </div>
          )}
          <div>
            <button
              type="submit"
              className="w-full px-4 py-2 text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
              disabled={pending}
            >
              로그인
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

"use server";
import "server-only";
import { cookies } from "next/headers";
 
export const createSession = async (token: string) => {
  const expiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7); // 7일 후 만료
 
  const cookieStore = await cookies(); // next/headers에서 제공하는 함수
 
  cookieStore.set("session", token, {
    httpOnly: true, // 클라이언트에서 쿠키를 읽을 수 없음
    secure: true, // https에서만 사용
    expires: expiresAt, // 만료일
    sameSite: "lax", // 쿠키가 다른 도메인으로 전송되지 않음
    path: "/", // 모든 경로에서 사용
  });
};
 
// 세션 삭제
export const deleteSession = async () => {
  const cookieStore = await cookies();
 
  cookieStore.delete("session");
};

// ... 생략
 
export const signIn = async (prevState: FormState, formData: FormData) => {
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;
 
  try {
    const response = await signInWithEmailAndPassword(auth, email, password);
 
    // firebase에서 token을 가져옵니다.
    const token = await response.user.getIdToken();
 
    // 세션 생성
    await createSession(token);
  } catch (error) {
    console.error(error);
    return {
      errors: {
        email: ["이메일 또는 비밀번호가 일치하지 않습니다."],
      },
    };
  }
};

"use server";
import { deleteSession } from "@/lib/session";
import { redirect } from "next/navigation";
 
export async function signOut() {
  await deleteSession();
  redirect("/login");
}

"use client";
import { signOut } from "@/actions/signOut";
 
const SignOutButton = () => {
  const handleSignOut = async () => {
    try {
      await signOut();
    } catch (error) {
      console.error(error);
    }
  };
 
  return (
    <button type="button" onClick={handleSignOut}>
      로그아웃
    </button>
  );
};
 
export default SignOutButton;

import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";
 
// 1. 보호된 경로와 공개 경로 지정
const protectedRoutes = ["/dashboard"]; // 보호된 경로
const publicRoutes = ["/login", "/signup", "/"]; // 공개된 경로
 
export default async function middleware(req: NextRequest) {
  // 2. 현재 경로가 보호되어 있는지 공개되어 있는지 확인
  const path = req.nextUrl.pathname;
  const isProtectedRoute = protectedRoutes.includes(path);
  const isPublicRoute = publicRoutes.includes(path);
 
  // 3. 세션 쿠키 가져오기
  const session = (await cookies()).get("session")?.value;
 
  // 4. 사용자가 인증되지 않은 경우 /login으로 리디렉션
  if (isProtectedRoute && !session) {
    return NextResponse.redirect(new URL("/login", req.nextUrl));
  }
 
  // 5. 사용자가 인증되면 /dashboard로 리디렉션
  if (
    isPublicRoute &&
    session &&
    !req.nextUrl.pathname.startsWith("/dashboard")
  ) {
    return NextResponse.redirect(new URL("/dashboard", req.nextUrl));
  }
 
  return NextResponse.next();
}
 
// 미들웨어가 실행되어서는 안 되는 경로 지정
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
};

"use server";
interface FirebasePublicKeys {
  [key: string]: string;
}
 
export async function getFirebasePublicKeys(): Promise<FirebasePublicKeys> {
  const response = await fetch(
    "https://www.googleapis.com/robot/v1/metadata/x509/securetoken@system.gserviceaccount.com"
  );
 
  if (!response.ok) {
    throw new Error("Firebase 공개 키를 가져오지 못했습니다.");
  }
 
  return response.json();
}

npm install jose

"use server";
import * as jose from "jose";
import { getFirebasePublicKeys } from "@/services/firebaseGetKey";
 
export const verifyToken = async (token: string) => {
  try {
    // 토큰이 없는 경우
    if (!token) {
      return null;
    }
 
    const publicKeys = await getFirebasePublicKeys(); // firebase 공개 키 가져오기
    const decodedHeader = jose.decodeProtectedHeader(token); // 토큰 헤더 디코딩
 
    // kid가 없는 경우
    if (!decodedHeader.kid || !publicKeys[decodedHeader.kid]) {
      console.error("잘못된 키 ID");
      return null;
    }
 
    try {
      const publicKey = await jose.importX509(
        publicKeys[decodedHeader.kid],
        "RS256"
      );
      const { payload } = await jose.jwtVerify(token, publicKey);
 
      // 토큰 만료 확인
      const currentTime = Math.floor(Date.now() / 1000);
      if (payload.exp && payload.exp < currentTime) {
        console.error("토큰이 만료되었습니다");
        return null;
      }
 
      return payload;
    } catch (error) {
      console.error("토큰 확인 실패:", error);
      return null;
    }
  } catch (error) {
    console.error("토큰 처리 실패:", error);
    return null;
  }
};

// middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";
import { verifyToken } from "@/lib/verifyToken";
 
// 공개 경로만 정의
const publicRoutes = ["/login", "/signup", "/"];
 
export default async function middleware(req: NextRequest) {
  const path = req.nextUrl.pathname; // 현재 경로
 
  // 공개 경로인 경우
  const isPublicRoute = publicRoutes.includes(path);
 
  // 세션 쿠키 가져오기
  const session = (await cookies()).get("session")?.value;
 
  // 토큰 검증
  const verifiedToken = session ? await verifyToken(session) : null;
 
  // 인증 확인 여부 -> !!를 사용하여 boolean으로 변환
  const isAuthenticated = !!verifiedToken;
 
  // public 경로가 아닌 모든 경로에 대해 인증 확인
  if (!isPublicRoute && !isAuthenticated) {
    const response = NextResponse.redirect(new URL("/login", req.nextUrl));
    response.cookies.delete("session"); // 세션 삭제
    return response;
  }
 
  // 인증된 사용자의 공개 경로 접근 처리
  if (isPublicRoute && isAuthenticated) {
    return NextResponse.redirect(new URL("/dashboard", req.nextUrl));
  }
 
  return NextResponse.next();
}
 
export const config = {
  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
};

export const dynamic = "force-dynamic";