Various fixes

Author: maneesht

dataconnect/README.md

@@ -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

@@ -8,7 +8,13 @@ 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.
+    <h1>To get Started with Firebase Data Connect:</h1>
+    <ol>
+      <li><a href="https://console.firebase.google.com/project/_/authentication/settings">Add {window.location.host} to your list of domains</a></li>
+      <li>Open the Firebase Data Connect Extension</li>
+      <li>Select your project</li>
+      <li>Click "Start Emulators"</li>
+    </ol>
   </div>
 )