https://zenn.dev/rinda_1994/articles/482a4c5967c3c3

概要

タイトルのままですが、React(Next.js) × Firebaseの環境で、認証まわりをまるっと開発したので、記事に残します。 アラート等のコンポーネントはMaterial UIを使用しています。

やったこと

以下の4つです。

• ユーザー登録
• ログイン
• ログアウト
• アクセスコントロール
  • 未ログイン時に特定のページに入ろうとしたらアラート & 遷移
  • ログイン時にログインページなどに行ったらアラート & 遷移

前提

• react: 17.0.2
• next: 12.0.9
• typescript: 4.5.5
• firebase: 9.6.5
• emotion: 11.0.0

また、あらかじめfirebase.tsというところで以下の設定をしています。

import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

const firebaseApp = firebase.initializeApp(firebaseConfig)

export const auth = firebase.auth()
export default firebase

ユーザー登録

とりあえずフォームを設けましょう。えい。