firebase 로그인 여부로 알아보기

Auth.js
import React, { useState } from "react";
import { auth } from "./firebase"; // 여기 주의해야함

import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";
import { useNavigate } from "react-router-dom";

const Auth = () => {
  const navigate = useNavigate();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);

  const onChangeEmail = (e) => {
    setEmail(e.target.value);
  };
  const onChangePassword = (e) => {
    setPassword(e.target.value);
  };
  const onSubmit = async (e) => {
    e.preventDefault();

    try {
      if (newAccount) {
        await createUserWithEmailAndPassword(auth, email, password);
        setNewAccount(!newAccount);
        setEmail("");
        setPassword("");
      } else {
        await signInWithEmailAndPassword(auth, email, password);
        navigate("/Home");
      }
      console.log(auth.currentUser);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="Email"
          required
          value={email}
          onChange={onChangeEmail}
        />
        <input
          type="password"
          placeholder="password"
          required
          value={password}
          onChange={onChangePassword}
        />
        <input type="submit" value={newAccount ? "Create Account" : "Log In"} />
      </form>
      <button>Continue with Google</button>
      <button>Continue with GitHub</button>
    </div>
  );
};

export default Auth;

AppRouter.js

import { Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";
import Auth from "../routes/Auth";
import Home from "../routes/Home";

const AppRouter = ({ isLoggedIn }) => {
  return (
    <BrowserRouter>
      <Routes>
        {isLoggedIn ? (
          <>
            <Route path="/" element={<Home />} />
          </>
        ) : (
          <>
            <Route path="/123" element={<Auth />} />
          </>
        )}
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;

useEffect를 통해서 로그인 여부를 알아보자

import React, { useEffect, useState } from "react";
import AppRouter from "./Router";
import { auth } from "routes/firebase";
const App = () => {
  const [init, setInit] = useState(false);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => { // useEFfect를 통해, 로그인 여부를 알 수 있음
    auth.onAuthStateChanged((user) => {
      if (user) {
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
      }
      setInit(true);
    });
  }, []);

  return (
    <>
      {init ? <AppRouter isLoggedIn={isLoggedIn} /> : "Initializing"}

      <footer>&copy; Twitter {new Date().getFullYear()}</footer>
    </>
  );
};

export default App;