firebase 로그인/회원가입 구현

먼저 firebase에 로그인하고 웹앱을 만들어준다.
1. Firebase SDK를 프로젝트에 설치 -> npm install firebase
2. Firebase 초기화
이떄 env사용

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

import 'firebase/auth';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREWARE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth, app };

그다음 로그인페이지, 회원가입페이지에서 필요한 함수들 불러와서 작업해주면 끝 !

로그인페이지

function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  const handleLogin = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      navigate("/");
    } catch (error) {
      console.error("로그인 에러:", error);
    }
  };

회원가입페이지

function SignUpPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  const handleSignUp = async () => {
    try {
      await createUserWithEmailAndPassword(auth, email, password);
      navigate("/login");
    } catch (error) {
      console.error("회원가입 에러:", error);
    }
  };