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

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

0.Node.jsインストール

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

node -v

1.MaterialUI(MUI)からテンプレート選び

MUIには有料だけでなく、無料で使用できるテンプレートがいくつか存在します。
こちらから閲覧が可能です👀

ダウンロードが終わったら、terminalやgit bash等で操作をしていきます。
package.json等も含まれているので、npm startですぐに動いてくれます。

cd ../../material-kit-react   //ダウンロードしたフォルダに移動すればOKです！
npm start

2.Firebaseのインストール・その他ファイルの作成

Firebaseの初期設定に関しては、様々な記事が出ていますので、割愛させていただきます。(怠惰)

//インストール
npm install firebase

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

//firebase.jsの作成
cd /src
touch firebase.js

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

3.envファイルとfirebase.jsファイルの設定

(細々した面倒くさい作業ですが、ここを見するとfirebaseへ接続できなかったりするので、慎重に行いましょう😇)

// .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=""

// 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へ登録できるようにしてみましょう！

// 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に登録した情報へ変換してみましょう。

// 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です

// 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 });
    }