Merge pull request #10959 from supabase/fix-studio-protocol

studio/.env

@@ -5,7 +5,7 @@ DEFAULT_ORGANIZATION_NAME=Default Organization
 DEFAULT_PROJECT_NAME=Default Project
 
 SUPABASE_URL=http://localhost:8000
-SUPABASE_PUBLIC_URL=https://localhost:8443
+SUPABASE_PUBLIC_URL=http://localhost:8000
 SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE
 SUPABASE_SERVICE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q
 

studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx

@@ -6,7 +6,8 @@ import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useJwtSecretUpdateStatus, useProjectSettings } from 'hooks'
-import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
+import { DEFAULT_PROJECT_API_SERVICE_ID, IS_PLATFORM } from 'lib/constants'
+import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants'
 import Snippets from 'components/to-be-cleaned/Docs/Snippets'
 import Panel from 'components/ui/Panel'
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
@@ -45,7 +46,7 @@ const APIKeys = () => {
   const isNotUpdatingJwtSecret =
     jwtSecretUpdateStatus === undefined || jwtSecretUpdateStatus === JwtSecretUpdateStatus.Updated
 
-  const apiUrl = `https://${apiConfig.endpoint}`
+  const apiUrl = `${IS_PLATFORM ? 'https' : PROJECT_ENDPOINT_PROTOCOL}://${apiConfig.endpoint}`
   const anonKey = apiKeys.find((key: any) => key.tags === 'anon')
 
   const clientInitSnippet: any = Snippets.init(apiUrl)

studio/components/interfaces/Settings/API/ServiceList.tsx

@@ -14,6 +14,8 @@ import Panel from 'components/ui/Panel'
 import PostgrestConfig from './PostgrestConfig'
 import { DisplayApiSettings } from 'components/ui/ProjectSettings'
 import { JWT_SECRET_UPDATE_ERROR_MESSAGES } from './API.constants'
+import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants'
+import { IS_PLATFORM } from 'lib/constants'
 import JWTSettings from './JWTSettings'
 
 interface Props {
@@ -77,7 +79,9 @@ const ServiceList: FC<Props> = ({ projectRef }) => {
                 readOnly
                 disabled
                 className="input-mono"
-                value={`https://${apiConfig?.endpoint ?? '-'}`}
+                value={`${IS_PLATFORM ? 'https' : PROJECT_ENDPOINT_PROTOCOL}://${
+                  apiConfig?.endpoint ?? '-'
+                }`}
                 descriptionText="A RESTful endpoint for querying and managing your database."
                 layout="horizontal"
               />

studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx

@@ -3,7 +3,8 @@ import { useRouter } from 'next/router'
 import { Input, IconAlertCircle, IconLoader } from 'ui'
 import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
 import { useJwtSecretUpdateStatus, useProjectSettings } from 'hooks'
-import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
+import { DEFAULT_PROJECT_API_SERVICE_ID, IS_PLATFORM } from 'lib/constants'
+import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants'
 import Panel from 'components/ui/Panel'
 
 const DisplayConfigSettings = () => {
@@ -55,7 +56,7 @@ const DisplayConfigSettings = () => {
               copy
               disabled
               className="input-mono"
-              value={`https://${apiConfig.endpoint}`}
+              value={`${IS_PLATFORM ? 'https' : PROJECT_ENDPOINT_PROTOCOL}://${apiConfig.endpoint}`}
               descriptionText="A RESTful endpoint for querying and managing your database."
               layout="horizontal"
             />

studio/localStores/storageExplorer/StorageExplorerStore.js

@@ -24,6 +24,8 @@ import {
   STORAGE_SORT_BY,
 } from 'components/to-be-cleaned/Storage/Storage.constants.ts'
 import { copyToClipboard } from 'lib/helpers'
+import { IS_PLATFORM } from 'lib/constants'
+import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants'
 
 /**
  * This is a preferred method rather than React Context and useStorageExplorerStore().
@@ -112,21 +114,26 @@ class StorageExplorerStore {
   /* Methods which are commonly used + For better readability */
 
   initializeSupabaseClient = (serviceKey, serviceEndpoint) => {
-    this.supabaseClient = createClient(`https://${serviceEndpoint}`, serviceKey, {
-      auth: {
-        persistSession: false,
-        autoRefreshToken: false,
-        multiTab: false,
-        detectSessionInUrl: false,
-        localStorage: {
-          getItem: (key) => {
-            return undefined
+    console.debug(serviceEndpoint)
+    this.supabaseClient = createClient(
+      `${IS_PLATFORM ? 'https' : PROJECT_ENDPOINT_PROTOCOL}://${serviceEndpoint}`,
+      serviceKey,
+      {
+        auth: {
+          persistSession: false,
+          autoRefreshToken: false,
+          multiTab: false,
+          detectSessionInUrl: false,
+          localStorage: {
+            getItem: (key) => {
+              return undefined
+            },
+            setItem: (key, value) => {},
+            removeItem: (key) => {},
           },
-          setItem: (key, value) => {},
-          removeItem: (key) => {},
         },
-      },
-    })
+      }
+    )
   }
 
   updateFileInPreviewCache = (fileCache) => {

studio/pages/api/constants.ts

@@ -1,4 +1,5 @@
-const PUBLIC_URL = new URL(process.env.SUPABASE_PUBLIC_URL || 'https://localhost:8443')
+const PUBLIC_URL = new URL(process.env.SUPABASE_PUBLIC_URL || 'http://localhost:8000')
 
 export const PROJECT_REST_URL = `${PUBLIC_URL.origin}/rest/v1/`
 export const PROJECT_ENDPOINT = PUBLIC_URL.host
+export const PROJECT_ENDPOINT_PROTOCOL = PUBLIC_URL.protocol.replace(':', '')

studio/pages/project/[ref]/api/index.tsx

@@ -6,6 +6,7 @@ import { observer, useLocalObservable } from 'mobx-react-lite'
 
 import { NextPageWithLayout } from 'types'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
+import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants'
 import { checkPermissions, useStore } from 'hooks'
 import { get } from 'lib/common/fetch'
 import { snakeToCamel } from 'lib/helpers'
@@ -118,7 +119,7 @@ const DocView: FC<any> = observer(({}) => {
     ...data.autoApiService,
     endpoint: IS_PLATFORM
       ? `https://${data?.autoApiService?.endpoint}`
-      : data.autoApiService.endpoint,
+      : `${PROJECT_ENDPOINT_PROTOCOL}://${data.autoApiService.endpoint}`,
   }
 
   const { query } = router

studio/pages/vercel/integrate.tsx

@@ -10,7 +10,8 @@ import Divider from 'components/ui/Divider'
 import { Dictionary } from 'components/grid'
 
 import { useStore, withAuth } from 'hooks'
-import { API_URL } from 'lib/constants'
+import { API_URL, IS_PLATFORM } from 'lib/constants'
+import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants'
 import { get } from 'lib/common/fetch'
 import {
   VERCEL_INTEGRATION_CONFIGS,
@@ -280,7 +281,7 @@ const IntegrationProject: FC = observer(() => {
         </Select>
       </div>
       <div
-        className="w-full rounded-sm border border-border-secondary-light 
+        className="w-full rounded-sm border border-border-secondary-light
       bg-panel-header-light dark:border-border-secondary-dark dark:bg-panel-header-dark"
       >
         <div className="flex items-center justify-between p-6">
@@ -369,7 +370,9 @@ const ProjectLinks: FC = observer(() => {
 
         // Then create env for vercel project with supabase project
         const vercelEnvs = prepareVercelEvns(defaultVercelEnvs, {
-          endpoint: `https://${projectDetails.autoApiService.endpoint}`,
+          endpoint: `${IS_PLATFORM ? 'https' : PROJECT_ENDPOINT_PROTOCOL}://${
+            projectDetails.autoApiService.endpoint
+          }`,
           anon_key: projectDetails.autoApiService.defaultApiKey,
           service_key: projectDetails.autoApiService.serviceApiKey,
         })