Firebase Auth with Next.js: 서버 사이드 렌더링 환경에서의 구현 가이드

 

최근 웹 개발자들 사이에서 Firebase Authentication을 Next.js와 함께 사용하는 것이 큰 주목을 받고 있습니다.

 

특히 서버 사이드 렌더링(SSR) 환경에서의 구현은 많은 개발자에게 도전 과제가 되고 있으며, 실질적인 노하우를 공유하는 것이 중요합니다.

 

이 글에서는 Firebase Auth를 Next.js와 통합하여 SSR을 구현하는 방법을 단계별로 설명하겠습니다.

 

 

SSR 환경에서 Firebase Auth의 도전 과제

 

Firebase Auth는 기본적으로 클라이언트 사이드에서 작동하도록 설계되었습니다.

 

이로 인해 SSR 환경에서 Firebase Auth를 사용하려는 개발자들은 몇 가지 문제에 직면하게 됩니다.

 

특히, 클라이언트 SDK의 훅을 사용하려고 할 때, 서버와 클라이언트 환경에서의 초기화 방식이 상이하기 때문에 오류가 발생할 수 있습니다.

 

이를 해결하기 위해서는 Firebase Admin SDK를 사용하여 서버 측에서 사용자 인증 처리 및 세션 관리 등을 수행해야 합니다.

 

이 과정에서 개발자들은 다음과 같은 주요 노하우를 익힐 수 있습니다.

 

Firebase Admin SDK 설정

 

1. Firebase Admin SDK 초기화

 

SSR 환경에서 Firebase Auth를 구현하기 위해서는 Firebase Admin SDK를 활용하는 것이 필수적입니다.

 

먼저, Firebase Admin SDK를 설치하고 초기화하는 방법을 알아보겠습니다.

 

Next.js의 pages/api 폴더에 firebaseAdmin.js 파일을 생성하고 아래와 같이 설정합니다.

// pages/api/firebaseAdmin.js
import admin from 'firebase-admin';

const serviceAccount = require('../../path/to/your/serviceAccountKey.json');

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
  });
}

export default admin;

 

위 코드는 Firebase Admin SDK를 초기화하는 기본적인 구조입니다.

 

Firebase 콘솔에서 다운로드한 serviceAccountKey.json 파일을 사용하여 인증을 수행합니다. 이 설정을 통해 서버 측에서 Firebase Auth를 안전하게 사용할 수 있습니다.

 

2. 인증 API 만들기

 

이제 Firebase Admin SDK를 활용하여 인증 API를 만들어 보겠습니다.

 

pages/api 폴더에 auth.js 파일을 생성하고 아래의 코드를 추가합니다.

// pages/api/auth.js
import admin from './firebaseAdmin';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const user = await admin.auth().getUserByEmail(email);
      // 비밀번호 확인 로직 추가 가능
      res.status(200).json({ uid: user.uid });
    } catch (error) {
      res.status(400).json({ error: 'User not found' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

 

이 API는 사용자의 이메일을 기반으로 Firebase에서 사용자를 검색하는 기능을 제공합니다.

 

필요에 따라 추가적인 인증 로직(예: 비밀번호 확인)을 구현할 수 있습니다.

 

클라이언트 측 Firebase 설정

 

클라이언트 측에서는 Firebase 클라이언트 SDK를 초기화해야 합니다.

 

firebase.js 파일을 생성하여 클라이언트 SDK를 설정합니다.

// firebase.js
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth };

 

이 설정은 클라이언트 측에서 Firebase Auth를 사용할 수 있도록 합니다.

 

각 항목은 Firebase 콘솔에서 복사한 설정 정보를 입력해야 합니다.

 

클라이언트에서 Firebase Auth 사용하기

 

클라이언트에서는 Firebase 클라이언트 SDK를 사용하여 사용자가 로그인할 수 있는 페이지를 만들어야 합니다.

 

아래는 pages/login.js의 예시입니다.

// pages/login.js
import { useState } from 'react';
import { auth } from '../firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);

  const handleLogin = async (e) => {
    e.preventDefault();

    try {
      await signInWithEmailAndPassword(auth, email, password);
      // 로그인 성공 후 리디렉션 처리
      window.location.href = '/';
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <h1>로그인</h1>
      <form onSubmit={handleLogin}>
        <input 
          type="email" 
          placeholder="이메일" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          required 
        />
        <input 
          type="password" 
          placeholder="비밀번호" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          required 
        />
        <button type="submit">로그인</button>
      </form>
      {error && <p>{error}</p>}
    </div>
  );
};

export default Login;

 

이 페이지는 사용자가 이메일과 비밀번호를 입력하고 로그인할 수 있는 폼을 제공합니다.

 

SSR에서 인증 상태 확인하기

 

Next.js의 SSR 기능을 사용하여 사용자의 인증 상태를 체크할 수 있습니다.

 

아래는 pages/index.js 파일에서 인증 상태를 확인하고, 사용자 정보를 가져오는 코드입니다.

// pages/index.js
import { useEffect, useState } from 'react';
import { auth } from '../firebase';
import { onAuthStateChanged } from 'firebase/auth';

const Home = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
    });

    return () => unsubscribe();
  }, []);

  return (
    <div>
      <h1>홈 페이지</h1>
      {user ? (
        <p>환영합니다, {user.email}님!</p>
      ) : (
        <p>로그인해주세요.</p>
      )}
    </div>
  );
};

export default Home;

 

이 코드는 사용자의 인증 상태를 감지하여, 로그인된 사용자에게 환영 메시지를 띄우고, 로그인되지 않은 경우 로그인 요청 메시지를 표시합니다.

 

결론

 

Firebase Auth와 Next.js를 결합하여 SSR 환경에서 인증 시스템을 구현하는 것은 많은 개발자들에게 도전 과제가 되고 있습니다.

 

그러나 Firebase Admin SDK와 클라이언트 SDK를 적절히 사용하여 이 문제를 해결할 수 있습니다.

 

이 과정에서 중요한 것은 서버와 클라이언트 간의 역할을 명확히 구분하고, 필요한 경우 API를 통해 데이터를 안전하게 처리하는 것입니다.

 

Firebase Admin SDK를 활용하면 서버에서의 인증 처리를 안전하게 구현할 수 있으며, 클라이언트 SDK를 통해 사용자 경험을 개선할 수 있습니다.

 

이 글을 통해 여러분이 Firebase Auth와 Next.js를 효과적으로 통합하고, SSR 환경에서도 원활한 인증 기능을 구현하는 데 도움이 되었기를 바랍니다.

 

추가 자료

• Firebase 공식 문서
• Next.js 공식 문서
• next-firebase-auth GitHub 저장소