Update env

.github/workflows/betasite.yml

@@ -7,6 +7,11 @@ on:
 env:
   AWS_DEFAULT_REGION: us-east-2
   VITE_DB_URL: https://wantycfbnzzocsbthqzs.supabase.co
+  VITE_DB_API_KEY: ${{ secrets.SUPABASE_API_KEY }}
+  VITE_REACT_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_GOOGLE_MAPS_APIKEY }}
+  VITE_OPEN_ROUTE_SERVICE_API_KEY: ${{ secrets.OPEN_ROUTE_SERVICE_API_KEY }}
+  VITE_PUBLIC_POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+  VITE_VERIFICATION_PASSWORD: ${{ secrets.VERIFICATION_PASSWORD }}
 permissions:
   id-token: write # This is required for requesting the JWT
   contents: read # This is required for actions/checkout

.github/workflows/build_testsite.yml

@@ -1,12 +1,18 @@
 name: Deploy Test Site on S3
 
 on: [workflow_call]
-env:
-  AWS_DEFAULT_REGION: us-east-2
 
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      AWS_DEFAULT_REGION: us-east-2
+      VITE_DB_URL: https://wantycfbnzzocsbthqzs.supabase.co
+      VITE_DB_API_KEY: ${{ secrets.SUPABASE_API_KEY }}
+      VITE_REACT_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_GOOGLE_MAPS_APIKEY }}
+      VITE_OPEN_ROUTE_SERVICE_API_KEY: ${{ secrets.OPEN_ROUTE_SERVICE_API_KEY }}
+      VITE_PUBLIC_POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+      VITE_VERIFICATION_PASSWORD: ${{ secrets.VERIFICATION_PASSWORD }}
     steps:
       - uses: actions/checkout@v1
       - name: Configure AWS Credentials

.github/workflows/cypress_testing.yml

@@ -4,6 +4,14 @@ on: [workflow_call]
 
 jobs:
   cypress_tests:
+    runs-on: ubuntu-latest
+    env:
+      VITE_DB_URL: https://wantycfbnzzocsbthqzs.supabase.co
+      VITE_DB_API_KEY: ${{ secrets.SUPABASE_API_KEY }}
+      VITE_REACT_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_GOOGLE_MAPS_APIKEY }}
+      VITE_OPEN_ROUTE_SERVICE_API_KEY: ${{ secrets.OPEN_ROUTE_SERVICE_API_KEY }}
+      VITE_PUBLIC_POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+      VITE_VERIFICATION_PASSWORD: ${{ secrets.VERIFICATION_PASSWORD }}
     strategy:
       matrix:
         include:
@@ -13,7 +21,6 @@ jobs:
           - spec: 'cypress/e2e/mobile/*.cy.ts'
             config_file: 'cypress.mobile.config.ts'
             video_path: 'cypress/videos/mobile'
-    runs-on: ubuntu-latest
     steps:
       - uses: actions/setup-node@v6
         with:

.github/workflows/lighthouse_testing.yml

@@ -4,8 +4,8 @@ on: [workflow_call]
 env:
   AWS_DEFAULT_REGION: us-east-2
 permissions:
-  id-token: write   # This is required for requesting the JWT
-  contents: read    # This is required for actions/checkout
+  id-token: write # This is required for requesting the JWT
+  contents: read # This is required for actions/checkout
 
 jobs:
   lighthouse-check:

.github/workflows/prodsite.yml

@@ -7,6 +7,11 @@ on:
 env:
   AWS_DEFAULT_REGION: us-east-2
   VITE_DB_URL: https://wantycfbnzzocsbthqzs.supabase.co
+  VITE_DB_API_KEY: ${{ secrets.SUPABASE_API_KEY }}
+  VITE_REACT_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_GOOGLE_MAPS_APIKEY }}
+  VITE_OPEN_ROUTE_SERVICE_API_KEY: ${{ secrets.OPEN_ROUTE_SERVICE_API_KEY }}
+  VITE_PUBLIC_POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+  VITE_VERIFICATION_PASSWORD: ${{ secrets.VERIFICATION_PASSWORD }}
 permissions:
   id-token: write # This is required for requesting the JWT
   contents: read # This is required for actions/checkout

.github/workflows/testsite.yml

@@ -15,3 +15,4 @@ jobs:
     secrets: inherit
   cypress-testing:
     uses: ./.github/workflows/cypress_testing.yml
+    secrets: inherit

docker-compose.yml

@@ -21,6 +21,11 @@ services:
     environment:
       CI: 'false'
       VITE_DB_URL:
+      VITE_DB_API_KEY:
+      VITE_REACT_GOOGLE_MAPS_API_KEY:
+      VITE_OPEN_ROUTE_SERVICE_API_KEY:
+      VITE_PUBLIC_POSTHOG_KEY:
+      VITE_VERIFICATION_PASSWORD:
     volumes:
       - './docker/build:/usr/src/app/build'
       - './docker/testResults:/usr/src/app/testResults'

src/.example.env

@@ -0,0 +1,8 @@
+# Below is how your .env file should look. Make sure to replace the placeholder values with your actual API keys.
+# To get these details please message us in the #phlask-data channel on Slack
+
+VITE_DB_API_KEY=db_api_key_here
+VITE_REACT_GOOGLE_MAPS_API_KEY=google_maps_api_key_here
+VITE_OPEN_ROUTE_SERVICE_API_KEY=open_route_service_api_key_here
+VITE_PUBLIC_POSTHOG_KEY=posthog_api_key_here
+VITE_VERIFICATION_PASSWORD=verification_password_here

src/components/Providers/AnalyticsProvider.tsx

@@ -1,9 +1,11 @@
 import { PostHogProvider } from 'posthog-js/react';
 import type { PropsWithChildren } from 'react';
 
+const APIHOST = 'https://us.i.posthog.com';
+const APIKEY = import.meta.env.VITE_PUBLIC_POSTHOG_KEY;
+
 const postHogOptions = {
-  api_host:
-    import.meta.env.VITE_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
+  api_host: APIHOST,
   mask_all_text: true
 };
 
@@ -16,14 +18,15 @@ const AnalyticsProvider = ({ children }: PropsWithChildren) => {
   )
     return children;
 
+  if (!APIKEY) {
+    const message = import.meta.env.DEV
+      ? 'PostHog credentials are missing! Make sure that `VITE_PUBLIC_POSTHOG_KEY` is defined in your `.env` file. Refer to `.example.env`.'
+      : 'An unexpected error happened with analytics. Please try again later.';
+    throw new Error(message);
+  }
+
   return (
-    <PostHogProvider
-      apiKey={
-        import.meta.env.VITE_PUBLIC_POSTHOG_KEY ||
-        'phc_I0pbyDLZ2ifEgaQaum7vDVkqmwSrLle3SHbNi8tgwpY'
-      }
-      options={postHogOptions}
-    >
+    <PostHogProvider apiKey={APIKEY} options={postHogOptions}>
       {children}
     </PostHogProvider>
   );

src/components/Providers/Providers.tsx

@@ -6,20 +6,27 @@ import ToolbarContextProvider from './ToolbarContextProvider';
 import queryClient from 'services/queryClient';
 import ThemeProvider from './ThemeProvider';
 
-const Providers = ({ children }: PropsWithChildren) => (
-  <QueryClientProvider client={queryClient}>
-    <APIProvider
-      apiKey="AIzaSyABw5Fg78SgvedyHr8tl-tPjcn5iFotB6I"
-      libraries={['places']}
-    >
-      <ToolbarContextProvider>
-        <ThemeProvider>
-          <CssBaseline />
-          {children}
-        </ThemeProvider>
-      </ToolbarContextProvider>
-    </APIProvider>
-  </QueryClientProvider>
-);
+const REACT_GOOGLE_MAPS_API_KEY = import.meta.env
+  .VITE_REACT_GOOGLE_MAPS_API_KEY;
+const Providers = ({ children }: PropsWithChildren) => {
+  if (!REACT_GOOGLE_MAPS_API_KEY) {
+    const message = import.meta.env.DEV
+      ? 'Google Maps API key is missing! Make sure that `VITE_REACT_GOOGLE_MAPS_API_KEY` is defined in a `.env` file. Refer to `.example.env`.'
+      : 'An unexpected error happened with maps. Please try again later.';
+    throw new Error(message);
+  }
+  return (
+    <QueryClientProvider client={queryClient}>
+      <APIProvider apiKey={REACT_GOOGLE_MAPS_API_KEY} libraries={['places']}>
+        <ToolbarContextProvider>
+          <ThemeProvider>
+            <CssBaseline />
+            {children}
+          </ThemeProvider>
+        </ToolbarContextProvider>
+      </APIProvider>
+    </QueryClientProvider>
+  );
+};
 
 export default Providers;

src/components/Verification/VerificationButton.tsx

@@ -6,13 +6,20 @@ import { updateResource } from 'services/db';
 import type { ResourceEntry, Verification } from 'types/ResourceEntry';
 import useSelectedResource from 'hooks/useSelectedResource';
 
-const PASSWORD = 'ZnJlZXdhdGVy'; // Ask in Slack if you want the real password
+const PASSWORD = import.meta.env.VITE_VERIFICATION_PASSWORD;
 
 type VerificationButtonProps = {
   resource: ResourceEntry;
 };
 
 const VerificationButton = ({ resource }: VerificationButtonProps) => {
+  if (!PASSWORD) {
+    const message = import.meta.env.DEV
+      ? 'Verification password is missing! Make sure that `VITE_VERIFICATION_PASSWORD` is defined in a `.env` file. Refer to `.example.env`.'
+      : 'An unexpected error have happened. AKDELTE: Verification missing Please try again later.';
+    throw new Error(message);
+  }
+
   const { setSelectedResource } = useSelectedResource();
 
   const [isModalOpen, setIsModalOpen] = useState(false);

src/hooks/queries/useWalkingDurationQuery.ts

@@ -4,6 +4,7 @@ import getUserLocation from 'utils/getUserLocation';
 import useActiveSearchLocation from 'hooks/useActiveSearchLocation';
 
 const OPEN_ROUTE_SERVICE_API_KEY =
+  import.meta.env.VITE_OPEN_ROUTE_SERVICE_API_KEY ||
   '5b3ce3597851110001cf6248ac903cdbe0364ca9850aa85cb64d8dfc';
 
 const BASE_URL = 'https://api.openrouteservice.org/v2';
@@ -58,6 +59,13 @@ export const useWalkingDurationQuery = ({
   const { latitude, longitude } = selectedResource;
 
   const queryFn = async (): Promise<UseWalkingDurationResponse> => {
+    if (!OPEN_ROUTE_SERVICE_API_KEY) {
+      const message = import.meta.env.DEV
+        ? 'Open Route Service API key is missing! Make sure that `VITE_OPEN_ROUTE_SERVICE_API_KEY` is defined in your `.env` file'
+        : 'An unexpected error happened with route service. Please try again later.';
+      throw new Error(message);
+    }
+
     const locationPermission = await navigator.permissions.query({
       name: 'geolocation'
     });

src/services/db.ts

@@ -2,17 +2,22 @@ import { createClient } from '@supabase/supabase-js';
 import type { Provider, ResourceEntry } from 'types/ResourceEntry';
 import type { ResourceTypeOption } from 'hooks/useResourceType';
 import type { Contributor } from 'types/Contributor';
+import { data } from 'react-router';
 
-// Need access to the database? Message us in the #phlask-data channel on Slack
-const databaseUrl =
-  import.meta.env?.VITE_DB_URL || 'https://wantycfbnzzocsbthqzs.supabase.co';
+// Need access to the database? Please refer to .example.env and message us in the #phlask-data channel on Slack
+const databaseUrl = 'https://wantycfbnzzocsbthqzs.supabase.co';
+const databaseApiKey = import.meta.env.VITE_DB_API_KEY;
 const resourceDatabaseName = 'resources';
-const databaseApiKey =
-  import.meta.env?.VITE_DB_API_KEY ||
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndhbnR5Y2Zibnp6b2NzYnRocXpzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzcwNDY2OTgsImV4cCI6MjA1MjYyMjY5OH0.yczsMOx3Y-zsWu-GjYEajIb0yw9fYWEIUglmmfM1zCY';
 const contributorDatabaseName = 'airtable_contributors';
 const providersDatabaseName = 'providers';
 
+if (!databaseApiKey) {
+  const message = import.meta.env.DEV
+    ? 'Database credentials are missing! Make sure that `databaseApiKey` is defined in your `.env` file. Refer to `.example.env`.'
+    : 'An unexpected error happend with supabase. Please try again later.';
+  throw data(new Error(message), { status: 500 });
+}
+
 const supabase = createClient(databaseUrl, databaseApiKey);
 
 export type FetchResourcesOptions = {
@@ -127,11 +132,15 @@ export const getContributors = async (): Promise<Contributor[]> => {
   return data;
 };
 
-export const getResourceProviders = async (resourceId: string): Promise<Provider[]> => {
+export const getResourceProviders = async (
+  resourceId: string
+): Promise<Provider[]> => {
   const { data, error } = await supabase
     .from(providersDatabaseName)
-    .select('name, logo_url, url:website_url, resource_providers!inner(resource_id)')
-    .eq('resource_providers.resource_id', resourceId)
+    .select(
+      'name, logo_url, url:website_url, resource_providers!inner(resource_id)'
+    )
+    .eq('resource_providers.resource_id', resourceId);
   if (error) {
     throw error;
   }