Reactで趣味ツールを配布するためのサイトを作りました（1年前に）

firebase init

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    function isAuthenticated() {
      return request.auth != null;
    }

    // function isUserAuthenticated(userID) {
    //   return request.auth.uid == userID;
    // }

   match /files/{fileID} {
     allow get, list, update;
      allow create, delete: if isAuthenticated()
    }
  }
}

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /files/{fileID} {
      allow get;
      allow create, update, delete: if isAuthenticated()
    }
  }
}

[
  {
    "origin": ["http://origin1.example.com"],
    "responseHeader": ["Content-Type"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

gsutil cors set path-to-cors-json-file gs://<bucket_name>...
gsutil cors get gs://<bucket_name>

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

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_APP_KEY,
  authDomain: ., projectId: ., storageBucket: ., appId: .,
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);
const provider = new GoogleAuthProvider();

const persisit = import.meta.env.VITE_FIREBASE_AUTH_PERSISIT;

if (persisit) {
  // ログインを継続しない
  getAuth().setPersistence(browserSessionPersistence);
}

export { auth, provider, db, storage };

import type { FC } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import { CreateFormSchema } from "@/lib/zod";

const NewFile: FC = () => {
  const methods = useForm<Pick<FormData, "name" | "description" | "file" | "deleted">>({
    resolver: zodResolver(CreateFormSchema),
    defaultValues: {
      name: "",
      file: [],
      description: Description,
      deleted: false,
    },
  });
  
  const onSumit = (async (data) => {
    // ...
  })
  
  return (
    <FormProvider {...methods}>
      <DropzoneInput
        id="file"
        label="file"
        accept={{
          "application/zip": [".zip"],
        }}
      />
      // ...
    </FormProvider>
  )
}

import { useSignInWithEmailAndPassword } from "react-firebase-hooks/auth";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { auth } from "@/lib/firebase";
import { SignInWithEmailAndPasswordSchema } from "@/lib/zod";

const validEmail = import.meta.env.VITE_VALID_EMAIL_ADRESS;

const Login: FC = () => {
  const [signInWithEmailAndPassword, user, loading, error] = useSignInWithEmailAndPassword(auth);
  const methos = useForm<{ email: string; password: string }>({
    resolver: zodResolver(SignInWithEmailAndPasswordSchema),
  });
  const { handleSubmit, setError } = methos;

  const onSubmit = handleSubmit((data) => {
    const { email, password } = data;
    if (email !== validEmail) {
      setError("email", { type: "custom", message: "メールアドレスまたはパスワードが間違っています" });
      setError("password", { type: "custom", message: "メールアドレスまたはパスワードが間違っています" });
    } else {
      signInWithEmailAndPassword(email, password);
    }
  });
  
  return (
    <FormProvider {...methos}>
      <form onSubmit={onSubmit} className="mx-auto max-w-lg rounded-lg border">
        <div className="flex flex-col gap-4 p-4 md:p-8">
          <Input id="email" label="Eメール" placeholder="example@example.com" validation={{ required: "required" }} />
          <PasswordInput id="password" label="パスワード" validation={{ required: "required" }} />
          <Button type="submit">ログイン</Button>
        </div>
      </form>
    </FormProvider>)
}

import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "@/lib/firebase";

const RequiredAuth: FC = () => {
  const [user, loading, error] = useAuthState(auth);
  const location = useLocation();

  if (loading) {
    return <div>loading...</div>
  }

  if (!loading && error) {
    return <div>error...</div>
  }

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return (
    <>
      <Seo noindex />
      <Outlet />
    </>
  );
};

import { BrowserRouter, Routes, Route } from "react-router-dom";
const RequiredAuth = lazy(() => import("./components/RequiedAuth"))
const Admin = lazy(() => import("./pages/admin"));
const NewFile = lazy(() => import("./pages/admin/new"));
const EditFile = lazy(() => import("./pages/admin/editFile"));
const DeleteFile = lazy(() => import("./pages/admin/deleteFile"));

const App: FC = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="files" element={<FileLayout />}>
          <Route index element={<Files />} />
          <Route path=":fileId">
            <Route index element={<FileDetail />} />
            <Route path="download" element={<FileDownload />} />
          </Route>
        </Route>
        <Route path="login" element={<Login />} />
        <Route path="signup" element={<Signup />} />
        <Route path="admin" element={<RequiredAuth />}>
          <Route index element={<Admin />} />
          <Route path="new" element={<NewFile />} />
          <Route path="files/:fileId">
            <Route path="edit" element={<EditFile />} />
            <Route path="delete" element={<DeleteFile />} />
          </Route>
        </Route>
        <Route path="*" element={<PageNotFound />} />
      </Route>
    </Routes>
  </BrowserRouter>
);