FirebaseとReactを使って簡単な認証機能を作っていきたいと思います。
Firebase初心者やReact初心者向きの記事になります。
①〜④のような流れで行っていきたいと思います。
①Firebaseの設定 ← 今ここ
②Reactプロジェクト作成
③認証のためのユーザ登録の実装
④認証(ログイン・ログアウト)&ユーザ削除
それではやっていきましょう!
Firebaseでプロジェクトを作成
Firebaseのサイトにてプロジェクトを作成します。
https://console.firebase.google.com/u/0/
※ログインにはグーグルアカウントが必要です。
プロジェクトを作成をクリックします。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-01-1024x547.png)
プロジェクトに名前をつけます。
今回はReactで認証機能を実装したいと思うので
「login-project」と名前をつけて、続行をクリックします。
※プロジェクトIDは自動でつけられるので任意で変えてもいいです。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-02-1-1024x730.png)
Googleアナリティクスは有効にして続行をクリックします。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-03-1024x698.png)
Default Account for Firebaseを選択して
プロジェクトを作成ボタンを押します。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-04-1024x697.png)
少し待つと準備ができます。続行をクリックしましょう。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-05-1024x621.png)
今回はウェブでのアプリで行うので</>を押してアプリを追加します。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-06-1024x522.png)
アプリ名を「login-app」と名前を入力して、アプリを登録をします。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-07-1024x708.png)
firebaseConfigの中は後で設定に使うのでメモしておいてください。
※後からでも見ることができるので、メモをしてなくても大丈夫でもあります。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-08-1-1024x886.png)
コンソールに進むを押します。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-09-1-1024x374.png)
左側のメニューの人マークのAuthenticationをクリックします。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-09-1024x653.png)
Sign-in methodを押して移動します。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-11-1024x566.png)
今回はログインにメールアドレスを使用します。
ペンマークの編集ボタンをクリックします。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-12-1024x506.png)
上の部分を有効にするにして、保存します。
![](https://kazunaka.com/wp-content/uploads/2020/06/firebase-13-1024x527.png)
これでFirebaseでの設定は終了です。
次はReactを触るための準備をしていきたいと思います。
https://kazunaka.com/firebase-react-loginapp-2
コメント