diff --git a/dataconnect/.idx/dev.nix b/dataconnect/.idx/dev.nix index ea67bb36c..bb220b24a 100644 --- a/dataconnect/.idx/dev.nix +++ b/dataconnect/.idx/dev.nix @@ -1,45 +1,45 @@ -{ pkgs, ... }: { - channel = "stable-23.11"; - packages = [ - pkgs.nodejs_20 - ]; - - env = { - POSTGRESQL_CONN_STRING = "postgresql://user:mypassword@localhost:5432/dataconnect?sslmode=disable"; - }; +{ pkgs, ... }: + { + channel = "stable-24.05"; + packages = [ + pkgs.nodejs_20 + ]; + + env = { + FIREBASE_DATACONNECT_POSTGRESQL_STRING = "postgresql://user:mypassword@localhost:5432/dataconnect?sslmode=disable"; + }; - idx.extensions = [ - "mtxr.sqltools" - "mtxr.sqltools-driver-pg" - "GraphQL.vscode-graphql-syntax" - "GoogleCloudTools.firebase-dataconnect-vscode" - ]; + services.postgres = { + extensions = ["pgvector"]; + enable = true; + }; - services.postgres = { - extensions = ["pgvector"]; - enable = true; - }; - - idx = { - workspace = { - onCreate = { - update-firebase = "npm install -D firebase-tools"; - postgres = '' - psql --dbname=postgres -c "ALTER USER \"user\" PASSWORD 'mypassword';" - psql --dbname=postgres -c "CREATE DATABASE dataconnect;" - psql --dbname=dataconnect -c "CREATE EXTENSION vector;" - ''; - npm-install = "cd app && npm i && npm i firebase@latest"; + idx = { + extensions = [ + "mtxr.sqltools" + "mtxr.sqltools-driver-pg" + "GraphQL.vscode-graphql-syntax" + "GoogleCloudTools.firebase-dataconnect-vscode" + ]; + workspace = { + onCreate = { + update-firebase = "npm install -g firebase-tools"; + postgres = '' + psql --dbname=postgres -c "ALTER USER \"user\" PASSWORD 'mypassword';" + psql --dbname=postgres -c "CREATE DATABASE dataconnect;" + psql --dbname=dataconnect -c "CREATE EXTENSION vector;" + ''; + npm-install = "cd app && npm i"; + }; }; - }; - previews = { - enable = true; previews = { - web = { - command = ["npm" "run" "dev" "--prefix" "./app" "--" "--port" "$PORT" "--host" "0.0.0.0"]; - manager = "web"; + enable = true; + previews = { + web = { + command = ["npm" "run" "dev" "--prefix" "./app" "--" "--port" "$PORT" "--host" "0.0.0.0"]; + manager = "web"; + }; }; }; }; - }; -} \ No newline at end of file +} diff --git a/dataconnect/README.md b/dataconnect/README.md index 2fea10be7..06120471a 100644 --- a/dataconnect/README.md +++ b/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 diff --git a/dataconnect/app/src/components/navbar.tsx b/dataconnect/app/src/components/navbar.tsx index bf73ad6f4..775c2aff7 100644 --- a/dataconnect/app/src/components/navbar.tsx +++ b/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() { diff --git a/dataconnect/app/src/pages/Home.tsx b/dataconnect/app/src/pages/Home.tsx index 7e4b19635..798b656c4 100644 --- a/dataconnect/app/src/pages/Home.tsx +++ b/dataconnect/app/src/pages/Home.tsx @@ -7,8 +7,17 @@ const ConditionalRender = ({ condition, preferred, alternate }: { condition: boo ) const PlaceholderMessage = () => ( -
- Run the Firebase Data Connect Extension to get started. +
+
+

To get Started with Firebase Data Connect:

+
    +
  1. Add {window.location.host} to your list of domains
    2. +
  2. Open app/src/lib/firebase.tsx and replace the firebaseConfig
    3. +
  3. Open the Firebase Data Connect Extension
    4. +
  4. Select your project
    5. +
  5. Click "Start Emulators"
    6. +
+
) diff --git a/dataconnect/app/vite.config.idx.ts b/dataconnect/app/vite.config.idx.ts index c2417fbfc..6533f7f6f 100644 --- a/dataconnect/app/vite.config.idx.ts +++ b/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', diff --git a/dataconnect/dataconnect/moviedata_insert.gql b/dataconnect/dataconnect/moviedata_insert.gql index 2f205012b..44cdfe000 100644 --- a/dataconnect/dataconnect/moviedata_insert.gql +++ b/dataconnect/dataconnect/moviedata_insert.gql @@ -1,3 +1,17 @@ + # Copyright 2024 Google LLC + # + # Licensed under the Apache License, Version 2.0 (the "License"); + # you may not use this file except in compliance with the License. + # You may obtain a copy of the License at + # + # http://www.apache.org/licenses/LICENSE-2.0 + # + # Unless required by applicable law or agreed to in writing, software + # distributed under the License is distributed on an "AS IS" BASIS, + # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + # See the License for the specific language governing permissions and + # limitations under the License. + mutation { movie_insertMany( data: [ @@ -24,7 +38,7 @@ mutation { { id: "550e8400-e29b-41d4-a716-446655440002" title: "Celestial Harmony" - imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fcelestial_harmony.jpeg?alt=media&token=3edf1cf9-c2f5-4c75-9819-36ff6a734c9a" + imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fcelestial_harmony.jpeg?alt=media&token=f5fe1845-3fac-4f46-8511-f35f928b6d1d" releaseYear: 2024 genre: "romance" rating: 7.5 @@ -44,7 +58,7 @@ mutation { { id: "550e8400-e29b-41d4-a716-446655440004" title: "The Forgotten Island" - imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fforgotten_island.jpeg?alt=media&token=bc2b16e1-caed-4649-952c-73b6113f205c" + imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fforgotten_island.jpeg?alt=media&token=a6b2d761-2018-48c3-91a1-632d199440d4" releaseYear: 2025 genre: "adventure" rating: 7.6 @@ -114,7 +128,7 @@ mutation { { id: "550e8400-e29b-41d4-a716-446655440011" title: "Beyond the Horizon" - imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fbeyond_horizon.jpeg?alt=media&token=31493973-0692-4e6e-8b88-afb1aaea17ee" + imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fbeyond_horizon.jpeg?alt=media&token=9c054b8d-1a63-48f6-b161-fb28e3d15e55" releaseYear: 2026 genre: "sci-fi" rating: 8.5 @@ -144,7 +158,7 @@ mutation { { id: "550e8400-e29b-41d4-a716-446655440014" title: "Moonlit Crusade" - imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fmoonlit_crusade.jpeg?alt=media&token=b13241f5-d7d0-4370-b651-07847ad99dc2" + imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fmoonlit_crusade.jpeg?alt=media&token=1e2d46e2-6b76-4e20-b656-4b005b37d14b" releaseYear: 2025 genre: "fantasy" rating: 8.3 @@ -184,7 +198,7 @@ mutation { { id: "550e8400-e29b-41d4-a716-446655440018" title: "Parallel Justice" - imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fparalel_justice.jpeg?alt=media&token=4544b5e2-7a1d-46ca-a97f-eb6a490d4288" + imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fparallel_justice.jpeg?alt=media&token=f975524a-6edf-4d3b-99e1-c99e62a50518" releaseYear: 2024 genre: "crime" rating: 8.1 @@ -194,7 +208,7 @@ mutation { { id: "550e8400-e29b-41d4-a716-446655440019" title: "Veil of Illusion" - imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fveil_illusion.jpeg?alt=media&token=7bf09a3c-c531-478a-9d02-5d99fca9393b" + imageUrl: "https://firebasestorage.googleapis.com/v0/b/fdc-web-quickstart.appspot.com/o/movie%2Fveil_illusion.jpeg?alt=media&token=baa02cce-efe8-4c9f-bd9f-65233c6e1ca8" releaseYear: 2022 genre: "mystery" rating: 7.8