【amplify】signIn機能実装にて、認証が済んでいない場合のエラーハンドリングについて

はじめに

signIn/signUp周りの流れとして、signUp > 認証メールが送られる > 認証画面でコード入力 > 認証完了画面 > signInページでsignIn > HOME　というような流れで進めようとしています。

困ったこと

今回の困ったポイントとして、認証画面で認証コードを入力せずにsignInページなどにURLなどを変更して行った場合(そもそもここを行けないようにする必要がある？)、認証ページに戻る導線がありませんでした。

そこで、仮にsignInページでメアド・パスワードを入力しても、エラーとして返ってきた内容によって認証ページに遷移させたりする機能を実装することにしました。

どうやったか

結論からいうと、try/catch構文を使ってcatch(err)に返ってきたerrに**"UserNotConfirmedException"**と返ってきたら認証ページ、それ以外はalert("サインインに失敗しました")とページ遷移/表示されるようにしました。

コード

export const signIn = async (params: SignIn) => {
  try {
    const username = params.email;
    const password = params.password;
    const res = await Auth.signIn(username, password);
    window.location.href = paths.afterRoutes.home;
    return res;

  } catch (err: any) {
    const { code } = err;

    if (code === "UserNotConfirmedException") {
      window.location.href = paths.beforeRoutes.confirmUser;
    } else {
      alert("サインインに失敗しました。");
    }
  }
};

errorが返ってきた際に、consoleでerror内容を見てみると、下記のような状態になっていたので、catchの中でconst {code} = err;としてerrからcodeを分割代入しています。

まとめ

上記のようにすることで、指定したエラー文が返ってきたら認証ページへ、それ以外はalertを表示、成功したらHOMEへ遷移という流れを実装できました。

try/catｃｈのcatch内で処理を書くということをあまりしたことがなかったので、新たな学びとなり良かったです。

参考