【Firebase Authentication】ログイン周りの便利な記述

こんにちは、キャメルスタジオのフロントエンドエンジニアの谷口です。
今回はFirebase Authenticationのログイン周りの便利な記述についてのご紹介です。

Firebase Authenticationでログイン機能を実装した際に、

新規会員登録したらメールアドレス宛てに確認用のメールを送信したい！
パスワード忘れた場合、パスワード再設定のメールを送信したい！

なんてこと、ログイン周りを実装していたら出てきますよね？
そんなときにとても便利なFirebaseの便利機能のご紹介です！

新規会員登録の際に確認メールを送信したい
スクラッチで作ろうとするとメールを送信するプログラムを書いたり、セキュリティを考慮すれば登録できる時間に制限を持たせるなど結構めんどくさいことが多いですよね。
Firebaseではこういったプログラムを書かずある記述を書くことで確認メールを送ってくれる記述が存在します。

新規登録画面にメールアドレスとパスワードを入力する入力欄があるとします。
適宜ユーザーに入力してもらい送信を押すとまず、

firebase.auth().createUserWithEmailAndPassword(email, password);

というプログラムを走らせます。
このときに入力されたメールアドレスとパスワードを取得し登録します。
そのあと、下記プログラムを走らせます。

var user = firebase.auth().currentUser;

user.sendEmailVerification().then(function() {
 // 成功した際の処理
}).catch(function(error) {
 // 失敗した際の処理
});

そしたらまずfirebase.auth().currentUserでさきほど登録したメールアドレスなどのユーザー情報を取得することができるのでこの情報を利用し確認メールを送信できるようになります。
メールアドレスの確認状況はemailVerifiedで分かり、
確認が終わってなければ仮登録の状態になります。

事前にサイト内にfirebaseを導入している前提ですが、たったこれだけで確認メールを送ってくれます。
便利ですね…🤔

ちなみにメールの本文はデフォルトでは英文になっていてこちらもカスタマイズ可能です。
firebase console内の左メニューでAuthenticationを選択し、タブのtemplatesを選択します。

するとメールの本文を設定する箇所があるのでそこを変えていただくとその文言でメールが届くようになります。

パスワードの再設定メールの送信

こちらも簡単でたったこれだけです。

var auth = firebase.auth();
var emailAddress = "user@example.com";

auth.sendPasswordResetEmail(emailAddress).then(function() {
 // 成功した際の処理
}).catch(function(error) {
 // 失敗した際の処理
});

こちらは再設定メールなのですでに登録したユーザー向けの機能となります。
inputタグなどでメールアドレスを入力するエリアを設けてそこにアドレスをいれてもらい送信ボタンを押した際に、そのメールアドレスを取得し変数emailAddressにいれればそのメールアドレス宛てにパスワード再設定のメールを飛ばせますね。
こちらも新規登録と同様でfirebase consoleからメールの本文を好きな文言に変更することができます。

ほかにもメールアドレスの変更確認メールや、SMSによる確認などもあるのでぜひ興味がある方は調べてみてください！

以上、Firebase Authenticationの便利な記述紹介でした。
最後までお読みいただきありがとうございました。