Firebase是Alphabet(google)的子公司，提供了一些很好用的服務，例如，身分驗證、Firestore(NoSQL database)。

• Building a CRUD application using Svelte and Firebase
  • with Carbon Components
• Sveltekit Firebase Authenication Recipe Site
• Lazy-Loading Firebase with SvelteKit

<aside> 📢 尙未完全改為SvelteKit語法

</aside>

• Authentication
• 以下簡單的整理一些常用的功能
• 如果是採用email及密碼的帳號管理方式，註冊時，可使用createUserWithEmailAndPassword()。

需要import相關套件

import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';

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

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

    message = "";//清除前次訊息
    try {
      const res = await createUserWithEmailAndPassword(
        auth,
        userID,
        password
      );
      message = "帳號已產生";
      console.log({ res });
    } catch (error) {
      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;
      }
      
    }

• 登入時，可採用signInWithEmailAndPassword()，登入時也會有錯誤必須處理，可利用try catch去處理，並利用變數(如:message)顯示錯誤訊息在畫面上。範例程式可參考Form。

      const auth = getAuth();
      const res = await signInWithEmailAndPassword(
        auth,
        userID,
        password
      );

• 登入後，可以利用回傳的物件變數(如:res)取得登入的資訊。不過，一般而言，登入資料會與其他頁面共用，所以，會利用firebase提供的onAuthStateChanged()來設定一個observer ()監看登入狀態，所以，假如在Menu上要根據目前是否登入來改變Menu上的項目。例如:

    (user)=>{
      setCurrentUser(user);
      console.log(user);
    }

• 將observer傳給onAuthStateChanged()後，將當登入或登出時，observer就會被呼叫。unsub是用來停止監看，也就是當這個元件不再需要顯示時，會去呼叫onAuthStateChanged()回傳回來的unsub函數。例如:

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

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

在介面中，判斷state變數currentUser是否為null，就知道現在是否已登入，透過這樣的方式來改變介面的呈現內容。