這些範例程式結合Svelte Material-UI以及Firebase的一些功能，例如，登入、註冊、資料讀取、資料新增、資料刪除、資料修改

登入

要開發登入功能之前，可以先到firebase裡直接新增使用者，或者，等完成註冊之後再一起測試。

我們來設計一個登入頁面

<script>
	import { goto } from '$app/navigation';
	import Button from '@smui/button';
	import Textfield from '@smui/textfield';
	import HelperText from '@smui/textfield/helper-text';
	let userID = '';
	let password = '';
	let message = '';
	function login() {
		if (userID == 'admin' && password == 'password') {
			message = '登入成功';
			goto('/product');
		} else {
			message = '登入失敗';
		}
	}
</script>

<div>
	<h1>登入你的帳戶</h1>
	<p>
		<Textfield bind:value={userID} label="帳號:">
			<HelperText slot="helper">請輸入帳號</HelperText>
		</Textfield>
		<Textfield bind:value={password} type="password" label="密碼:">
			<HelperText slot="helper">請輸入密碼</HelperText>
		</Textfield>

		<Button variant="raised" type="submit" on:click={login}>登入</Button>
		<Button variant="outlined" on:click={() => goto('register')}>註冊</Button>
		{message}
	</p>
</div>

• AppBar的部分，請參考Svelte Material-UI的說明

點選TextField之後，會看到HelpText，顯示在下方

接下來，加入firebase authentication的相關程式碼

首先，更改一下/src/lib/firebase.js

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
**import { getAuth } from 'firebase/auth';**
import {
	PUBLIC_FIREBASE_API_KEY,
	PUBLIC_FIREBASE_AUTH_DOMAIN,
	PUBLIC_FIREBASE_DATABASE_URL,
	PUBLIC_FIREBASE_PROJECT_ID,
	PUBLIC_FIREBASE_STORAGE_BUCKET,
	PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
	PUBLIC_FIREBASE_APP_ID
} from '$env/static/public';

const firebaseConfig = {
	apiKey: PUBLIC_FIREBASE_API_KEY,
	authDomain: PUBLIC_FIREBASE_AUTH_DOMAIN,
	databaseURL: PUBLIC_FIREBASE_DATABASE_URL,
	projectId: PUBLIC_FIREBASE_PROJECT_ID,
	storageBucket: PUBLIC_FIREBASE_STORAGE_BUCKET,
	messagingSenderId: PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
	appId: PUBLIC_FIREBASE_APP_ID
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
**const auth = getAuth(app);**

// export db
export function getDB() {
	return db;
}
**export function getFirebaseAuth() {
	return auth;
}** 

/src/routes/customer/login/+page.svelte

因為我們使用電子郵件及密碼作為登入的方式，欄位名稱也換一下，登入的完整程式:

<script>
	import { goto } from '$app/navigation';
	import Button, { Label } from '@smui/button';
	import Textfield from '@smui/textfield';
	import HelperText from '@smui/textfield/helper-text';
	**import { getFirebaseAuth } from '$lib/firebase';
	import { signInWithEmailAndPassword } from 'firebase/auth';**

	let email = '';
	let password = '';
	let message = '';
	async function login() {
		**const auth = getFirebaseAuth();**
		try {
			**const res = await signInWithEmailAndPassword(auth, email, password);**
			// console.log('res:', res);
			message = '登入成功';
			goto('product');
		} catch (error) {
			message = '帳號/密碼錯誤';
		}
	}
</script>

<div>
	<h1>登入你的帳戶</h1>
	<p>
		<Textfield bind:value={email} label="電子郵件信箱:">
			<HelperText slot="helper">請輸入電子郵件信箱</HelperText>
		</Textfield>
		<Textfield bind:value={password} type="password" label="密碼:">
			<HelperText slot="helper">請輸入密碼</HelperText>
		</Textfield>
		<Label>{message}</Label>
		<Button variant="raised" type="submit" on:click={login}>登入</Button>
		<Button variant="outlined" on:click={() => goto('register')}>註冊</Button>
	</p>
</div>

註冊

接下來，我們來設計一個註冊頁面，可以使用firebase提供的註冊功能:

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

如果，我們註冊所需要的欄位，不只這兩個欄位，那我們就要利用firestore的setDoc()新增一筆資料，使用setDoc()的好處是，如果已存在就會覆蓋原本的內容，如果不存在就新增一筆資料。目前的情境下，可使用setDoc():