Expo + Firebase Authでパスワード再設定・メール確認覚え書き

8563 ワード
Firebase expo reactnative Firebase テキストリンク

はじめに

前回の記事の続きで、FirebaseAuthによるパスワード再設定のメールアドレスの確認を実装してみます。

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

redux.js
export const sendPasswordResetEmail = () => (dispatch) => {
  const email = store.getState().user.data && store.getState().user.data.email;
  if (email) {
    Alert.alert(
      'Reset Password',
      'We will email you instructions on how to reset your password.',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'OK',
          onPress: () => {
            auth.sendPasswordResetEmail(email).then(() => {
              Alert.alert('The email has been sent to your account.');
            }).catch(function({ message }) {
              Alert.alert(message);
            });
          }
        },
      ]
    );
  }
};

簡便にダイアログ画面を表示するようにしてみました。
Redux実装のためstore.getState().user.dataでfirebase.Userインスタンスを取得していますが、そこは気にしなくて結構です。ユーザー認証が済んでいる状態でfirebase.auth.AuthインスタンスのsendPasswordResetEmail(email)メソッドを使うとFirebaseプロジェクトからユーザーにメールが送信されます。
このメールの内容は、Firebaseコンソールの「Authentication」→「テンプレート」→「パスワードの再設定」から一部変更できます。

Hello,

Follow this link to reset your expo-auth-practice password for your %EMAIL% account.

https://<project name>.firebaseapp.com/__/auth/action?mode=<action>&oobCode=<code>

If you didn’t ask to reset your password, you can ignore this email.

Thanks,

Your <project name> team

このようになっています。再設定のためのリンク先を変更できるので、独自実装のページにすることも可能です。
その場合はこちらの公式ドキュメントにまとまっています。

メールアドレスの確認

こちらもほぼ同様です。

redux.js
export const verifyEmail = () => (dispatch) => {
  const user = store.getState().user.data;
  if (user) {
    Alert.alert(
      'Email verification',
      'We will send a verification link to your email account.',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'OK',
          onPress: () => {
            user.sendEmailVerification().then(() => {
              Alert.alert('The email has been sent.');
            }).catch(function({ message }) {
              Alert.alert(message);
            });
          }
        },
      ]
    );
  }
};

メールアドレスの確認が完了したらアプリ側で画面を更新したいのですが、現状スマートにやる方法はなさそうなので時間をとって少し調べてみようと思います。

Is there a way to know that a user clicked on the verification link?

コールバックURLを使って、端末内で確認が完結する場合はアプリ画面に戻らせることはできるようです。

→してみました(2019/10/19)

gem install redisエラー解決方法