Firebase提供了驗證的服務，在驗證首頁可以看到已經存在的使用者:

第一次使用時，必須先啟動其中一種註冊的方式

選擇要啟用的登入方式，並且點選啟用:

這樣就啟用了電子郵件/密碼的驗證服務了。

註冊畫面

我們先寫一個註冊畫面:

/src/components/account/account.vue

<script setup lang="ts">
import { reactive } from 'vue'

const account = reactive({
  email: '',
  password: ''
})
const state = reactive({
  message: '請輸入帳號密碼',
  status: 'info' as 'info' | 'error' | 'success' | 'warning' | undefined
})

</script>
<template>
  <v-container>
    <v-text-field v-model="account.email" label="帳號"></v-text-field>
    <v-text-field v-model="account.password" label="密碼" type="password"></v-text-field>
    <v-alert :type="state.status" title="訊息" :text="state.message"></v-alert>
    <v-btn color="primary">註冊</v-btn>
  </v-container>
</template>

在route.ts裡，加入這個畫面:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/english',
      name: 'english',
      // component: EnglishDB
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('./components/EnglishDB.vue')
    },
    {
      path: '/chemistry',
      name: 'chemistry',
      component: () => import('./components/ChemistryInput.vue')
    },
    {
      path: '/chemistry-radio',
      name: 'chemistry radio',
      component: () => import('./components/ChemistryRadio.vue')
    },
    **{
      path: '/account',
      name: 'account',
      component: () => import('./components/account/Account.vue')
    }**
  ]
})

export default router

輸入http://localhost:5173/account，就可以看到:

利用firebase提供的createUserWithEmailAndPassword()，將使用者輸入的帳號與密碼傳給firebase進行註冊 (詳參:Sign up new users)。範例使用.then()及.catch()，我們改用await及 try catch來處理:

接下來加入註冊的邏輯:

const auth = getAuth();

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

/src/components/account/account.vue

<script setup lang="ts">
import { reactive } from 'vue'
**import app from '@/components/settings/FirebaseConfig.vue'
import { createUserWithEmailAndPassword, getAuth } from 'firebase/auth'**
const account = reactive({
  email: '',
  password: ''
})
const state = reactive({
  message: '請輸入帳號密碼',
  status: 'info' as 'info' | 'error' | 'success' | 'warning' | undefined
})
**const auth = getAuth(app)**

**async function signUp() {
  state.status = 'info'
  state.message = '註冊中...'
  const res = await createUserWithEmailAndPassword(auth, account.email, account.password)
  if (res.user) {
    state.status = 'success'
    state.message = '註冊成功'
  }
}**
</script>
<template>
  <v-container>
    <v-text-field v-model="account.email" label="帳號"></v-text-field>
    <v-text-field v-model="account.password" label="密碼" type="password"></v-text-field>
    <v-alert :type="state.status" title="訊息" :text="state.message"></v-alert>
    <v-btn color="primary" **@click="signUp"**>註冊</v-btn>
  </v-container>
</template>