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

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

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

src/firebase/firebaseConfig.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 を作成します。

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 にログインフォーム画面を作成します。

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 をインポートします。

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

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

image2

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

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

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

const { signup, error } = useSignup()

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

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

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

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

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

image3

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

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

image4

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

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

image5

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

image6

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

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

image7

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

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

ブログ一覧