React × Firebase × MaterialUI で作る登録フォーム

今回は[MaterialUI](https://mui.com/)のテンプレートを用いて、サクッとWEBページを作ってみたいと思います!!
正しくjsxやstateなどなどを理解することも大切ですが、実際に動くものを作って見ましょう

## 0.Node.jsインストール
まずはNode.jsのインストールから始めていきましょう！
インストール後は、下のコマンドをうって、バージョンが表示されればOKです。
https://nodejs.org/ja/download/

```
node -v
```

## 1.MaterialUI(MUI)からテンプレート選び
MUIには有料だけでなく、無料で使用できるテンプレートがいくつか存在します。
[こちらから閲覧が可能です👀](https://mui.com/store/#populars)

ダウンロードが終わったら、terminalやgit bash等で操作をしていきます。
package.json等も含まれているので、npm startですぐに動いてくれます。
```terminal
cd ../../material-kit-react   //ダウンロードしたフォルダに移動すればOKです！
npm start
```

## 2.Firebaseのインストール・その他ファイルの作成
[Firebase](https://firebase.google.com/?hl=ja)の初期設定に関しては、様々な記事が出ていますので、割愛させていただきます。(怠惰)
```terminal
//インストール
npm install firebase

//.envファイルの作成(firebaseの設定をここに記載します)
touch .env

//firebase.jsの作成
cd /src
touch firebase.js
```
※srcフォルダと同じ階層にenvファイルが作成されているか確認しておきましょう！


### 3.envファイルとfirebase.jsファイルの設定
(細々した面倒くさい作業ですが、ここを見するとfirebaseへ接続できなかったりするので、慎重に行いましょう😇)
```javascript
// .env
// 自分のfirebaseのkeyをそのままガツンと入れてください

REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGE_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""
REACT_APP_FIREBASE_MEASUREMENT_ID=""
```

```javascript
// firebase.js
// こちらはコピーしてそのままガツンと貼り付けてください

import { initializeApp } from 'firebase/app';
import 'firebase/auth';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};
initializeApp(firebaseConfig);

export const auth = getAuth();
```

### 4.ユーザー作成フォームとFirebaseを連携してみましょう
MUIにはログインフォームと、作成フォームがデフォルトで用意されています。
まずは作成フォームからFirebaseへ登録できるようにしてみましょう！

```javascript
// RegisterForm.js
// (src/sections/authentication/register/RegisterForm.js)

//　一部抜粋

import { auth } from '../../../firebase';
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';

  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
      password: ''
    },
    validationSchema: RegisterSchema,

    // この部分を追加すればOKです!
    onSubmit: (values) => {
      //ユーザー登録
      createUserWithEmailAndPassword(auth, values.email, values.password)
        .then((UserCredential) => {
          //その他情報の登録
          updateProfile(UserCredential.user, {
            displayName: values.firstName + ' ' + values.lastName
          });
        })
        .catch((error) => {
          console.log(error);
        });
      navigate('/dashboard', { replace: true });
    }
  });
```
valuesからフォームの情報が取得できるので、`createUserWithEmailAndPassword`でFirebaseへ登録を行い、`updateProfile `でお名前を登録します。
FirebaseのAuthenticationにデータが入っていればOKです！

### 5.登録情報の表示
既存のデータをFirebaseに登録した情報へ変換してみましょう。
```javascript
// account.js
// /src/_mocks_/account.js

import { auth } from '../firebase';

const user = auth.currentUser;

const account = {
  displayName: user.displayName,
  email: user.email,
  photoURL: '/static/mock-images/avatars/avatar_default.jpg' //お写真はそのまま使用させていただきます...!!
};

export default account;
```

正しく取得できれば、Firebaseに登録した情報がテンプレートの代わりに表示されているはずです！お疲れさまでした！

### おまけ.ログイン機能の実装
ログイン機能も実装したい場合は、下のjsを挿入すればOKです
```javascript
// LoginForm.js

import { auth } from '../../../firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

    onSubmit: (values) => {

      //ここらへんからです
      signInWithEmailAndPassword(auth, values.email, values.password)
        .then((data) => {
          console.log('Login Success!!');
          console.log(data.user);
        })
        .catch((errors) => {
          console.error(errors);
        });
      navigate('/dashboard', { replace: true });
    }
```