ふせんUIを使ったタスク管理とチャットを融合したチームのタスク管理コミュニケーションツール「QnQTree」を開発しているあどにゃーです。
今回サービスにFirebaseを用いたメール・パスワード認証を組み込んだので、ハマった点についてまとめていきたいと思います。ハマりポイントがメインなので正常系通れば良いという初心者向けというよりは、security rule含めて最低限サービスで使えるレベルを実装する人向けです。
※Firebase v9記述です。（v8と関数名は変わりません）

パスワード認証の想定されるケース

・新規ユーザの初回登録（Sign up)
・登録済みユーザがSign inできず、パスワードをリセット
・登録済みユーザが通常のSing in
・Sing in済みユーザがパスワードを変更

パスワード認証を実装する場合、大きくわけて上記4つのケースを網羅する必要があります。
それぞれについて説明していきます。

新規ユーザの初回登録（Sign up)

初回はFirebase Authenticationにユーザアカウントがないので、まずはメールとパスワードを入力してアカウントを作ることになります。
アカウントを作ってそのまま使えるようにしてしまうと、他人のメアドでSing upする「なりすまし」を防げません。
そのため、本人のメールアドレス確認を行うメール認証のステップを追加します。

パスワード認証でアカウントが作成された時のauth.currentUserの情報はメール認証前のverifiedEmail=falseの状態です。
verifiedEmail=falseのUserはセキュリティルールでcreateやupdateの機能をブロックして、メール認証完了したタイミングで機能を開放するNo4~8を実装しなければいけません。
このあたりを書いている記事を見かけませんでしたので書いて見ます

password認証で作られるauth.currentUser

email: xxx@xx.jp
verifiedEmail: false
provideData[0].providerId : password
provideId: firebase

google認証で作られるauth.currentUser

email: xxx@gmail.com
verifiedEmail: true
provideData[0].providerId : google.com
provideId: firebase

新規ユーザの初回登録の実装flowは下記になります。
★をつけているのは、他の記事に載っていないハマりポイントです。

実装フロー

1. メールアドレス・パスワード入力
2. すでに登録されたメアドか確認（fetchSignInMethodsForEmail）
3. 新規ユーザーアカウント作成（createUserWithEmailAndPassword）
4. 本人確認メールの送信(sendEmailVerification)
5. 本人確認できるまではすべての機能をロック(firestore.rules)　★
6. 本人確認メールのリンクをクリックして本人確認(applyActionCode)
7. auth.currentUser.reload()で本人のauth.ccurentUserを更新 ★
8. auth.currentUser.getIdToken(true)でrulesのauth.token.email_verifiedを更新　★

No1~4の実装認証メールの送信まで

passwordLogin: async function (email, password) {
      // すでにSINGUP済かチェック
      try {
        const signInMethods = await fetchSignInMethodsForEmail(auth, email)
        // すでにサインアップ済ならTrue
        this.isCreatedUser = (signInMethods.length !== 0)
      } catch (error) {
        console.error(error)
        this.alertMsg = '情報の取得に失敗しました'
        return
      }
      // すでにSIGNUP済み
      if (this.isCreatedUser) {
        // 通常のSIGN INなので後述
      } else {
      // SINGUP前
        console.log('新規ユーザのSign UP')
        try {
          // サインアップします
          const userCredential = await createUserWithEmailAndPassword(auth, email, password)
          let user = userCredential.user
          user.displayName = email.substr(0, email.indexOf('@'))
          // 独自のsingUp関数でFirestoreにもuser情報を保存
          await signUp(user)
          // 認証確認用のメールを送信
          await sendEmailVerification(auth.currentUser)
          // 別ページに移動
          Router.push({ path: '/editprofile' })
        } catch (error) {
          console.log(error)
          this.alertMsg = 'アカウント作成に失敗しました'
        }
      }
    }

認証メールをクリックして戻ってきた後のNo5~8の実装は下記となります。
sendEmailVerificationで認証メールを飛ばすことができ、認証メールにはqueryにmode,oobCodeが含まれています。
modeはresetPassword, recoverEmail, verifyEmailのいずれかの値が入っており、ユーザがどの条件でURLから飛んできたかを示します。
oobCodeはリクエストの検証するためのワンタイムコードです。この検証コードを使ってメール認証します。

ハマりポイントは２箇所

1つ目：applyActionCode(auth, actionCode)でメール認証を適応しても、auth.currentUser.emailVerifiedはFalseのままであるという点です。auth.currentUser.reload()を行って、authの情報を更新する必要があります。

２つ目：firestore.rulesのセキュリティルールauth.token.email_verifiedはauth.currentUser.getIdToken(true)でIdTokenを更新してあげないとしないとFalseのままです。

この２つに触れている記事がほとんどなく、実装をする上でかなりハマりました

No5~8の実装　　認証メールの適応

    async verifyEmail () {
      this.modalMsg = ''
      const currentUser = auth.currentUser
      this.isEmailVerified = currentUser.emailVerified
      // すでに認証済
      if (this.isEmailVerified) {
        this.modalMsg = '認証が完了しました'
        Router.push({ path: '/editprofile' })
      }
      // 認証前の場合は認証処理を行う
      const actionCode = this.$route.query.oobCode
      if (actionCode && !currentUser.emailVerified) {
        // actionCodeを用いてメール認証を行う
        try {
          await applyActionCode(auth, actionCode)
          // メール認証を行ってもauthをreloadしないとUser情報が更新されないのでreloadする
          await auth.currentUser.reload()
          // firestore.rules側も更新されていないのでgetIdTokenでrefleshする
          await auth.currentUser.getIdToken(true)
        } catch (error) {
          // 確認メールを一定時間クリックしないと無効化されてエラーになる
          this.modalMsg = 'メール認証に失敗しました'
          console.log(error)
        }
        try {
          const applyUser = auth.currentUser
          await getMyUserData(this.loginUserId)
          this.isEmailVerified = applyUser.emailVerified
          if (this.isEmailVerified) {
            this.modalMsg = '認証が完了しました'
            Router.push({ path: '/editprofile' })
          } else {
            this.modalMsg = 'メール認証が完了していません'
          }
        } catch (error) {
          this.modalMsg = 'メール認証に失敗しました'
          console.log(error)
        }
      }
    },

セキュリティルールは実装している機能によりますが、firestoreのcreateやupdateをrequest.auth.token.email_verified == trueでないと行えないように設定します。

security rules


 allow create: if request.auth.uid != null
                    && request.auth.token.firebase.sign_in_provider != 'anonymous'
                    && request.auth.token.email_verified == true

登録済みユーザがSign inできず、パスワードをリセット

実装flowは下記になります。こちらは特にハマるポイントはありませんでした。

実装フロー

1. パスワードのリセット　sendPasswordResetEmail(auth, this.email)
2. 再発行メールのクリック
3. リセットコードの確認　verifyPasswordResetCode(auth, actionCode)
4. パスワードの再発行　confirmPasswordReset(auth, actionCode, this.password)
5. サインイン　signInWithEmailAndPassword(auth, this.email, this.password)

async sendPasswordReset (email) {
      this.alertMsg = ''
      try {
        await sendPasswordResetEmail(auth, email)
        this.alertMsg = '再発行メールを送信しました。メールから再認証してください'
      } catch (error) {
        console.error(error)
        this.alertMsg = '発行に失敗しました'
      }
    },
    async confirmPasswordResetUser () {
      const actionCode = this.$route.query.oobCode
      if (actionCode && this.$route.query.mode === 'resetPassword') {
        try {
          await verifyPasswordResetCode(auth, actionCode)
          // 成功したので別画面を出す
          this.isResetPassword = true
        } catch (error) {
          // 確認メールを一定時間クリックしないと無効化されてエラーになる
          console.log(error)
        }
      }
    },
resetPasswordLogin: async function (email, password) {
      this.alertMsg = ''
      // すでにSINGUP済かチェック
      try {
        const signInMethods = await fetchSignInMethodsForEmail(auth, email)
        // すでにサインアップ済ならTrue
        this.isCreatedUser = (signInMethods.length !== 0)
      } catch (error) {
        console.error(error)
        this.alertMsg = '情報の取得に失敗しました'
        return
      }
      // SINGUP前なら新規ユーザなのでパスワード再発行処理ではない
      if (!this.isCreatedUser) {
        this.alertMsg = '新規登録を行ってください'
        this.isResetPassword = false
        return
      }

      // すでにSIGNUP済み && 新規パスワードがある　&& 再発行認証コードがある
      console.log('パスワード再発行処理')
      try {
        const actionCode = this.$route.query.oobCode
        await confirmPasswordReset(auth, actionCode, password)
      } catch (error) {
        console.error(error)
        this.alertMsg = '再発行メールの有効期限が切れています'
        this.isResetPassword = false
      }
      // パスワードのresetが完了したのでSING IN
      try {
        const userCredential = await signInWithEmailAndPassword(auth, email, password)
        const user = userCredential.user
        if (!user.emailVerified) {
          // メアド確認終わってない
          this.alertMsg = 'メール確認が完了していません'
          return
        } else {
          // メアド認証が完了している
          Router.push({ path: '/' })
          this.isResetPassword = false
        }
      } catch (error) {
        console.log(error)
        this.alertMsg = '予期しないエラーが発生しました'
        this.isResetPassword = false
      }
    },

登録済みユーザが通常のSing in

実装flowは下記になります。こちら実は新規登録のFlowに混ざっています。
もう一度コードを記載すると下記になります。

実装フロー

メールアドレス・パスワード入力
すでに登録されたメアドか確認（fetchSignInMethodsForEmail）
新規ユーザーのSIgnIn (signInWithEmailAndPassword)

passwordLogin: async function (email, password) {
      // すでにSINGUP済かチェック
      try {
        const signInMethods = await fetchSignInMethodsForEmail(auth, email)
        // すでにサインアップ済ならTrue
        this.isCreatedUser = (signInMethods.length !== 0)
      } catch (error) {
        console.error(error)
        this.alertMsg = '情報の取得に失敗しました'
        return
      }
      // すでにSIGNUP済み
      if (this.isCreatedUser) {
        console.log('既存ユーザのSign IN')
        try {
          const userCredential = await signInWithEmailAndPassword(auth, email, password)
          const user = userCredential.user
          if (!user.emailVerified) {
            // メアド確認終わってない
            this.alertMsg = 'メール確認が完了していません'
            return
          } else {
            // メアド認証が完了している
            Router.push({ path: '/' })
          }
        } catch (error) {
          console.log(error)
          this.alertMsg = 'パスワードが間違っています'
        }
      } else {
      // SINGUP前
      }
    }

Sing in済みユーザがパスワードを変更

実装フローは下記となります。こちらも★がハマりポイントです。
Sign inしてしばらく期間が経過しているようなアカウントでは、クレデンシャル情報が古くなっており、再認証しないとupdatePassword()を使うことができないケースがあるようです。
ですので、必ず再認証処理を入れてください。

実装フロー

クレデンシャルの取得　EmailAuthProvider.credential(email, oldPassword)　★
再認証 reauthenticateWithCredential(user, authCredential)　★
パスワードの更新 updatePassword(user, newPassword)

  async updateNewPassword () {
      this.alertPasswordMsg = ''
      if (this.newPassword !== this.confirmedPassword) {
        this.alertPasswordMsg = '確認passwordが一致しません'
        return
      }
      const currentUser = auth.currentUser
      const authCredential = EmailAuthProvider.credential(currentUser.email, this.oldPassword)
      // 認証情報の更新(ログインしっぱなしで最近ログインしていないと無効化されている)
      try {
        await reauthenticateWithCredential(currentUser, authCredential)
      } catch (error) {
        console.error(error)
        this.alertPasswordMsg = '現在のpasswordが間違っています'
        return
      }
      // パスワードの更新
      try {
        await updatePassword(currentUser, this.newPassword)
        this.alertPasswordMsg = '更新に成功しました。新しいパスワードをお使いいただけます'
        this.oldPassword = ''
        this.newPassword = ''
        this.confirmedPassword = ''
      } catch (error) {
        console.log(error)
        this.alertPasswordMsg = '更新に失敗しました'
      }
    },

まとめ

下記チームのタスク管理サービスで実装してるので良かったらログインしてみてください。
非エンジニアの方だとSing upとSing inの違いがわからない人も多いので、
そのあたりを意識しないでLoginできるようにつくっています。
https://qnqtree.com/about