feat: add firebase app check

Author: siriwatknp

.env.example

@@ -5,6 +5,7 @@ NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-firebase-project-id
 NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-firebase-storage-bucket
 NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-firebase-messaging-sender-id
 NEXT_PUBLIC_FIREBASE_APP_ID=your-firebase-app-id
+NEXT_PUBLIC_FIREBASE_APP_CHECK_KEY=your-firebase-app-check-site-key
 
 # LINE LIFF Config
 NEXT_PUBLIC_LINE_LIFF_ID=your-line-liff-id

.github/workflows/web-release.yml

@@ -41,6 +41,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
           NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+          NEXT_PUBLIC_FIREBASE_APP_CHECK_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_CHECK_KEY }}
           NEXT_PUBLIC_LINE_LIFF_ID: ${{ secrets.NEXT_PUBLIC_LINE_LIFF_ID }}
 
       - uses: FirebaseExtended/action-hosting-deploy@v0.9.0

src/app/not-found.tsx

@@ -0,0 +1,12 @@
+"use client";
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  );
+}

src/lib/firebase.ts

@@ -14,6 +14,7 @@ import {
   DocumentData,
 } from "firebase/firestore";
 import { getFunctions, httpsCallable } from "firebase/functions";
+import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
 import type {
   AuthenticateLineUserParams,
   AuthenticateLineUserResult,
@@ -32,6 +33,19 @@ const firebaseConfig = {
 // Initialize Firebase
 const app =
   getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
+
+if (process.env.NEXT_PUBLIC_FIREBASE_APP_CHECK_KEY) {
+  initializeAppCheck(app, {
+    provider: new ReCaptchaV3Provider(
+      process.env.NEXT_PUBLIC_FIREBASE_APP_CHECK_KEY
+    ),
+
+    // Optional argument. If true, the SDK automatically refreshes App Check
+    // tokens as needed.
+    isTokenAutoRefreshEnabled: true,
+  });
+}
+
 const auth = getAuth(app);
 const db = getFirestore(app);
 const functions = getFunctions(app, "asia-southeast1");