fix: Add temp API keys to selfhosted (#39356)

* Deduplicate @babel/core.

* Remove explicit dependency of import-in-the-middle (it's imported in sentry deps).

* Add an API route for api-keys/temporary.

* Refresh the token if on self-hosted.

* Readd import-in-the-middle.

* Bump supabase to 2.50.3 which contains fixes for storage upload.

apps/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover/index.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useParams } from 'common'
+import { IS_PLATFORM, useParams } from 'common'
 import { ChevronDown } from 'lucide-react'
 import { Dispatch, SetStateAction, useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -67,7 +67,7 @@ export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPo
     let token = config.token
 
     // [Joshen] Refresh if starting to listen + using temp API key, since it has a low refresh rate
-    if (token.startsWith('sb_temp')) {
+    if (token.startsWith('sb_temp') || !IS_PLATFORM) {
       const data = await getTemporaryAPIKey({ projectRef: config.projectRef, expiry: 3600 })
       token = data.api_key
     }

apps/studio/components/interfaces/Realtime/Inspector/Header.tsx

@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { PlayCircle, StopCircle } from 'lucide-react'
 import { Dispatch, SetStateAction } from 'react'
 
-import { useParams } from 'common'
+import { IS_PLATFORM, useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { getTemporaryAPIKey } from 'data/api-keys/temp-api-keys-query'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -41,7 +41,7 @@ export const Header = ({ config, onChangeConfig }: HeaderProps) => {
           icon={config.enabled ? <StopCircle size="16" /> : <PlayCircle size="16" />}
           onClick={async () => {
             // [Joshen] Refresh if starting to listen + using temp API key, since it has a low refresh rate
-            if (!config.enabled && config.token.startsWith('sb_temp')) {
+            if (!config.enabled && (config.token.startsWith('sb_temp') || !IS_PLATFORM)) {
               const data = await getTemporaryAPIKey({ projectRef: config.projectRef, expiry: 3600 })
               const token = data.api_key
               onChangeConfig({ ...config, token, enabled: !config.enabled })

apps/studio/package.json

@@ -191,7 +191,7 @@
     "eslint-config-supabase": "workspace:*",
     "eslint-plugin-barrel-files": "^2.0.7",
     "graphql-ws": "5.14.1",
-    "import-in-the-middle": "^1.13.1",
+    "import-in-the-middle": "^1.14.2",
     "jsdom-testing-mocks": "^1.13.1",
     "msw": "^2.3.0",
     "next-router-mock": "^0.9.13",

apps/studio/pages/api/platform/projects/[ref]/api-keys/temporary.ts

@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+
+import { components } from 'api-types'
+import apiWrapper from 'lib/api/apiWrapper'
+
+type ProjectAppConfig = components['schemas']['ProjectSettingsResponse']['app_config'] & {
+  protocol?: string
+}
+export type ProjectSettings = components['schemas']['ProjectSettingsResponse'] & {
+  app_config?: ProjectAppConfig
+}
+
+export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { method } = req
+
+  switch (method) {
+    case 'POST':
+      return handlePost(req, res)
+    default:
+      res.setHeader('Allow', ['POST'])
+      res.status(405).json({ data: null, error: { message: `Method ${method} Not Allowed` } })
+  }
+}
+
+const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
+  const response = {
+    api_key: process.env.SUPABASE_SERVICE_KEY ?? '',
+  }
+
+  return res.status(200).json(response)
+}

package.json

@@ -53,7 +53,7 @@
     "prettier-plugin-sql-cst": "^0.11.0",
     "rimraf": "^6.0.0",
     "sass": "^1.72.0",
-    "supabase": "^1.151.1",
+    "supabase": "^2.50.3",
     "supports-color": "^8.0.0",
     "turbo": "2.3.3",
     "typescript": "catalog:"

pnpm-workspace.yaml

@@ -36,9 +36,10 @@ ignoredBuiltDependencies:
 minimumReleaseAge: 10080
 
 minimumReleaseAgeExclude:
-  - ai
   - '@ai-sdk/*'
   - '@supabase/*'
+  - ai
+  - supabase
 
 onlyBuiltDependencies:
   - supabase