LoginSignup
6

More than 1 year has passed since last update.

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

Posted at

今回は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 });
    }

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6