Fix fdc web template

dataconnect/README.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-This is a sample app for the preview version of Firebase DataConnect. This service is currently in Private Preview at no cost for a limited time. Sign up for the program at [Firebase Data Connect](https://firebase.google.com/products/data-connect). This quickstart will not work if you don't have access to the preview.
+This is a sample app for the preview version of Firebase DataConnect. This service is currently in Public Preview at no cost for a limited time.
 
 ## Getting Started with Firebase DataConnect
 
@@ -88,9 +88,8 @@ This repository contains the quickstart to help you explore the functionalities
     npm run build
     ```
 
-5. Set up Firebase Authentication with Google Sign-In. Optionally, allow domains for [Firebase Auth](https://firebase.google.com/docs/auth/web/hosting) in your project console (e.g., `http://127.0.0.1`).
-6. Allow domains for Firebase Auth in your [project console](https://console.firebase.google.com/project/_/authentication/settings) (e.g., `http://127.0.0.1`).
-7. In `dataconnect/dataconnect.yaml`, ensure that your `instanceId`, `database`, and `serviceId` match your project configuration:
+5. Allow domains for Firebase Auth in your [project console](https://console.firebase.google.com/project/_/authentication/settings) (e.g., `http://127.0.0.1`).
+6. In `dataconnect/dataconnect.yaml`, ensure that your `instanceId`, `database`, and `serviceId` match your project configuration:
 
     ```yaml
     specVersion: "v1alpha"
@@ -106,7 +105,7 @@ This repository contains the quickstart to help you explore the functionalities
     connectorDirs: ["./movie-connector"]
     ```
 
-8. Deploy your project:
+7. Deploy your project:
 
     ```bash
     npm install -g firebase-tools
@@ -115,13 +114,13 @@ This repository contains the quickstart to help you explore the functionalities
     firebase deploy --only dataconnect,hosting
     ```
 
-9. To compare schema changes, run:
+8. To compare schema changes, run:
 
     ```bash
     firebase dataconnect:sql:diff
     ```
 
-10. If the changes are acceptable, apply them with:
+9. If the changes are acceptable, apply them with:
 
     ```bash
     firebase dataconnect:sql:migrate

dataconnect/app/src/components/navbar.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { signInWithPopup, GoogleAuthProvider, signOut, User } from 'firebase/auth';
+import { signInWithRedirect, GoogleAuthProvider, signOut, User } from 'firebase/auth';
 import { AuthContext } from '@/lib/firebase';
 import { Link } from 'react-router-dom';
 import { handleAuthStateChange } from '@/lib/MovieService';
@@ -18,7 +18,7 @@ export default function Navbar() {
 
   async function handleSignIn() {
     const provider = new GoogleAuthProvider();
-    await signInWithPopup(auth, provider);
+    await signInWithRedirect(auth, provider);
   }
 
   async function handleSignOut() {

dataconnect/app/src/pages/Home.tsx

@@ -7,8 +7,17 @@ const ConditionalRender = ({ condition, preferred, alternate }: { condition: boo
 )
 
 const PlaceholderMessage = () => (
-  <div className="min-h-screen flex items-center justify-center text-center text-4xl text-white">
-    Run the Firebase Data Connect Extension to get started.
+  <div className="min-h-screen flex items-center justify-center text-center text-white">
+    <div className='px-4'>
+      <h1 className='text-4xl'>To get Started with Firebase Data Connect:</h1>
+      <ol className='list-decimal'>
+        <li>Add {window.location.host}<a target="_blank" className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600" href="https://console.firebase.google.com/project/_/authentication/settings"> to your list of domains</a></li>
+        <li>Open app/src/lib/firebase.tsx and replace the firebaseConfig </li>
+        <li>Open the Firebase Data Connect Extension</li>
+        <li>Select your project</li>
+        <li>Click "Start Emulators"</li>
+      </ol>
+    </div>
   </div>
 )
 

dataconnect/app/vite.config.idx.ts

@@ -5,12 +5,17 @@ import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
     },
-  },
+  }, 
   server: {
+     headers: {
+      "Cross-Origin-Embedder-Policy": "unsafe-none",
+      "cross-origin-opener-policy": "same-origin-allow-popups"
+     },
     proxy: {
       '/v1beta/projects': {
         target: 'http://127.0.0.1:9399',