Firebase Authenticationを使ったログインを実装しました

Chat機能を作ったので公開したい。
でも、だれでも書き込めるまま公開しておくのは不安である。

ということでFirebase Authenticationのログイン認証をつけました。
そういうモチベーションなので、最低限の機能のみの実装です。
具体的には、アカウントを作る機能はなく、すでにアカウントを持っているユーザー（Firebase Authenticationで作成したユーザー）だけがログインできます。

# 機能詳細
## 実装前の状態
実装を始める前は以下の状態でした。
ルートにアクセスすると、チャットが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/6aa01749-b35b-206d-1166-8a9b7caa6a07.png)

以下のコミットの状態です。

https://github.com/okadamari/chat/commit/bda42a9d65010d67f7305f7562f448a5f5b9a178

## 実装後の状態
この記事の実装後の動きは以下のとおりです。

ルートはログインページにして、認証を通ったユーザーは/chatページへ遷移するようにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/cb465c31-dcc2-0f52-b6e3-af0d30ce5c9f.png)
ログインすると↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/f4d374ea-c832-7001-9aca-218c25025629.png)
ログインできないと↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/6d2ceb50-8d64-d0ac-827f-f91f4683f898.png)

実装完了時のコミットは以下です。

https://github.com/okadamari/chat/commit/2120ee840022dd05785284942142a6177c396699

# 参考記事

以下の記事を参考に実装しました。

https://www.isoroot.jp/blog/2451/

# Firebase Authenticationの設定

## Firebaseプロジェクト作成

Authenticationの設定をする前に、Firebaseプロジェクトを作成する必要があります。
作成方法は以下の記事にあるので省略します。
以下の両方を設定する必要があります。

* Firebaseでプロジェクトを作成
* アプリを追加

https://qiita.com/okada3333/items/93a9767427808147e2ac#firebase%E3%81%A7%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90

## Authentication設定

公式サイトはこちらです。

https://firebase.google.com/docs/auth/where-to-start?hl=ja

[Firebaseコンソール](https://console.firebase.google.com/u/0/?hl=ja)を開き、Authenticationを追加したいアプリを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/9ce90f2f-8638-36d3-4790-1b762bf51c43.png)


アプリのホーム画面へ移動するので、サイドメニューのAuthenticationのアイコンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/af5cc7dc-bf18-5315-b819-33caeb151a37.png)

「始める」ボタンを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/8b74aedd-ae41-b64f-1eb7-da70d9567371.png)
①「Sign-in method」タブを開いて、②「メール / パスワード」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/8270ba4e-70f4-19b8-8978-e54641ac9ecc.png)
「有効にする」のトグルをONにして保存します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/9b19111a-0c91-9144-fade-c24dfd321ff7.png)

## ユーザーの追加
①「Users」タブを開き、②「ユーザーを追加」ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/6791a194-022f-a7c1-2410-6dd603255e43.png)
ログインを許可したいユーザーの「メールアドレス」と「パスワード」を入れて「ユーザーを追加」します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11545/e18b7cd4-c1a3-7d99-8cdd-26032bb567bc.png)

以上でFirebase Authenticationの設定は完了です。

# アプリケーションの修正
最初にも記載しましたが、以下のコミットの状態から変更していきます。

https://github.com/okadamari/chat/commit/bda42a9d65010d67f7305f7562f448a5f5b9a178

## Firebaseの初期化処理
私はFirestoreを使っていたためすでに設定済でしたが、そうでない場合はFirebaseの初期化処理を追加する必要があります。

以下の辺りです。

https://github.com/okadamari/chat/blob/main/src/main.js#L6-L16

FirebaseのSDK（Keyなど）がわからなくなってしまった場合は、以下の場所で確認できます。

https://qiita.com/okada3333/items/93a9767427808147e2ac#sdk%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95

## vue-routerを追加

vue-routerを導入してページ遷移できるようにします。
私の環境では、vue-router v3がうまく動かなかったのでv4を入れました。

```
$ npm i vue-router@next
```

vue-router v4の導入は以下のページを参考にしました。

https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/#why-use-vue-router

## routingの設定

vue-routerを使って、
``/`` のときは、``Login.vue``
``/chat`` のときは``Chat.vue`` を読み込むように設定しました。

コードは以下のあたりです。

https://github.com/okadamari/chat/commit/35bbb5aef9a0fe36739406441ed0d4d80b2fd579#diff-d7f41ba1aa74f41ef4b0c2337abe593d08092ffae6528a8aa2db712afeee0b66

## chat機能をChat.vueへ移動

また、``<App>``コンポーネントに書いていたchat機能を``Chat.vue``へ移動しました。

https://github.com/okadamari/chat/commit/35bbb5aef9a0fe36739406441ed0d4d80b2fd579#diff-1541a8d19e6ed885f68c01ea3a2c7c81d3c60d33d7e756b51b48baa3fa76a206

## Login.vueを作成

参考サイトの``Signup.vue``と公式サイトを参考に作りました。

https://firebase.google.com/docs/auth/web/start?hl=ja

``Login.vue``は以下のようになりました。

https://github.com/okadamari/chat/commit/2120ee840022dd05785284942142a6177c396699#diff-471991822290aa9c420f37c5613fd8e320ab487656c1312ea9e16b0193a700ab

実装は以上です。
[実装後の状態](#実装後の状態)のように動いていると思います。

## 注意
私は設定していませんが、通常は[参考サイトにあったリダイレクトの設定](https://www.isoroot.jp/blog/2451/)もする必要があります。

設定しない場合、ログイン後に遷移する画面のURL（私の場合は``/chat``）を直接開かれると見えてしまうと思います。

私の作ったアプリは、[historyモード](https://router.vuejs.org/ja/guide/essentials/history-mode.html)で、かつサーバー側の設定をしていないため``/chat``のようなパスに直接遷移できません。（そのつくりも良くないですが…）なので、今回は対応していません。

# 所感
ログイン認証だけなら、簡単に実装できました。
なお、Chat機能自体を作った時の話は、以下の記事にまとめています。

https://zenn.dev/okada3/articles/3b308612b70c26