[SvelteKit] Firebase의 Authentication으로 사용자 인증 관리하기

// src/lib/firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
	apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
	authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
	projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
	storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
	messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
	appId: import.meta.env.VITE_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();
export const db = getFirestore(app);

// src/lib/services/userService.ts
import {
	createUserWithEmailAndPassword,
	signInWithEmailAndPassword,
	signInWithPopup,
	updateProfile
} from 'firebase/auth';
import { doc, setDoc, serverTimestamp, getDoc } from 'firebase/firestore';
import { auth, db, provider } from '$lib/firebase';

export async function registerWithEmail(name: string, email: string, password: string) {
	try {
		const userCredential = await createUserWithEmailAndPassword(auth, email, password);
		const user = userCredential.user;

		await updateProfile(user, { displayName: name });

		await setDoc(doc(db, 'users', user.uid), {
			uid: user.uid,
			displayName: name,
			email: user.email,
			createdAt: serverTimestamp()
		});

		return { success: true, user };
	} catch (error) {
		console.error('회원가입 오류:', error);
		return { success: false, error };
	}
}

export async function loginWithEmail(email: string, password: string) {
	try {
		const userCredential = await signInWithEmailAndPassword(auth, email, password);
		return { success: true, user: userCredential.user };
	} catch (error) {
		console.error('로그인 오류:', error);
		return { success: false, error };
	}
}

export async function loginWithGoogle() {
	try {
		const result = await signInWithPopup(auth, provider);
		const user = result.user;

		const userRef = doc(db, 'users', user.uid);
		const docSnap = await getDoc(userRef);

		if (!docSnap.exists()) {
			await setDoc(userRef, {
				uid: user.uid,
				displayName: user.displayName,
				email: user.email,
				createdAt: serverTimestamp()
			});
		}

		return { success: true, user };
	} catch (error) {
		console.error('구글 로그인 오류:', error);
		return { success: false, error };
	}
}

<script lang="ts">
	import { loginWithEmail, loginWithGoogle } from '$lib/services/userService';
	import { goto } from '$app/navigation';
	import { getErrorMessage } from '$lib/utils/firebaseError';

	let email = '';
	let password = '';
	let error: string | null = null;
	let loading = false;

	async function handleLogin() {
		if (!email || !password) {
			error = '이메일과 비밀번호를 입력해주세요.';
			return;
		}

		loading = true;
		const { success, error: err } = await loginWithEmail(email, password);
		loading = false;

		if (success) goto('/list');
		else error = getErrorMessage(err);
	}

	async function handleGoogleLogin() {
		const { success, error: err } = await loginWithGoogle();
		if (success) goto('/list');
		else error = getErrorMessage(err);
	}
</script>

<div class="auth-container">
	<h2>로그인</h2>

	{#if error}<p class="error">{error}</p>{/if}

	<input type="email" placeholder="이메일" bind:value={email} />
	<input type="password" placeholder="비밀번호" bind:value={password} />

	<button on:click={handleLogin} disabled={loading}>
		{loading ? '로그인 중...' : '로그인'}
	</button>

	<button on:click={handleGoogleLogin} class="google-btn">Google로 로그인</button>

	<p class="link">아직 회원이 아니신가요? <a href="/register">회원가입</a></p>
</div>

<style>
	.auth-container {
		max-width: 400px;
		margin: 4rem auto;
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
	}
	input {
		padding: 0.8rem;
		border: 1px solid #ccc;
		border-radius: 8px;
	}
	button {
		padding: 0.8rem;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		background-color: #4a6cf7;
		color: white;
	}
	.google-btn {
		background-color: #db4437;
	}
	.error {
		color: red;
		font-size: 0.9rem;
	}
	.link {
		margin-top: 1rem;
		text-align: center;
	}
</style>

<script lang="ts">
	import { registerWithEmail, loginWithGoogle } from '$lib/services/userService';
	import { goto } from '$app/navigation';
	import { getErrorMessage } from '$lib/utils/firebaseError';
	import { validatePassword } from '$lib/utils/validatePassword';

	let name = '';
	let email = '';
	let password = '';
	let confirmPassword = '';
	let error: string | null = null;
	let loading = false;

	async function handleRegister() {
		if (!name || !email || !password || !confirmPassword) {
			error = '모든 필드를 입력해주세요.';
			return;
		}

		const pwError = validatePassword(password);
		if (pwError) {
			error = pwError;
			return;
		}

		if (password !== confirmPassword) {
			error = '비밀번호가 일치하지 않습니다.';
			return;
		}

		loading = true;
		const { success, error: err } = await registerWithEmail(name, email, password);
		loading = false;

		if (success) goto('/list');
		else error = getErrorMessage(err);
	}

	async function handleGoogleRegister() {
		const { success, error: err } = await loginWithGoogle();
		if (success) goto('/list');
		else error = getErrorMessage(err);
	}
</script>

<div class="auth-container">
	<h2>회원가입</h2>

	{#if error}<p class="error">{error}</p>{/if}

	<input type="text" placeholder="이름" bind:value={name} />
	<input type="email" placeholder="이메일" bind:value={email} />
	<input type="password" placeholder="비밀번호" bind:value={password} />
	<input type="password" placeholder="비밀번호 확인" bind:value={confirmPassword} />

	<button on:click={handleRegister} disabled={loading}>
		{loading ? '가입 중...' : '회원가입'}
	</button>

	<button on:click={handleGoogleRegister} class="google-btn">Google로 회원가입</button>

	<p class="link">이미 계정이 있으신가요? <a href="/login">로그인</a></p>
</div>

<style>
	.auth-container {
		max-width: 400px;
		margin: 4rem auto;
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
	}
	input {
		padding: 0.8rem;
		border: 1px solid #ccc;
		border-radius: 8px;
	}
	button {
		padding: 0.8rem;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		background-color: #4a6cf7;
		color: white;
	}
	.google-btn {
		background-color: #db4437;
	}
	.error {
		color: red;
		font-size: 0.9rem;
	}
	.link {
		margin-top: 1rem;
		text-align: center;
	}
</style>

// 비밀번호 유효성 검사 함수
export function validatePassword(pw: string) {
	if (pw.length < 6) {
		return '비밀번호는 최소 6자 이상이어야 합니다.';
	}
	if (!/[A-Za-z]/.test(pw) || !/[0-9]/.test(pw)) {
		return '비밀번호는 영문과 숫자를 모두 포함해야 합니다.';
	}
	if (/\s/.test(pw)) {
		return '비밀번호에는 공백을 포함할 수 없습니다.';
	}
	if (/^(?:123456|abcdef|password)$/i.test(pw)) {
		return '너무 단순한 비밀번호입니다. 다른 비밀번호를 사용해주세요.';
	}
	return null;
}

// registerWithEmail() 함수 호출 전, validatePassword()를 진행.
async function handleRegister() {
    if (!name || !email || !password || !confirmPassword) {
        error = '모든 필드를 입력해주세요.';
        return;
    }

    const pwError = validatePassword(password);
    if (pwError) {
        error = pwError;
        return;
    }

    if (password !== confirmPassword) {
        error = '비밀번호가 일치하지 않습니다.';
        return;
    }

    loading = true;
    const { success, error: err } = await registerWithEmail(name, email, password);
    loading = false;

    if (success) goto('/list');
    else error = getErrorMessage(err);
}