FireBase 認証機能

FireBase 認証のまとめ
FireBase では、Google,Twitter,Github などの認証が簡単にできる。

構築準備

FireBase の登録
FireBase の認証ファイルをどこかに作成

firebaseConfig.ts

import firebase from 'firebase/app';
import "firebase/auth";

const firebaseConfig = {
    apiKey: "********",
    authDomain: "********",
    databaseURL: "********",
    projectId: "********",
    storageBucket: "********",
    messagingSenderId: "********",
    appId: "********",
    measurementId: "********"
};

firebase.initializeApp(firebaseConfig);
// Twitter認証
export const Twitter = new firebase.auth.TwitterAuthProvider();

// Google認証
export const Google = new firebase.auth.GoogleAuthProvider();
export default firebase;

react の作成ページ例
react-firebaseui ですが、使用すると UI を簡単に書けます。

login.tsx

import React, { PureComponent } from "react";
import firebase, { Google } from "./firebaseConfig";
import { css } from "emotion";
import FirebaseUI from "react-firebaseui/StyledFirebaseAuth";


export default class login extends React.Component<any, any> {

  constructor(props: any) {
    super(props);
    this.state = {
      userData: {},
    };
    this.onChange_email = this.onChange_email.bind(this);
    this.onChange_password = this.onChange_password.bind(this);

    // css in js
    //お好みで
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      this.setState({ ...this.state, userData: user });
    });
  }
  render() {
    return (
      <div className={this.logincss}>
        <label>
          <input
            type="text"
            name="email"
            placeholder="test@gmail.com"
            onChange={(e) => this.onChange_email(e)}
          />
          <br />
          <input
            type="password"
            name="pass"
            placeholder="パスワード"
            onChange={(e) => this.onChange_password(e)}
          />
        </label>
        <br />
        <button
          className={this.buttoncss}
          key="login_do"
          onClick={(e) => {
            this.login(e);
          }}
        >
          ログイン
        </button>
      </div>
    );
  }
}

Google 認証

Google の認証ですが下記の設定をする必要があります

const Google = new firebase.auth.GoogleAuthProvider();

firebase の設定ファイルに書いてインポートしてください
※WEB の FireBase で Google 認証を有効にしていてください

Google 認証_Login

react

login.tsx

import firebase,{Google} From './firebaseConfig'

export default class login extends React.Component<any, any> {

// ~省略~

  login() {
    try {
      firebase
        .auth()
        .signInWithPopup(Google)
        .then((result) => {
          this.setState({ ...this.state, userData: result });
        });
    } catch (error) {
      alert(error);
    }
  }

これでリダイレクトで認証可能になるはずです。

##　 Google 認証＿logOut
ログアウト方法です。

logout(){
   firebase.auth().signOut()
}

上記の処理でログアウトできます。

Twitter 認証

Twitter のデベロッパーアカウントの登録が必要です。
他にも Github、Facebook などでもこのようにデベロッパーアカウントの登録情報を求められます。
Twitter の認証ですが下記の設定をする必要があります

const Twitter = new firebase.auth.TwitterAuthProvider();

firebase の設定ファイルに書いてインポートしてください
※WEB の FireBase で Twitter 認証を有効にしていてください

Twitter 認証_Login

react

login.tsx


import firebase,{Twitter} From './firebaseConfig'

export default class login extends React.Component<any, any> {

// ~省略~

  login() {
    try {
      firebase
        .auth()
        .signInWithPopup(Twitter)
        .then((result) => {
          this.setState({ ...this.state, userData: result });
        });
    } catch (error) {
      alert(error);
    }
  }

これでリダイレクトで認証可能になるはずです。

Twitter 認証＿logOut

ログアウト方法です。

logout(){
   firebase.auth().signOut()
}

上記の処理でログアウトできます。

メールアドレスでの認証

メールアドレスでの認証は、上記のより少し手順が増えます

本当にそのメールアドレスが有効なのかどうか？
パスワードは、6 文字以上
他の認証(Google,Twitter)で登録されたメールアドレスは、この方法では、登録できない（2 重登録になってしまうので）

などがあげられます。

メールアドレスでの認証_sign_in

FireBase にメールアドレスとパスワードを登録します
react

// ~省略~

super(props);
    this.state = {
      email: "",
      password: "",
      userData: {},
    };
}

 async sign_in(e: any) {
    e.preventDefault();
    const { email, password } = this.state;
    try {
      await firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then(console.log("signin_ok"));
    } catch (error) {
      alert(error);
    }
  }

  render() {
      // ~省略~
  }

FireBase を確認してみてください。メールアドレスが登録されているはずです。
この状態だとでたらめなメールアドレスでも登録できてしまいます。

メールアドレスでの認証_メールアドレス確認

メールアドレスが有効かどうかを調べるために確認メールを送信します。
確認方法としてデータが json 形式で渡されるので

user.emailVerified // 確認されてないと false の状態

// メール送信してくれる
firebase.auth().currentUser?.sendEmailVerification();


async sign_in(e: any) {
    e.preventDefault();
    const { email, password } = this.state;
    try {
      await firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)

        .then(this.send_mail);

    } catch (error) {
      alert(error);
    }
  }
// ======追記======
 send_mail() {
    firebase.auth().currentUser?.sendEmailVerification();
  }

メールアドレスでの認証_login

ログインのやり方です。

async login(e: any) {
    e.preventDefault();
    const { email, password } = this.state;
    try {
      await firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((data) =>
          data.user?.emailVerified
            ? ""
            : alert("メールアドレスの確認が済んでいません")
        );
    } catch (error) {
      alert(error);
    }
  }

まとめ

認証について自身の知見をまとめました。

参考ページ

https://firebase.google.com/docs/auth/web/manage-users?hl=ja
https://blog.katsubemakito.net/firebase/firebase-authentication-email-web1