Firebase + Reactでログイン①Firebaseの設定

FirebaseとReactを使って簡単な認証機能を作っていきたいと思います。

Firebase初心者やReact初心者向きの記事になります。
①〜④のような流れで行っていきたいと思います。

①Firebaseの設定 ← 今ここ
②Reactプロジェクト作成
③認証のためのユーザ登録の実装
④認証(ログイン・ログアウト)＆ユーザ削除

それではやっていきましょう！

Firebaseでプロジェクトを作成

Firebaseのサイトにてプロジェクトを作成します。
https://console.firebase.google.com/u/0/

※ログインにはグーグルアカウントが必要です。

プロジェクトを作成をクリックします。

プロジェクトに名前をつけます。
今回はReactで認証機能を実装したいと思うので
「login-project」と名前をつけて、続行をクリックします。
※プロジェクトIDは自動でつけられるので任意で変えてもいいです。

Googleアナリティクスは有効にして続行をクリックします。

Default Account for Firebaseを選択して
プロジェクトを作成ボタンを押します。

少し待つと準備ができます。続行をクリックしましょう。

今回はウェブでのアプリで行うので</>を押してアプリを追加します。

アプリ名を「login-app」と名前を入力して、アプリを登録をします。

firebaseConfigの中は後で設定に使うのでメモしておいてください。
※後からでも見ることができるので、メモをしてなくても大丈夫でもあります。

コンソールに進むを押します。

左側のメニューの人マークのAuthenticationをクリックします。

Sign-in methodを押して移動します。

今回はログインにメールアドレスを使用します。
ペンマークの編集ボタンをクリックします。

上の部分を有効にするにして、保存します。

これでFirebaseでの設定は終了です。

次はReactを触るための準備をしていきたいと思います。
https://kazunaka.com/firebase-react-loginapp-2