FireBaseでの認証

# FireBase 認証機能

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

## 構築準備

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

```ts: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 を簡単に書けます。

```ts: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 の認証ですが下記の設定をする必要があります

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

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

## Google 認証\_Login

react

```tsx: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
ログアウト方法です。

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

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

## Twitter 認証

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

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

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

## Twitter 認証\_Login

react

```tsx: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
ログアウト方法です。

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

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

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

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

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

などがあげられます。

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

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

```js
// ~省略~

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 の状態
```

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

```js

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

ログインのやり方です。

```js
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