firebase auth を利用した権限分離 (#362)

closes #214

common/firebase-utils/firebase.ts

@@ -0,0 +1,58 @@
+import { type FirebaseOptions, initializeApp } from "firebase/app";
+import {
+  GoogleAuthProvider,
+  getAuth,
+  signInWithPopup,
+  signOut,
+} from "firebase/auth";
+import { getFirestore, initializeFirestore } from "firebase/firestore";
+
+const firebaseConfig: FirebaseOptions = {
+  apiKey: "AIzaSyC3llKAZQOVQEFV0-0xHiseDB55YXJilHM",
+  authDomain: "cafeore-2024.firebaseapp.com",
+  projectId: "cafeore-2024",
+  storageBucket: "cafeore-2024.appspot.com",
+  messagingSenderId: "715397785293",
+  appId: "1:715397785293:web:b84ff1ca0163a1f8b46b84",
+};
+
+const app = initializeApp(firebaseConfig);
+
+initializeFirestore(app, {
+  ignoreUndefinedProperties: true,
+});
+
+export const prodDB = getFirestore(app);
+
+export const auth = getAuth(app);
+
+const provider = new GoogleAuthProvider();
+provider.setCustomParameters({ prompt: "select_account" });
+
+export const login = () => {
+  signInWithPopup(auth, provider)
+    .then((result) => {
+      const credential = GoogleAuthProvider.credentialFromResult(result);
+      if (credential == null) {
+        console.log("credential is null");
+        return;
+      }
+      const token = credential.accessToken;
+      const user = result.user;
+      console.log("user", user);
+    })
+    .catch((err) => {
+      const errorCode = err.code;
+      const errorMessage = err.message;
+      const email = err.customData.email;
+      const credential = GoogleAuthProvider.credentialFromError(err);
+      console.log("errorCode", errorCode);
+      console.log("errorMessage", errorMessage);
+      console.log("email", email);
+      console.log("credential", credential);
+    });
+};
+
+export const logout = async () => {
+  await signOut(auth);
+};

common/firebase-utils/subscription.ts

@@ -7,7 +7,7 @@ import {
   query,
 } from "firebase/firestore";
 import type { SWRSubscription } from "swr/subscription";
-import { prodDB } from "./firestore";
+import { prodDB } from "./firebase";
 
 /**
  * Firestore のコレクションを監視する SWRSubscription を生成する

common/repositories/global.ts

@@ -3,7 +3,7 @@ import {
   cashierStateConverter,
   masterStateConverter,
 } from "../firebase-utils/converter";
-import { prodDB } from "../firebase-utils/firestore";
+import { prodDB } from "../firebase-utils/firebase";
 import type { GlobalCashierState, MasterStateEntity } from "../models/global";
 
 export type CashierStateRepo = {

common/repositories/item.ts

@@ -9,7 +9,7 @@ import {
   setDoc,
 } from "firebase/firestore";
 import { itemConverter } from "../firebase-utils/converter";
-import { prodDB } from "../firebase-utils/firestore";
+import { prodDB } from "../firebase-utils/firebase";
 import { type WithId, hasId } from "../lib/typeguard";
 import type { ItemEntity } from "../models/item";
 import type { ItemRepository } from "./type";

common/repositories/order.ts

@@ -9,7 +9,7 @@ import {
   setDoc,
 } from "firebase/firestore";
 import { orderConverter } from "../firebase-utils/converter";
-import { prodDB } from "../firebase-utils/firestore";
+import { prodDB } from "../firebase-utils/firebase";
 import { type WithId, hasId } from "../lib/typeguard";
 import type { OrderEntity } from "../models/order";
 import type { OrderRepository } from "./type";

firestore.rules

@@ -2,14 +2,12 @@ rules_version = '2';
 
 service cloud.firestore {
   match /databases/{database}/documents {
-    match /items/{itemId} {
-      allow read, write: if true;
-    }
     match /orders/{orderId} {
-      allow read, write: if true;
+      allow read: if resource.data.servedAt == null;
+      allow read, write: if request.auth.uid == "foobar";
     }
     match /global/{docId} {
-      allow read, write: if true;
+      allow read, write: if request.auth.uid == "foobar";
     }
   }
 }

pos/app/routes/_header._index.tsx

@@ -1,6 +1,6 @@
 import { type MetaFunction, useLoaderData } from "@remix-run/react";
 import { converter } from "common/firebase-utils/converter";
-import { prodDB } from "common/firebase-utils/firestore";
+import { prodDB } from "common/firebase-utils/firebase";
 import { itemSchema } from "common/models/item";
 import { collection, getDocs } from "firebase/firestore";
 import { Button } from "~/components/ui/button";

pos/app/routes/_header.tsx

@@ -1,28 +1,66 @@
 import { Outlet } from "@remix-run/react";
+import { auth, login, logout } from "common/firebase-utils/firebase";
+import { type User, onAuthStateChanged } from "firebase/auth";
+import { useEffect, useState } from "react";
 import { useOnlineStatus } from "~/components/functional/useOnlineStatus";
 import { useOrderStat } from "~/components/functional/useOrderStat";
+import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
 
 export default function BaseHeader() {
+  const [user, setUser] = useState<User | null>(null);
   const isOnline = useOnlineStatus();
   const isOperational = useOrderStat();
 
+  useEffect(() => {
+    onAuthStateChanged(auth, (user) => {
+      if (user?.emailVerified) {
+        setUser(user);
+      } else {
+        setUser(null);
+      }
+    });
+  }, []);
+
   return (
     <div>
       <header
         className={cn(
           "sticky top-0 z-10 h-2",
+          "flex items-center justify-center",
+          "group overflow-hidden hover:h-14",
           isOnline && "bg-green-600",
           !isOnline && "h-min bg-red-700",
           !isOperational && "h-min bg-violet-600",
+          !user && "h-min bg-yellow-600",
         )}
       >
         {!isOnline && (
-          <div className="p-2 text-center text-white">オフライン</div>
+          <div className="p-2 text-center text-white">
+            オフラインです。操作は反映されません
+          </div>
         )}
         {!isOperational && (
           <div className="p-2 text-center text-white">オーダーストップ中</div>
         )}
+        {!user && (
+          <div className="flex items-center justify-center">
+            <div className="m-2 text-center text-white">
+              未ログイン状態です。書き込みができません
+            </div>
+            <Button className="m-2 bg-green-700" onClick={login}>
+              ログイン
+            </Button>
+          </div>
+        )}
+        {user && (
+          <Button
+            className="invisible bg-red-600 group-hover:visible"
+            onClick={logout}
+          >
+            ログアウト
+          </Button>
+        )}
       </header>
       <Outlet />
     </div>