Firebase

【Firebase】Authenticationを使って、Reactでユーザー登録機能を実装する

作成日：2022年02月25日

更新日：2022年02月25日

前回は、Firebase Authentication の機能を使って、React でユーザー登録機能を実装します。

まずは、以前ご紹介した内容に沿って、Firebase を設定します。

【Firebase】Firebase Project Configを設定する

ターミナルでnpm install --save firebaseを実行し、firebaseをインストールしておきましょう。

src/firebase/firebaseConfig.ts

ts
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

const firebase = initializeApp(firebaseConfig);
const firestore = getFirestore(firebase);
const fireauth = getAuth(firebase);
const firestorage = getStorage(firebase);

export const firebaseApp = {
  firestore,
  fireauth,
  firestorage,
};

hooks フォルダを作成し、useAuth.ts を作成します。

tsx
import { useState } from "react";
import { firebaseApp } from "../firebase/firebaseConfig";
import { createUserWithEmailAndPassword } from "firebase/auth";

const fireauth = firebaseApp.fireauth;

export const useSignup = () => {
  const [error, setError] = useState(null);

  const signup = (email: string, password: string) => {
    setError(null);
    createUserWithEmailAndPassword(fireauth, email, password)
      .then((res) => {
        console.log(res.user);
      })
      .catch((err) => {
        console.log(err.message);
        setError(err.message);
      });
  };

  return { error, signup };
};

pages フォルダに SIgnup.tsx を作成します。

ログインフォーム画面は、MUI を利用します。

ターミナルでnpm install --save @mui/material @emotion/react @emotion/styledを実行します。

また、アイコンも使用するので、ターミナルでnpm install --save @mui/icons-materialを実行しましょう。

Signup.tsx にログインフォーム画面を作成します。

tsx
import React, { useState } from "react";
import {
  Avatar,
  Alert,
  Button,
  CssBaseline,
  TextField,
  Box,
  Typography,
  Container,
} from "@mui/material";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";

export default function Signup() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <Box
        sx={{
          marginTop: 8,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Avatar sx={{ m: 1, bgcolor: "success.main" }}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          ユーザー登録
        </Typography>
        <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
          <TextField
            margin="normal"
            required
            fullWidth
            id="email"
            label="メールアドレス"
            name="email"
            autoComplete="email"
            autoFocus
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <TextField
            margin="normal"
            required
            fullWidth
            name="password"
            label="パスワード"
            type="password"
            id="password"
            autoComplete="current-password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            sx={{ mt: 3, mb: 2, bgcolor: "success.main" }}
          >
            ユーザー登録
          </Button>
        </Box>
      </Box>
    </Container>
  );
}

App.tsx に MUI の ThemeProvider と Signin.tsx をインポートします。

tsx
import { createTheme, ThemeProvider } from "@mui/material/styles";

import Signup from "./pages/Signup";

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Signup />
    </ThemeProvider>
  );
}

export default App;

ここで、ブラウザを確認すると、

ユーザー登録画面が表示されました。

Signup.tsx へ戻り、Firebase と連携します。

useSignupをインポートし、signup、errorを指定しましょう。

tsx
const { signup, error } = useSignup();

handleSubmit関数内にsignupを設定します。

tsx
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  signup(email, password);
};

MUI の Alert を使い、エラーが発生した場合はエラーメッセージを表示するようにします。

tsx
{
  error && <Alert severity="error">ユーザー登録できませんでした</Alert>;
}

では、ブラウザで確認してみましょう。

パスワードが 6 文字未満の場合、エラーが発生するはずです。

『ユーザー登録』をクリックすると、

エラーメッセージが表示されました。

では、パスワードを 6 文字以上にしてみます。

『ユーザー登録』をクリックすると、

エラーメッセージが消えました。

Firebase Authentication へアクセスしてみましょう。

無事、メールアドレスが追加されていました。

次回は、React でログイン機能を実装します。

【Firebase】Firebase Authentication の機能を使って、Reactでログイン機能を実装する

お知らせ

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

【Firebase】Authenticationを使って、Reactでユーザー登録機能を実装する

お知らせ

カテゴリ

最新順

【React】Zustandで、簡単に状態管理する

【Ruby on Rails】登録フォームを作成し、データベースを保存する

【Ruby on Rails】ルーティングを設定する

【Ruby on Rails】データベースの内容をブラウザに表示する

【Ruby on Rails】rails consoleを使い、データベースを追加する