Zenn
🐈

【Vue3/Firebase】ログイン画面　認証エラーを表示

2023/06/18に公開
Firebase
Vuetify
Vue 3
tech

目標

ログイン画面にサーバーエラー時にエラーメッセージを表示させる

事前準備

vue3に事前準備uetify3が導入されたProject
記事では下記Git hub Repositoryを使用する
https://github.com/viviomega/vue-viviomega

認証エラー用のリアクティブなデータを作成

表示で使うデータオブジェクト作成する処理を追加

src/LoginView.vue
+const serverError = reactive({
+  title: "認証エラー",
+  text: "",
+});

サインイン時のエラーハンドリングの修正

現在エラーログだけを表示しており、画面上で確認できる仕組みになっていないので修正していく
サーバーから送られてきたエラーコードを元に先程作成したオブジェクトに値を渡していく処理を追加する

ステータスコード
auth/user-not-found メールアドレスは登録されていない
auth/wrong-password パスワードが間違っている
src/LoginView.vue
const signin = async () => {
  ...
  signInWithEmailAndPassword(auth, state.email, state.password)
    .then((userCredential) => {
      ...
    })
    .catch((error) => {
      // 失敗時処理
      const errorCode = error.code;
      const errorMessage = error.message;
      console.log(errorCode, errorMessage);
+      if (errorCode === "auth/user-not-found") {
+        serverError.text = "登録されていないメールアドレス又はパスワードが違います";
+      } else if (errorCode === "auth/wrong-password") {
+        serverError.text = "パスワードが違います";
+      }
    });
};

サインイン時のエラーハンドリングの修正

サインアップ時の処理とほぼ同様になります

ステータスコード
auth/email-already-in-use 既に登録されているメールアドレスです
src/LoginView.vue
 // サインアップ処理
 const createAccount = async () => {
   ...
   createUserWithEmailAndPassword(auth, state.email, state.password)
     .then((userCredential) => {
       ...
     })
     .catch((error) => {
       // 失敗時処理
       const errorCode = error.code;
       const errorMessage = error.message;
       console.log(errorCode, errorMessage);
 
+      if (errorCode === "auth/email-already-in-use") {
+        serverError.text = "既に登録されているメールアドレスです";
+      }
     });
 };

画面レイアウトの修正

メールアドレスの入力項目の上にエラーが発生した場合のみ表示させる要素を追加します
Vuetifyにアラートを表示させるデザインのコンポーネントがあるのでそちらを活用します
https://vuetifyjs.com/en/components/alerts/

src/LoginView.vue
 <v-row>
+  <v-col cols="12" v-if="serverError.text">
+    <v-alert
+      type="error"
+      :title="serverError.title"
+      :text="serverError.text"
+    ></v-alert>
+  </v-col>

   <v-col cols="12">
    <v-text-field
      v-model="state.email"
      :error-messages="v$.email.$errors.map((e) => e.$message)"
      :label="constant.email"
      type="email"
      @input="v$.email.$touch"
      @blur="v$.email.$touch"
    >
    </v-text-field>
  </v-col>
  ...
 </v-row>

実行結果

認証エラーのデザインはこんな感じになります

Admin Authentication API エラー

https://firebase.google.com/docs/auth/admin/errors?hl=ja&authuser=3
現状は上記で修正した内容以外のエラーが想定できませんでしたが、今後開発を勧めて行く上で増えていく場合は記事を修正していきたいと思います

Git commit情報

SHA commit message
2f6f668 【Vue3/Firebase】ログイン画面　認証エラーを表示

Discussion