https://firebase.google.com/docs/storage/web/upload-files?hl=ja

コンソール：https://console.firebase.google.com/

テストモードは30日で期限が切れる ⇔ 本番モード

npm i firebase

共通の初期化

firebase.js：

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

db：

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

storage：

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export {storage};

google auth：

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export {auth , provider};

Database

databaseに接続できない場合：ルール設定

firebase databaseでルール設定：readやwriteをtrueに

データ取得 / 表示

"use client";
import React, { useEffect, useState } from "react";
import { addDoc, collection, getDocs, query, where } from "firebase/firestore";
import { auth, db } from "./firebase";

const FirebaseTest = () => {
  const [inputText, setInputText] = useState("");
  const [memos, setMemos] = useState<string[]>([]); 

  const fetchMemos = async () => {
    const user = auth.currentUser;
    if (user) {
      const userId = user.uid;
      try {
        const q = query(collection(db, "memos"), where("userId", "==", userId));
        const querySnapshot = await getDocs(q);
        const memosData = querySnapshot.docs.map((doc) => doc.data().title);
        setMemos(memosData);
      } catch (error) {
        console.error("Error fetching memos: ", error);
      }
    }
  };
  useEffect(() => {
    fetchMemos();
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (inputText.trim() !== "") {
      const user = auth.currentUser;
      if (user) {
        const userId = user.uid;
        const value = {
          title: inputText,
          userId: userId, 
        };
        try {
          await addDoc(collection(db, "memos"), value); 
          setInputText(""); 
          console.log("Document successfully written!");
          fetchMemos(); // メモを再取得
        } catch (error) {
          console.error("Error writing document: ", error);
        }
      }
    }
  };
  return (
    <div className="text-black">
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          onChange={(e) => setInputText(e.target.value)}
          value={inputText}
        />
        <button type="submit">Add</button>
        {inputText}
        <ul>
          {memos.map((memo, index) => (
            <li key={index}>{memo}</li>
          ))}
        </ul>
      </form>
    </div>
  );
};

export default FirebaseTest;

Storage

image Upload

"use client";
import React from "react";
import { ref, uploadBytes } from "firebase/storage";
import { storage } from "./firebase";

const ImageUploader = () => {

  const onFileUploadToFirebase = (e) => {
    const file = e.target.files[0];
    const storageRef = ref(storage, "image/" + file.name);
    uploadBytes(storageRef, file);
  };

  return (
    <div className="outerBox">
      <div className="title">
        <p>jpeg/png</p>
      </div>
      <div className="imageUplodeBox">
        <div className="imageLogoAndText">
          <p>drag</p>
        </div>
        <input
          className="imageUploadInput"
          name="imageURL"
          type="file"
          onChange={onFileUploadToFirebase}
          accept=".png, .jpeg, .jpg"
        />
      </div>
      <p>or</p>
      <button>
        ファイル選択
        <input
          className="imageUploadInput"
          type="file"
          onChange={onFileUploadToFirebase}
          accept=".png ,.jpeg ,.jpg"
        />
      </button>
    </div>
  );
};

export default ImageUploader;

Auth

authでエラーになる場合：ドメイン許可をしていない

https://firebase.google.com/docs/auth/web/start?hl=ja&authuser=0

firebase/Authentication/settings/ドメイン

"use client"
import React, { useState, useEffect } from 'react';
import { signInWithPopup, signOut } from "firebase/auth";
import { auth, provider } from '../../lib/firebase';

const AuthComponent = () => {
  const [user, setUser] = useState(null); 
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        setUser(authUser);
      } else {
        setUser(null);
      }
    });
    return () => {
      unsubscribe();
    };
  }, []);

  const handleSignIn = async () => {
    try {
      const result = await signInWithPopup(auth, provider);
    } catch (error) {
      console.error('ログインエラー', error);
    }
  };

    const handleSignOut = async () => {
    try {
      await signOut(auth);
    } catch (error) {
      console.error('ログアウトエラー:', error);
    }
  };

  return (
    <div>
      {user ? (
        <div>
          <p>ログインユーザー: {user.displayName}</p>
          <button onClick={handleSignOut}>ログアウト</button>
        </div>
      ) : (
        <div>
          <p>ログインしていません</p>
          <button onClick={handleSignIn}>ログイン</button>
        </div>
      )}
    </div>
  );
};

export default AuthComponent;

user情報の取得

onAuthStateChanged()

onAuthStateChanged(auth, (user) => {
    console.log(user, "onAuthStateChanged()");
  });

signInWithPopup()

  const signInWithGoogle = async () => {
    const result = await signInWithPopup(auth, provider);
    console.log(result.user, "signInWithGoogle()");
  };

getAuth()

  const user = getAuth();
  console.log(user?.currentUser);

useAuthState(auth)

import { useAuthState } from "react-firebase-hooks/auth";

const Home = () => {
  const [user] = useAuthState(auth);

分割代入

Firebase : memo

Firebase : memo