本格的なWebアプリ＋バックエンドを作る（Google AI Studio＋Firebase）

初期設定

Firebase プロジェクトを作成する ウェブアプリを登録する メール／パスワード認証を有効にする Google ログインを有効にする 認証メールテンプレートの送信者名を更新する Firebase Web SDK の設定をコピーする

Google ログインの前提条件

アプリをデプロイし、公開ドメインを Firebase Authorized Domains に追加するまで、Google ログインは動作しない場合があります。

デプロイガイド

デプロイガイドを見る

https://youtu.be/HGs-4QjyjHQ?si=9fXzfJtkd3UNsqhQ

Firebase Authenticationを連携する

Google AI Studio のプロジェクトを Firebase に接続し、新規登録・ログイン・ログアウトを有効にします。

Firebase Authenticationを連携する

この SDK を使って、既存のウェブアプリを Firebase に接続します...

Connect my existing web app to Firebase using this SDK: {{FIREBASE_CONFIG}} Requirements: - Use Firebase Authentication only - Do NOT use Firestore or Storage yet - Do NOT redesign the UI Authentication behavior: - Users can sign in using email and password - If credentials are incorrect, show: "Email or password is incorrect" - Users can sign up using email and password - If the email already exists, show: "User already exists. Please sign in" For now: - Authenticate users only - Do NOT save user profile data Flow: - On successful sign-in or sign-up, redirect to the dashboard - Add a logout button that signs the user out and returns to the auth screen

Firebaseの設定情報（firebaseConfig）

firebaseConfigオブジェクトをここに貼り付け

メール認証を実装する

確認メールを送信し、自動ログインを防ぎ、メールが認証されるまでアクセスをブロックします。

メール認証を実装する

Firebase Authentication のみを使ってメール認証を実装します...

Implement email verification using Firebase Authentication only. - When a user registers with email/password, do not sign them in automatically. - Send a verification email and show a verification screen with this message: “We have sent you a verification email to [user email]. Please verify it and log in.” - Include a Login button on the verification screen. - If a user logs in and their email is not verified, block access and show the same verification screen. - Do not use Firestore or any database — Firebase Authentication only.

Firestoreの設定

Firestore データベースを作成する Standard エディションを選択する データベースのリージョンを選択する Production モードを選択する Firestore のセキュリティルールを追加して公開する

Firestoreのセキュリティルール（ユーザーごとにデータを分離）

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // Root user document match /users/{userId} { allow read, write: if request.auth != null && request.auth.uid == userId; // Anything nested inside this user: // subcollections, documents, folders, files, unlimited levels match /{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == userId; } } } }

ダッシュボードにFirestoreのセクションを追加する

ファイル・メモ・チームメンバー用のダッシュボードセクションを作成し、Firestore に接続します。

ダッシュボードにFirestoreのセクションを追加する

ユーザーデータを Firestore に保存・読み込みする動的なダッシュボードセクションを追加します。

Enhance the current dashboard by adding 3 fully functional sections: 1) My Files 2) My Notes 3) Team Members IMPORTANT RULES: - Use Firebase Authentication + Firestore only. - Do NOT use browser prompts (window.prompt / alert). - Use clean in-app modals for all actions. - Each user sees ONLY their own data. - Keep the existing VaultFlow UI style (cards, spacing, buttons). ==================== DATA STRUCTURE ==================== Use Firestore under the authenticated user: users/{uid} - displayName - email - plan - createdAt users/{uid}/folders/{folderId} - name - createdAt users/{uid}/files/{fileId} - name - folderId (optional) - size - createdAt (Note: metadata only, no real uploads yet) users/{uid}/notes/{noteId} - title - content (optional) - createdAt users/{uid}/teamMembers/{memberId} - name - role (optional) - createdAt ==================== UI BEHAVIOR ==================== My Files - Buttons: "New Folder" and "Add File" - Show folders and files - Empty state + loading state My Notes - Button: "New Note" - Show notes as cards - Empty state + loading state Team Members - Button: "Add Member" - Show list of members - Empty state + loading state ==================== MODALS (NO BROWSER PROMPTS) ==================== - New Folder: input name → save to Firestore - Add File: name + optional folder + size → save - New Note: title + content → save - Add Member: name + role → save All modals: - Cancel / Create - Validation - Loading state - Update UI instantly after save ==================== SECURITY ==================== Add Firestore rules so: - Only the logged-in user can read/write their own data - request.auth.uid must match {uid} ==================== RESULT ==================== After refresh: - Data persists - Buttons work - Counts update - No browser dialogs - Dashboard feels like a real SaaS app

Storageの設定

Firebase Storage を有効にする 請求先アカウントをリンクして Blaze プランにアップグレードする ストレージのロケーションを選択する Production モードを選択する Firebase Storage のセキュリティルールを追加して公開する

Storage を有効にするには請求先の設定が必要です。料金が発生するのは、無料枠を超えて使用した場合のみです。

Firebase Storageのセキュリティルール（ユーザーごとにファイルを分離）

rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /user_uploads/{uid}/{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == uid; } } }

My FilesをFirebase Storageに連携する

My FilesをFirebase Storageに連携する

アプリのファイルアップロード機能を、ユーザーごとの安全なフォルダーで Firebase Storage に接続します。

Connect the existing “My Files” section to Firebase Storage + Firestore. CONTEXT - Firebase Auth + Firestore already work in this project. - Firebase Storage is enabled. - Storage rules allow only: /user_uploads/{uid}/{allPaths=**} for the logged-in user. GOAL Make these buttons fully functional: 1) Add File (upload) 2) Download 3) Delete And keep the current UI style (table, buttons, spacing). No redesign. IMPORTANT RULES - Use Firebase Authentication + Firestore + Firebase Storage only. - Do NOT use browser prompts (window.prompt/alert). - Use clean in-app modal for “Add File”. - Each user sees ONLY their own files. - Upload path MUST be: user_uploads/{uid}/{fileName} - Save metadata in Firestore under: users/{uid}/files/{fileId} UI BEHAVIOR A) Add File button - Open an in-app modal: “Upload File” - Inside modal: - File picker (click to choose file) using a hidden <input type="file"> - Optional: select folder (if folders exist) - Upload button - Show upload progress (percentage) + loading state - When upload finishes: - Save metadata doc to Firestore: users/{uid}/files/{fileId} with: - name (original file name) - storagePath (e.g. user_uploads/{uid}/{fileId}-{name}) - downloadURL - size - type (mimeType) - folderId (optional) - createdAt (serverTimestamp) - Update the UI immediately (add row in the table) B) Display files - In “My Files” table, show: - name - type - size - actions: Download + Delete - Use the Firestore list under users/{uid}/files ordered by createdAt desc. C) Download button - Use the stored downloadURL from Firestore - Open it safely in a new tab OR trigger download (but no alert). D) Delete button - Delete from Storage using storagePath - Then delete the Firestore document - Update UI instantly EDGE CASES - If user is not logged in, block access. - Handle errors with inline UI message in the modal (no alerts). - Prevent double uploads (disable button during upload). - If upload fails, show error message. DELIVERABLE - Implement the missing handlers, modal, and Storage/Firestore logic. - Keep current design. Do not refactor unrelated code.

動的なユーザーインターフェースを確認する

認証済みのアカウントでログインする インターフェースがログイン中のユーザーを認識していることを確認する ダッシュボードがそのユーザーの Firestore データを読み込むことを確認する アップロードしたファイルが正しく表示されることを確認する

無料プランのファイル上限を追加する

無料プランのファイル数上限を追加する

無料ユーザーがアップロードできるファイル数を制限し、上限に達したらアップグレードのメッセージを表示します。

Add a free-plan limit to this app: • Max files allowed: 5 • Count files under: users/{uid}/files • If file count >= 5: – Disable Add File – Show message: “You’ve reached the free plan limit.” – Add an Upgrade button that opens a simple modal (title: “Upgrade your plan”, text + Close button) No real payments. UI only. Keep current design. Apply logic only to the logged-in user.

無料プランの上限をテストする

無料上限に達するまでファイルをアップロードする それ以上のアップロードがブロックされることを確認する アップグレードのメッセージが正しく表示されることを確認する

動画で使用しているものと同じ Google AI Studio のプロジェクトをコピーして、自分のアカウントに追加します。

VaultFlowプロジェクト

チュートリアルで使用している Google AI Studio のプロジェクト

https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221P-lytf__6kOkQnOcczVdgIbnOWuRwNF0%22%5D,%22action%22:%22open%22,%22userId%22:%22112386544465239683494%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing

使い方

上のプロジェクトリンクを開きます。 必要に応じて Google アカウントにログインします。 Google AI Studio 内の「Copy」をクリックします。 プロジェクトがアカウントに追加され、自由に編集できるようになります。

重要な注意点

プロジェクトをコピーしたら、同梱の Firebase 設定を自分の Firebase Web SDK の設定に置き換えてください。