Firebase是Alphabet(google)的子公司，提供了一些很好用的服務，例如，身分驗證 (Authentication)、Firestore(NoSQL database)。Firestore的主要是以兩個概念構成:collection及document，一個collection中可以有很多document，每個document中還可以有collection。Authentication可以利用不同方法登入，最簡單的就是透過電子郵件、密碼登入。

• Firebase環境設定 (進階Web程式設計教材)

Authentication

• Authentication (進階Web程式設計教材)
• Context with Firebase Authentication (進階Web程式設計教材)
• 用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼 (Javascript)

createUserWithEmailAndPassword()

• 如果是採用email及密碼的帳號管理方式，註冊時，可使用createUserWithEmailAndPassword()。

const auth = getAuth();
const res = await createUserWithEmailAndPassword(auth, account.email, account.password);

• 註冊時可會有一些錯誤，可利用try catch去處理，利用state變數(message)顯示錯誤訊息在畫面上。

    try {
      const res = await createUserWithEmailAndPassword(
        auth,
        account.email,
        account.password
      );
      setMessage("帳號已產生");
      console.log({ res });
    } catch (error) {
      let message = "";
      switch (error.code) {
        case "auth/email-already-in-use":
          message = "電子信箱已註冊";
          break;
        case "auth/weak-password":
          message = "密碼強度不足";
          break;
        case "auth/invalid-email":
          message = "電子郵件格式錯誤";
          break;
        default:
          message = "系統錯誤:" + error.code;
      }
      setMessage(message);
    }

signInWithEmailAndPassword()

• 登入時，採用signInWithEmailAndPassword()

      const auth = getAuth();
      const res = await signInWithEmailAndPassword(
        auth,
        account.email,
        account.password
      );

• 登入後，可以利用回傳的物件變數(如:res)取得登入的資訊。

onAuthStateChanged()

• firebase也提供onAuthStateChanged()來設定一個observer，當登入時，observer會被呼叫，並且取得目前登入者的資料(user)，再將登入者的資料儲存在state變數(currentUser)中。
• unsub是用來停止監看，也就是當這個元件不再需要顯示時，會去呼叫onAuthStateChanged()回傳回來的unsub函數。
• 再將這個部分放在useEffect()裡，例如:

  **useEffect(() => {
    const unsub = onAuthStateChanged(auth,** (user)=>{
      setCurrentUser(user);
      console.log(user);
    }**);

    return () => {
      unsub();
    }
  }, []);**