🚀 Next.js + Firebase로 만드는 풀스택 웹앱 실전 프로젝트

🎯 목표

이메일/비밀번호 회원가입/로그인 구현
로그인 상태 유지(onAuthStateChanged)
헤더에 로그인 상태 표시(로그아웃 포함)
간단한 보호 페이지(/dashboard) 구성

1) 헤더 컴포넌트 (로그인 상태 표시)

components/HeaderAuth.tsx

전역 헤더에서 로그인 상태를 실시간 반영합니다.
로그인 상태면 “이메일 + 로그아웃 버튼”, 아니라면 “로그인/회원가입 링크”를 보여줍니다.

'use client';

import { useEffect, useState } from 'react';
import { auth } from '@/lib/firebase.client';
import { onAuthStateChanged, signOut, User } from 'firebase/auth';
import Link from 'next/link';

export default function HeaderAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (u) => {
      setUser(u);
      setLoading(false);
    });
    return () => unsub();
  }, []);

  if (loading) return null;

  return (
    <header style={{display:'flex',gap:12,alignItems:'center',padding:'12px 16px',borderBottom:'1px solid #eee'}}>
      <Link href="/">Home</Link>
      <Link href="/dashboard">Dashboard</Link>
      <div style={{marginLeft:'auto'}}>
        {user ? (
          <div style={{display:'flex',gap:12,alignItems:'center'}}>
            <span style={{fontSize:14}}>안녕하세요, {user.email}</span>
            <button onClick={() => signOut(auth)} style={{padding:'6px 10px',border:'1px solid #ddd',borderRadius:8}}>
              로그아웃
            </button>
          </div>
        ) : (
          <div style={{display:'flex',gap:12}}>
            <Link href="/login">로그인</Link>
            <Link href="/signup">회원가입</Link>
          </div>
        )}
      </div>
    </header>
  );
}

동작 흐름(순서대로)

마운트 시 onAuthStateChanged(auth, cb)로 Firebase에게 “현재 사용자”를 물어봅니다.
Firebase가 로컬 세션을 복원하고 사용자(User | null)를 콜백으로 전달합니다.
전달된 값으로 user 상태를 갱신하고, 초기 로딩 표시용 loading을 false로 바꿉니다.
이후 로그인/로그아웃/토큰변경이 발생하면 콜백이 자동 재호출되어 UI가 즉시 바뀝니다.
컴포넌트가 사라질 때 unsub()로 리스너 해제(메모리 누수 방지).

주요 상태값

user: 로그인한 유저 객체(null이면 비로그인)
loading: Firebase가 초기 판정을 끝냈는지 여부(깜박임 방지)

렌더 조건

loading일 땐 null을 반환해 초기 깜박임을 줄입니다.
user가 있으면 이메일/로그아웃 버튼, 없으면 로그인/회원가입 링크를 노출합니다.

이벤트

로그아웃: signOut(auth) 호출만으로 상태가 바뀝니다(별도 라우팅 불필요).

onAuthStateChanged가 user=null을 전달 → UI가 즉시 갱신됩니다.

app/layout.tsx에 헤더 추가:

import './globals.scss';
import HeaderAuth from '@/components/HeaderAuth';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <HeaderAuth />
        {children}
      </body>
    </html>
  );
}

2) 로그인 페이지

이메일/비밀번호로 로그인 폼을 제공하고, 성공 시 보호 페이지(/dashboard)로 이동합니다.

app/login/page.tsx

'use client';

import { FormEvent, useState } from 'react';
import { auth } from '@/lib/firebase.client';
import { signInWithEmailAndPassword } from 'firebase/auth';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

export default function LoginPage() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [pw, setPw] = useState('');
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setErr(null);
    setLoading(true);
    try {
      await signInWithEmailAndPassword(auth, email, pw);
      router.replace('/dashboard');
    } catch (e: any) {
      setErr(e?.message ?? '로그인 실패');
    } finally {
      setLoading(false);
    }
  };

  return (
    <main style={{ maxWidth: 420, margin: '40px auto', padding: 16 }}>
      <h1>로그인</h1>
      <form
        onSubmit={onSubmit}
        style={{ display: 'grid', gap: 10, marginTop: 16 }}
      >
        <input
          type='email'
          placeholder='이메일'
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          style={{ padding: 10, border: '1px solid #ddd', borderRadius: 8 }}
        />
        <input
          type='password'
          placeholder='비밀번호'
          value={pw}
          onChange={(e) => setPw(e.target.value)}
          style={{ padding: 10, border: '1px solid #ddd', borderRadius: 8 }}
        />
        {err && <p style={{ color: 'crimson', fontSize: 14 }}>{err}</p>}
        <button
          disabled={loading}
          style={{ padding: '10px 12px', borderRadius: 8 }}
        >
          {loading ? '로그인 중…' : '로그인'}
        </button>
      </form>
      <p style={{ marginTop: 12, fontSize: 14 }}>
        계정이 없으신가요? <Link href='/signup'>회원가입</Link>
      </p>
    </main>
  );
}

동작 흐름(폼 제출)

onSubmit에서 기본 제출 이벤트 막기 → SPA 내 비동기 처리
loading을 true로 바꾸고, 에러 상태 초기화
signInWithEmailAndPassword(auth, email, pw) 호출
성공 시 router.replace('/dashboard')
- replace를 쓰는 이유: 뒤로 가기를 눌러도 로그인 페이지로 되돌아가지 않게 하기 위함
실패 시 에러 메시지를 err에 저장해 사용자에게 표시
마지막에 loading=false

주요 상태값

email, pw: 제어 컴포넌트로 입력값을 상태로 관리
err: Firebase 에러 메시지(실서비스에선 코드별 한글화 권장)
loading: 제출 중 버튼 비활성화/텍스트 변경

폼/UX 포인트

인풋은 기본적인 스타일과 placeholder만 포함(필요 시 autoComplete 추가 권장)
loading 동안 버튼을 비활성화해 중복 제출 방지
실패 시 사용자 친화적 문구로 매핑하면 이탈률 감소(예: “이메일 또는 비밀번호가 올바르지 않습니다.”)

3) 회원가입 페이지

이메일/비밀번호로 계정을 생성하고, 성공하면 자동 로그인 상태로 /dashboard로 이동합니다.

app/signup/page.tsx

'use client';

import { FormEvent, useState } from 'react';
import { auth } from '@/lib/firebase.client';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

export default function SignupPage() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [pw, setPw] = useState('');
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setErr(null);
    setLoading(true);
    try {
      await createUserWithEmailAndPassword(auth, email, pw);
      router.replace('/dashboard');
    } catch (e: any) {
      setErr(e?.message ?? '회원가입 실패');
    } finally {
      setLoading(false);
    }
  };

  return (
    <main style={{ maxWidth: 420, margin: '40px auto', padding: 16 }}>
      <h1>회원가입</h1>
      <form
        onSubmit={onSubmit}
        style={{ display: 'grid', gap: 10, marginTop: 16 }}
      >
        <input
          type='email'
          placeholder='이메일'
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          style={{ padding: 10, border: '1px solid #ddd', borderRadius: 8 }}
        />
        <input
          type='password'
          placeholder='비밀번호(6자 이상)'
          value={pw}
          onChange={(e) => setPw(e.target.value)}
          style={{ padding: 10, border: '1px solid #ddd', borderRadius: 8 }}
        />
        {err && <p style={{ color: 'crimson', fontSize: 14 }}>{err}</p>}
        <button
          disabled={loading}
          style={{ padding: '10px 12px', borderRadius: 8 }}
        >
          {loading ? '생성 중…' : '회원가입'}
        </button>
      </form>
      <p style={{ marginTop: 12, fontSize: 14 }}>
        이미 계정이 있으신가요? <Link href='/login'>로그인</Link>
      </p>
    </main>
  );
}

동작 흐름(폼 제출)

onSubmit에서 기본 동작 막기 → loading=true, 에러 초기화
createUserWithEmailAndPassword(auth, email, pw) 호출
- Firebase 정책상 비밀번호 6자 이상 필요(placeholder로 안내)
성공 시 Firebase가 즉시 로그인 상태가 되며 router.replace('/dashboard')
실패 시 에러 메시지 표시(이미 사용 중 이메일, 약한 비밀번호 등)
마지막에 loading=false

주요 상태값/렌더

email, pw 제어 인풋 + err, loading은 로그인 페이지와 동일 패턴
에러 코드별 메시지 매핑을 추가하면 가입 실패의 원인을 명확히 안내 가능

UX/보안 포인트

type="password"로 입력 가림 처리
필요 시 클라이언트에서 기본 형식 검증(이메일 정규식, 비밀번호 길이) 후 Firebase 호출 → 불필요한 API 요청 감소
가입 직후 프로필 세팅 흐름(닉네임 설정 등)으로 확장하기 좋음

4) 클라이언트 보호 가드 컴포넌트

로그인하지 않은 사용자가 /dashboard 등 보호된 페이지에 접근했을 때, 자동으로 /login으로 돌려보내는 클라이언트 보호 가드 컴포넌트입니다.
즉, “로그인한 사람만 이 컴포넌트 안쪽의 children을 볼 수 있게” 만들어 줍니다.

components/AuthGate.tsx

'use client';

import { ReactNode, useEffect, useState } from 'react';
import { auth } from '@/lib/firebase.client';
import { onAuthStateChanged } from 'firebase/auth';
import { useRouter } from 'next/navigation';

export default function AuthGate({ children }: { children: ReactNode }) {
  const router = useRouter();
  const [ready, setReady] = useState(false);
  const [authed, setAuthed] = useState(false);

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (u) => {
      setAuthed(!!u);
      setReady(true);
      if (!u) router.replace('/login');
    });
    return () => unsub();
  }, [router]);

  if (!ready) return null; // 또는 로딩 스피너

  return <>{authed ? children : null}</>;
}

동작 원리

마운트 시 onAuthStateChanged(auth, callback)을 실행합니다.
- Firebase가 현재 로그인 상태(User | null)를 알려줍니다.
- 이 시점에서 auth가 로컬 세션을 복원하므로 브라우저를 새로고침해도 유지됩니다.
콜백 내부에서:
- 사용자가 있으면 setAuthed(true)
- 없으면 setAuthed(false) 후 router.replace('/login')으로 이동시킵니다.
  
  → 비로그인 사용자가 보호 페이지를 직접 입력해 들어오는 것을 차단합니다.
ready 상태는 “Firebase가 초기 판단을 마쳤다”는 의미로,

판정이 끝나기 전에는 null을 반환해 로딩 중 깜박임을 방지합니다.

주요 상태값

상태	설명
`ready`	Firebase의 인증 여부 판단이 완료됐는지 여부
`authed`	현재 로그인되어 있는지 여부 (boolean)

ready가 false일 때는 아무것도 렌더하지 않아

“로그인 판정 전 페이지가 잠깐 보였다 사라지는” 현상을 방지합니다.
authed가 true일 때만 실제 페이지 콘텐츠(children)를 렌더합니다.

리다이렉트 처리

router.replace('/login')을 사용한 이유는

뒤로 가기를 눌러도 다시 보호 페이지로 돌아오지 않게 하기 위함입니다.

(즉, 브라우저 히스토리를 새로 덮어씌웁니다.)
router.push()를 사용하면 뒤로가기 시 /dashboard로 다시 돌아갈 수 있어

인증 흐름에서는 보통 replace()를 권장합니다.

한계 (보안 관점)

이 방식은 클라이언트 단 보호(Client-Side Guard) 로직입니다.
즉, 페이지가 로드된 뒤 JavaScript에서 접근을 막는 것이기 때문에

완전한 보안은 아닙니다. (초기 HTML은 이미 다운로드된 상태)
5강에서 다룰 Server Actions + Admin SDK 단계를 적용하면

서버에서 토큰을 검증해, 비로그인 사용자는 아예 페이지 HTML을 받지 못하게 만들 수 있습니다.

→ 그때가 진짜 “서버 보호(Server-Side Protection)” 단계입니다.

4) 대시보드 페이지(로그인 필요)

AuthGate로 보호된 실제 “로그인 전용 페이지”입니다.
로그인한 사용자만 이 페이지의 내용을 볼 수 있습니다.

app/dashboard/page.tsx

'use client';

import AuthGate from '@/components/AuthGate';

export default function DashboardPage() {
  return (
    <AuthGate>
      <main style={{ maxWidth: 720, margin: '40px auto', padding: 16 }}>
        <h1>대시보드</h1>
        <p>로그인한 사용자만 볼 수 있는 페이지입니다.</p>
      </main>
    </AuthGate>
  );
}

구조 설명

<AuthGate>
  <main> ... </main>
</AuthGate>

<AuthGate>가 감싸고 있기 때문에,

비로그인 사용자는 내부 콘텐츠(main)을 전혀 볼 수 없습니다.

AuthGate가 /login으로 리다이렉트시키기 때문입니다.

동작 순서

사용자가 /dashboard URL에 접근합니다.
페이지가 렌더링되면서 AuthGate가 먼저 실행됩니다.
Firebase Auth가 현재 로그인 상태를 확인합니다.
동작 설명
- ✅ 로그인되어 있으면 → <main> 내용을 렌더합니다.
- ❌ 로그인 안 되어 있으면 → /login으로 이동시킵니다.

테스트 시나리오

시나리오	결과
로그인 안 한 상태로 `/dashboard` 접근	`/login`으로 리다이렉트
회원가입 직후 자동 로그인 상태	`/dashboard` 접근 성공
새로고침해도 세션 유지	Firebase가 자동으로 복원
로그아웃 후 `/dashboard` 접근	다시 `/login`으로 리다이렉트

5) 간단 SCSS

app/globals.scss

:root {
  --radius: 10px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Apple SD Gothic Neo',
    sans-serif;
}
li {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: #1a73e8;
}
input,
button {
  font: inherit;
}
button {
  cursor: pointer;
}

6) 동작 확인

/signup에서 회원가입 → 자동 로그인 → /dashboard 진입
헤더에 이메일 표시, 로그아웃 버튼 클릭 시 상태 변경 확인
/login에서 로그인 후 /dashboard 접근 가능

실습저장소

GitHub - heroyooi/nextjs-firebase at ch1_2

1단계. Next.js + Firebase 실전 앱

1-2. Firebase Auth — 로그인/회원가입 & 보호 페이지

🎯 목표

1) 헤더 컴포넌트 (로그인 상태 표시)

동작 흐름(순서대로)

주요 상태값

렌더 조건

이벤트

2) 로그인 페이지

동작 흐름(폼 제출)

주요 상태값

폼/UX 포인트

내비게이션

3) 회원가입 페이지

동작 흐름(폼 제출)

주요 상태값/렌더

UX/보안 포인트

4) 클라이언트 보호 가드 컴포넌트

동작 원리

주요 상태값

리다이렉트 처리

한계 (보안 관점)

4) 대시보드 페이지(로그인 필요)

구조 설명

동작 순서

테스트 시나리오

5) 간단 SCSS

6) 동작 확인

실습저장소

💬 댓글