firebase auth を利用した権限分離

common/firebase-utils/firestore.ts → common/firebase-utils/firebase.ts

@@ -1,4 +1,5 @@
 import { type FirebaseOptions, initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
 import { getFirestore, initializeFirestore } from "firebase/firestore";
 
 const firebaseConfig: FirebaseOptions = {
@@ -17,3 +18,5 @@ initializeFirestore(app, {
 });
 
 export const prodDB = getFirestore(app);
+
+export const auth = getAuth(app);

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/auth.tsx

@@ -0,0 +1,79 @@
+import { orderConverter } from "common/firebase-utils/converter";
+import { auth } from "common/firebase-utils/firebase";
+import { documentSub } from "common/firebase-utils/subscription";
+import {
+  GoogleAuthProvider,
+  type User,
+  onAuthStateChanged,
+  signInWithPopup,
+  signOut,
+} from "firebase/auth";
+import { useEffect, useState } from "react";
+import useSWRSubscription from "swr/subscription";
+import { Button } from "~/components/ui/button";
+
+const provider = new GoogleAuthProvider();
+
+export default function Auth() {
+  const [user, setUser] = useState<User | null>(null);
+  console.log(user);
+
+  useEffect(() => {
+    onAuthStateChanged(auth, (user) => {
+      if (user?.emailVerified) {
+        setUser(user);
+      } else {
+        setUser(null);
+      }
+    });
+  }, []);
+
+  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);
+      });
+  };
+
+  const logout = async () => {
+    await signOut(auth);
+  };
+
+  const order = useSWRSubscription(
+    ["orders", "nTMWm6GuT6ZuSGxOu2iP"],
+    documentSub({ converter: orderConverter }),
+  );
+
+  return (
+    <div>
+      <div>
+        <Button onClick={login}>ログイン</Button>
+        <Button onClick={logout}>ログアウト</Button>
+      </div>
+      <div>
+        <h3>ログイン情報</h3>
+        <pre>{user?.displayName}</pre>
+        <pre>{user?.email}</pre>
+        <img src={user?.photoURL ?? ""} alt={user?.displayName ?? ""} />
+      </div>
+      <div>{JSON.stringify(order.data?.toOrder(), null, 2)}</div>
+    </div>
+  );
+}