今日はほぼ自分用のメモとして、Firebaseのメールリンク認証を行う備忘録を書いていきます。

なぜこの記事を書くかと言うと、Firebaseのアカウントでパスワードリセットを行うときにユーザーをログインさせないと新しくパスワードを設定することができないんです。

じゃあパスワード変更できないじゃんと思ったのですが、さすがグーグルさん！

Firebaseにはパスワードなしでリンクを使うことで、ログインすることができます。

特に詳しい説明は致しませんのでご了承ください。

それでは見ていきましょう！

アクションコードの設定

メールリンクの送信はパスワードはいらないものの、メールアドレスは必要なのでユーザーに入力してもらいましょう。

Firebaseのこちらのドキュメントメールのアクションリンクを生成するにアクションコードの設定が書かれているのでわからなかったら見て下さい。

以下のようにアクションコードを設定します。

index.js

 // メールリンクにアクションコードを設定
 const actionCodeSettings = {
    url: window.location.origin + '飛ばしたいパス（例：/user）',
    handleCodeInApp: true
 }

url：この後にメールを送るのですが、その送ったメールのリンクに続行URLというもの。要するにメールにクリックし、処理を終えたときにどのページに飛ぶかを記録。

handleCodeInApp：これについてはあまり僕も詳しくないので、先ほど貼ったドキュメントを見て下さい。どうやらWebだったらブラウザに、iosだったらiosアプリ、AndroidならAndroidアプリに飛ぶらしい。（正しいかは分からない）

メールの送信、およびEmail情報の保存

次に、ユーザーにメールを送信します。

同時にローカルストレージにメールアドレスを保存します。

index.js

      // メールリンクにアクションコードを設定
      const actionCodeSettings = {
        url: window.location.origin + '/actionresetpassword',
        handleCodeInApp: true
      }

      // ここから追加

      // メールリンクの送信
      firebase
        .auth()
        .sendSignInLinkToEmail('example@gmail.com', actionCodeSettings)
        .then(() => {
          // ローカルストレージにemail情報を保存
          window.localStorage.setItem('email', 'example@gmail.com')
        })
        .catch((error) => {
          alert(error)
          return
        })

メールリンクが本当に正しいかの確認

最後に、クリックしたリンクが本当に正しいのかを確認します。

クリックしたページで、isSignInWithEmailLinkという関数を使って判断します。

action.js

      if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
        // リンクが正しいとき

        const email = window.localStorage.getItem('email')
        if (!email) {
          // ローカルストレージにemailキーが存在しない場合、もう１度入力
          alert('申し訳ございませんが、ご入力いただいたメールアドレスを確認できなかったため再度ご入力お願いします。')
        }

        // サインイン（これを行わないとパスワードリセットができない）
        firebase
          .auth()
          .signInWithEmailLink(email, window.location.href)
          .then(() => {
            // email情報を消去
            window.localStorage.removeItem('email')
            window.location.replace(this.$router.currentRoute.query.continueUrl)
          })
      } else {
        // リンクが正しくないとき
        alert('申し訳ございませんが、リンクの有効期限が切れているため再度ご入力お願いします。')
        window.location.replace('/')
      }

isSignInWithEmailLinkの引数には現在のURL（window.location.href）を渡します。

そして、先ほどactionCodeSettingsで設定したurlは、メールリンクのcontinueUrlというクエリ情報として渡されます。これをthis.$router.currentRoute.query.continueUrlなどのように取得します。

このようにして続行URLを使用します。

また、ローカルストレージに保存したEmail情報をもとにsignInWithEmailLink(email, window.location.href)でログインすることができます。

初めてだったので、割と時間かかりました。。。

Firebaseのドキュメントはとても分かりやすくていいなと思いました。

皆さんも誰かが書いた記事を読むだけでなく、公式ドキュメントを読むことでより理解が深まると思うのでぜひ見て下さい！

以上、「Firebase初心者向け！Firebaseでパスワードを使わずにメールリンク認証を行う方法」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも毎日初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading