그나저나 로그인도 했는데 아직 이멜/비번 입력창이 보이는 것이 거슬린다.

왜 로그인했는데도 이멜/비번 입력창이 보이는 걸까?

문제

현재 currentUser 속성을 사용하여 현재 로그인한 사용자를 가져오고 있다.
이때 사용자가 로그인 상태가 아니라면 currentUser 값은 null로 표시된다.

그런데 현재 App이 로드될 때, 너무 빨리 로그되기 때문에 firebase는 사용자가 로그인 했는지 안했는지 확인할 시간이 없다. 따라서 App이 시작하면 항상 로그아웃 상태가 되고, authService.currentUser는 항상 null, 즉 로그인한 유저가 없는 상태가 된다.

즉, Auth 객체의 초기화가 완료되지 않아 currentUser가 null인 것이다.
👉 관찰자를 사용해 사용자의 로그인 상태를 추적하면 이 문제를 해결할 수 있는데, 일단 아래 처럼 작성하며 현재 상태를 점검해 보자.

중간에 setInterval()을 사용하여 시간 간격을 주고 콘솔에 currentUser를 찍어보자.

📍 components/App.js

//절대 경로(absolute import)
import AppRouter from "components/Router";
import { useState } from "react";
//절대 경로(absolute import)
//fbase에서 authService 가져오기(export로 내보냈기 때문에 {} 중괄호 쳐서 가져와야 함)
import { authService } from "fbase";

function App() {
  //인증서비스의 현재 유저가 참인지 거짓인지에 따라 (로그인했는지 안했는지에 따라)state 달라짐
  const [isLoggedIn, setIsLoggedIn] = useState(authService.currentUser);
  //🔥 처음에 currentUser에 뭐뜨는지 보자
  console.log(authService.currentUser);
  //🔥 2초 마다 currentUser를 콘솔에 찍어 보자
  setInterval(() => {
    console.log(authService.currentUser);
  }, 2000);
  //Router 렌더하기
  //AppRouter에 prop 전달하기
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

• 보다시피 처음엔 null이 뜨는 것을 알 수 있다. 2초 후에는 currentUser에 값이 있는 것을 확인할 수 있다. 즉, 시작할 때는 사용자 로그인이 되지 않은 상태이고 2초가 지나서야 로그인된 상태이다.
  

해결: Auth 객체에 관찰자 설정하기

관찰자를 사용해 사용자의 로그인 상태를 추적하면 이 문제를 해결할 수 있다.

✅ onAuthStateChanged 관찰자

사용자의 로그인 상태의 변화를 관찰하는 관찰자이다.

• 이는 기본적으로 event listener로, 유저 상태에 변화가 있을 때 변화를 알아차린다.
• 따라서 유저가 로그인 했을 때, 로그아웃 했을 때, 계정을 생성할 때, firebase가 초기화될 때 트리거 된다.

v.9은 이 문서 참고
현재 로그인한 사용자를 가져올 때 권장하는 방법은 다음과 같이 Auth 객체에 관찰자를 설정하는 방법이다.

import { getAuth, onAuthStateChanged } from "firebase/auth";
//
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

• 관찰자를 사용하면 현재 사용자를 가져올 때 Auth 객체가 중간 단계(초기화 등)에 있지 않도록 할 수 있다. signInWithRedirect를 사용하면 onAuthStateChanged 관찰자는 getRedirectResult가 해결될 때까지 기다린 후에 트리거된다.

useEffect()를 사용하여 onAuthStateChanged 관찰자를 작성하자.

//절대 경로(absolute import)
import AppRouter from "components/Router";
import { useEffect, useState } from "react";
//절대 경로(absolute import)
//fbase에서 authService 가져오기(export로 내보냈기 때문에 {} 중괄호 쳐서 가져와야 함)
import { authService } from "fbase";
import { getAuth, onAuthStateChanged } from "firebase/auth";

function App() {
  //🔥 firebase가 프로그램을 초기화하길 기다리고 나서 isLoggedIn이 바뀌게 해야 한다.
  const [init, setInit] = useState(false);
  //인증서비스의 현재 유저가 참인지 거짓인지에 따라 (로그인했는지 안했는지에 따라)state 달라짐
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  //🔥 어떻게 기다릴 수 있을까? useEffect()를 사용하면 된다 ㅇㅇ!
  useEffect(() => {
    const auth = getAuth();
    //🔥🔥 유저 변화가 있는지 listen하기: onAuthStateChanged관찰자 사용
    //🔥 onAuthStateChanged은 콜백이 필요한데, 콜백은 user이다.
    onAuthStateChanged(auth, (user) => {
      //console.log(user);
      //🔥 user가 있다면 로그인 참으로 바꿔주고, 아니라면 로그인 거짓으로
      if (user) {
        setIsLoggedIn(true);
        const uid = user.uid;
      } else {
        setIsLoggedIn(false);
      }
      //🔥 그러고 나서 초기화 시켜라
      setInit(true);
    });
  }, []);
  //Router 렌더하기 & AppRouter에 prop 전달하기
  return (
    <>
      {/*🔥 init이 거짓이면 라우터 숨기고 초기화 중이라고 띄우기*/}
      {init ? <AppRouter isLoggedIn={isLoggedIn} /> : "초기화중..."}
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

오케이
초기화중...뜬다음에 로그인 되었으면 HOME이 뜬다.

계정

이제 로그아웃하자. indexedDB에 있는 data 지우면 됨.
계정 삭제하고 새로운 계정 만들자.

그러고 나서 또 똑같은 계정을 만드려고 하면 콘솔에 오류가 뜬다.

email이 이미 사용 중이어서 뜨는 오류인데, 이 부분은 여기에 발생하는 오류이다.
📍 Auth.js

//🔥 이메일, 비번으로 새로운 계정 생성 및 로그인 하기위해 아래 메서드 임포트하기
//🔥 getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);
  const auth = getAuth();
  //email, password에 사용하는 이벤트
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  //form에 사용하는 이벤트
  const onSubmit = async (event) => {
    event.preventDefault();
    //form submit하면 newAccount 스테이트로 확인하자!
    //newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
    try {
      let data;
      if (newAccount) {
        data = await createUserWithEmailAndPassword(auth, email, password);
        setNewAccount(false);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
      console.log(data);
    } catch (error) {
      //❗️❗️❗️❗️❗️❗️여기에서 발생하는 에러!❗️❗️❗️❗️❗️
      console.log(error);
    }
  };

  return (
    <div>
      <h1>로그인 페이지</h1>
      <p>로고 넣기</p>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="Email"
          required
          value={email}
          name="email"
          onChange={onChange}
        ></input>
        <input
          type="password"
          placeholder="Password"
          required
          value={password}
          name="password"
          onChange={onChange}
        ></input>
        <input type="submit" value={newAccount ? "Create Account" : "Login"} />
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with GitHub</button>
      </div>
    </div>
  );
};

export default Auth;

따라서 에러 메시지를 띄우자.

//이메일, 비번으로 새로운 계정 생성 및 로그인 하기위해 아래 메서드 임포트하기
//getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);
  //🔥 error 스테이드를 만들자. 디폴트 값으로 비어 있는 텍스트 주기
  const [error, setError] = useState("");
  const auth = getAuth();
  //email, password에 사용하는 이벤트
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  //form에 사용하는 이벤트
  const onSubmit = async (event) => {
    event.preventDefault();
    //form submit하면 newAccount 스테이트로 확인하자!
    //newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
    try {
      let data;
      if (newAccount) {
        data = await createUserWithEmailAndPassword(auth, email, password);
        setNewAccount(false);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
      console.log(data);
    } catch (error) {
      //🔥에러가 생기면 error 스테이트에 넣어서 에러 메세지 띄우기
      //console.log(error.message);
      setError(error.message);
    }
  };

  return (
    <div>
      <h1>로그인 페이지</h1>
      <p>로고 넣기</p>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="Email"
          required
          value={email}
          name="email"
          onChange={onChange}
        ></input>
        <input
          type="password"
          placeholder="Password"
          required
          value={password}
          name="password"
          onChange={onChange}
        ></input>
        <input type="submit" value={newAccount ? "Create Account" : "Login"} />
        {/*🔥 error 보여주기*/}
        {error}
      </form>
      <div>
        <button>Continue with Google</button>
        <button>Continue with GitHub</button>
      </div>
    </div>
  );
};

export default Auth;

로그인/가입하기 토글 버튼 만들기

//이메일, 비번으로 새로운 계정 생성 및 로그인 하기위해 아래 메서드 임포트하기
//getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword
import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";

import { useState } from "react";

const Auth = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [newAccount, setNewAccount] = useState(true);
  //error 스테이드를 만들자. 디폴트 값으로 비어 있는 텍스트 주기
  const [error, setError] = useState("");
  const auth = getAuth();
  //email, password에 사용하는 이벤트
  const onChange = (event) => {
    const {
      target: { name, value },
    } = event;
    if (name === "email") {
      setEmail(value);
    } else if (name === "password") {
      setPassword(value);
    }
  };
  //form에 사용하는 이벤트
  const onSubmit = async (event) => {
    event.preventDefault();
    //form submit하면 newAccount 스테이트로 확인하자!
    //newAccount가 참이면 계정 새로 만들고, 거짓이면 로그인하기
    try {
      let data;
      if (newAccount) {
        data = await createUserWithEmailAndPassword(auth, email, password);
        setNewAccount(false);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
      console.log(data);
    } catch (error) {
      //에러가 생기면 error 스테이트에 넣어서 에러 메세지 띄우기
      //console.log(error.message);
      setError(error.message);
    }
  };
  //🔥 가입해야하는지 로그인해야 하는지 토글하는 함수: newAccount의 이전 값과 반대되는 값 리턴하기
  const toggleAccount = () => setNewAccount((prev) => !prev);
  return (
    <div>
      <h1>로그인 페이지</h1>
      <p>로고 넣기</p>
      <form onSubmit={onSubmit}>
        <input
          type="email"
          placeholder="Email"
          required
          value={email}
          name="email"
          onChange={onChange}
        ></input>
        <input
          type="password"
          placeholder="Password"
          required
          value={password}
          name="password"
          onChange={onChange}
        ></input>
        <input type="submit" value={newAccount ? "가입하기" : "로그인"} />
        {/*error 보여주기*/}
        {error}
      </form>
      {/*🔥 newAccount(새로운 계정)가 참이면 로그인, 거짓이면 가입하기가 되는 토글 만들기 */}
      <button onClick={toggleAccount}>
        {newAccount ? "로그인" : "가입하기"}
      </button>
      <div>
        <button>Continue with Google</button>
        <button>Continue with GitHub</button>
      </div>
    </div>
  );
};

export default Auth;