diff --git a/apps/docs/content/guides/functions/websockets.mdx b/apps/docs/content/guides/functions/websockets.mdx index d606fec4a8f7a..48fd6fff028c0 100644 --- a/apps/docs/content/guides/functions/websockets.mdx +++ b/apps/docs/content/guides/functions/websockets.mdx @@ -7,7 +7,7 @@ subtitle: 'How to handle WebSocket connections in Edge Functions' Edge Functions supports hosting WebSocket servers that can facilitate bi-directional communications with browser clients. -You can also establish outgoing WebSocket client connections to another server from Edge Functions (e.g., [OpenAI Realtime API](https://platform.openai.com/docs/guides/realtime/overview)). +You can also establish outgoing WebSocket client connections to another server from Edge Functions (e.g., [OpenAI Realtime API](https://platform.openai.com/docs/guides/realtime/overview)). You can find an example OpenAI Realtime Relay Server implementation on the [supabase-community GitHub account](https://github.com/supabase-community/openai-realtime-console?tab=readme-ov-file#using-supabase-edge-functions-as-a-relay-server). ### Writing a WebSocket server @@ -92,94 +92,17 @@ server.listen(8080); You can also establish an outbound WebSocket connection to another server from an Edge Function. -Combining it with incoming WebSocket servers, it's possible to use Edge Functions as a WebSocket proxy. - -Here is an example of proxying messages to OpenAI Realtime API. - -We use [Supabase Auth](/docs/guides/functions/auth#fetching-the-user) to authenticate the user who is sending the messages. - -```ts -import { createClient } from 'jsr:@supabase/supabase-js@2' - -const supabase = createClient( - Deno.env.get('SUPABASE_URL'), - Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') -) -const OPENAI_API_KEY = Deno.env.get('OPENAI_API_KEY') - -Deno.serve(async (req) => { - const upgrade = req.headers.get('upgrade') || '' - - if (upgrade.toLowerCase() != 'websocket') { - return new Response("request isn't trying to upgrade to websocket.") - } - - // WebSocket browser clients does not support sending custom headers. - // We have to use the URL query params to provide user's JWT. - // Please be aware query params may be logged in some logging systems. - const url = new URL(req.url) - const jwt = url.searchParams.get('jwt') - if (!jwt) { - console.error('Auth token not provided') - return new Response('Auth token not provided', { status: 403 }) - } - const { error, data } = await supabase.auth.getUser(jwt) - if (error) { - console.error(error) - return new Response('Invalid token provided', { status: 403 }) - } - if (!data.user) { - console.error('user is not authenticated') - return new Response('User is not authenticated', { status: 403 }) - } - - const { socket, response } = Deno.upgradeWebSocket(req) - - socket.onopen = () => { - // initiate an outbound WS connection with OpenAI - const url = 'wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01' - - // openai-insecure-api-key isn't a problem since this code runs in an Edge Function (not client browser) - const openaiWS = new WebSocket(url, [ - 'realtime', - `openai-insecure-api-key.${OPENAI_API_KEY}`, - 'openai-beta.realtime-v1', - ]) - - openaiWS.onopen = () => { - console.log('Connected to OpenAI server.') - - socket.onmessage = (e) => { - console.log('socket message:', e.data) - // only send the message if openAI ws is open - if (openaiWS.readyState === 1) { - openaiWS.send(e.data) - } else { - socket.send( - JSON.stringify({ - type: 'error', - msg: 'openAI connection not ready', - }) - ) - } - } - } - - openaiWS.onmessage = (e) => { - console.log(e.data) - socket.send(e.data) - } - - openaiWS.onerror = (e) => console.log('OpenAI error: ', e.message) - openaiWS.onclose = (e) => console.log('OpenAI session closed') - } - - socket.onerror = (e) => console.log('socket errored:', e.message) - socket.onclose = () => console.log('socket closed') - - return response // 101 (Switching Protocols) -}) -``` +Combining it with incoming WebSocket servers, it's possible to use Edge Functions as a WebSocket proxy, for example as a [relay server](https://github.com/supabase-community/openai-realtime-console?tab=readme-ov-file#using-supabase-edge-functions-as-a-relay-server) for the [OpenAI Realtime API](https://platform.openai.com/docs/guides/realtime/overview). + +<$CodeSample +external={true} +org="supabase-community" +repo="openai-realtime-console" +commit="0f93657a71670704fbf77c48cf54d6c9eb956698" +path="/supabase/functions/relay/index.ts" +meta="supabase/functions/relay/index.ts" +lines={[[1, 3], [5, -1]]} +/> ### Authentication diff --git a/apps/docs/features/directives/CodeSample.ts b/apps/docs/features/directives/CodeSample.ts index ab297b45e6b77..47d74391b5950 100644 --- a/apps/docs/features/directives/CodeSample.ts +++ b/apps/docs/features/directives/CodeSample.ts @@ -48,7 +48,7 @@ import { z, type SafeParseError } from 'zod' import { fetchWithNextOptions } from '~/features/helpers.fetch' import { EXAMPLES_DIRECTORY } from '~/lib/docs' -const ALLOW_LISTED_GITHUB_ORGS = ['supabase'] as [string, ...string[]] +const ALLOW_LISTED_GITHUB_ORGS = ['supabase', 'supabase-community'] as [string, ...string[]] const linesSchema = z.array(z.tuple([z.coerce.number(), z.coerce.number()])) const linesValidator = z diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt index ef5e340666ac7..b631dfe115cde 100644 --- a/apps/docs/public/humans.txt +++ b/apps/docs/public/humans.txt @@ -83,6 +83,7 @@ Terry Sutton Thomas E Thor Schaeff Tom Ashley +Tom G Tyler Hillery Tyler Fontaine Tyler Shukert diff --git a/apps/docs/spec/cli_v1_commands.yaml b/apps/docs/spec/cli_v1_commands.yaml index 45cda3234db27..5a46fcada6f75 100644 --- a/apps/docs/spec/cli_v1_commands.yaml +++ b/apps/docs/spec/cli_v1_commands.yaml @@ -1,7 +1,7 @@ clispec: '001' info: id: cli - version: 1.226.3 + version: 2.0.0 title: Supabase CLI language: sh source: https://github.com/supabase/cli @@ -3538,10 +3538,6 @@ commands: name: --persistent description: Switch between ephemeral and persistent branch. default_value: 'false' - - id: reset-on-push - name: --reset-on-push - description: Reset the preview branch on git push. - default_value: 'false' - id: status name: --status description: Override the current branch status. @@ -3661,101 +3657,47 @@ commands: description: Select a region to deploy the branch database. default_value: '' accepted_values: - - id: ams - name: ams - type: string - - id: arn - name: arn - type: string - - id: bog - name: bog - type: string - - id: bos - name: bos - type: string - - id: cdg - name: cdg - type: string - - id: den - name: den - type: string - - id: dfw - name: dfw - type: string - - id: ewr - name: ewr - type: string - - id: fra - name: fra - type: string - - id: gdl - name: gdl - type: string - - id: gig - name: gig - type: string - - id: gru - name: gru - type: string - - id: hkg - name: hkg - type: string - - id: iad - name: iad - type: string - - id: jnb - name: jnb - type: string - - id: lax - name: lax - type: string - - id: lhr - name: lhr - type: string - - id: maa - name: maa - type: string - - id: mad - name: mad + - id: ap-northeast-1 + name: ap-northeast-1 type: string - - id: mia - name: mia + - id: ap-northeast-2 + name: ap-northeast-2 type: string - - id: nrt - name: nrt + - id: ap-south-1 + name: ap-south-1 type: string - - id: ord - name: ord + - id: ap-southeast-1 + name: ap-southeast-1 type: string - - id: otp - name: otp + - id: ap-southeast-2 + name: ap-southeast-2 type: string - - id: qro - name: qro + - id: ca-central-1 + name: ca-central-1 type: string - - id: scl - name: scl + - id: eu-central-1 + name: eu-central-1 type: string - - id: sea - name: sea + - id: eu-west-1 + name: eu-west-1 type: string - - id: sin - name: sin + - id: eu-west-2 + name: eu-west-2 type: string - - id: sjc - name: sjc + - id: eu-west-3 + name: eu-west-3 type: string - - id: syd - name: syd + - id: sa-east-1 + name: sa-east-1 type: string - - id: waw - name: waw + - id: us-east-1 + name: us-east-1 type: string - - id: yul - name: yul + - id: us-west-1 + name: us-west-1 type: string - - id: yyz - name: yyz + - id: us-west-2 + name: us-west-2 type: string - id: size name: --size diff --git a/apps/docs/spec/cli_v1_config.yaml b/apps/docs/spec/cli_v1_config.yaml index 2cd7a2e2e8664..d6c2cbb2d1a64 100644 --- a/apps/docs/spec/cli_v1_config.yaml +++ b/apps/docs/spec/cli_v1_config.yaml @@ -677,6 +677,17 @@ parameters: - name: 'Auth Server configuration' link: 'https://supabase.com/docs/reference/auth' + - id: 'auth.enable_manual_linking' + title: 'auth.enable_manual_linking' + tags: ['auth'] + required: false + default: 'false' + description: | + Allow testing manual linking of accounts + links: + - name: 'Anonymous Sign Ins (Manual Linking)' + link: 'https://supabase.com/docs/guides/auth/auth-anonymous?queryGroups=language&language=python#convert-an-anonymous-user-to-a-permanent-user' + - id: 'auth.enable_refresh_token_rotation' title: 'auth.enable_refresh_token_rotation' tags: ['auth'] @@ -718,8 +729,8 @@ parameters: description: | Allow/disallow anonymous sign-ins to your project. links: - - name: 'Auth Server configuration' - link: 'https://supabase.com/docs/reference/auth' + - name: 'Anonymous Sign Ins' + link: 'https://supabase.com/docs/guides/auth/auth-anonymous' - id: 'auth.email.enable_signup' title: 'auth.email.enable_signup' @@ -1063,11 +1074,11 @@ parameters: - `google` - `kakao` - `keycloak` - - `linkedin` + - `linkedin_oidc` - `notion` - `twitch` - `twitter` - - `slack` + - `slack_oidc` - `spotify` - `workos` - `zoom` @@ -1131,27 +1142,205 @@ parameters: - name: 'Auth Server configuration' link: 'https://supabase.com/docs/reference/auth' + - id: 'auth.mfa.totp.enroll_enabled' + title: 'auth.mfa.totp.enroll_enabled' + tags: ['auth'] + required: false + default: 'true' + description: | + Enable TOTP enrollment for multi-factor authentication. + links: + - name: 'Auth Multi-Factor Authentication (TOTP)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/totp' + + - id: 'auth.mfa.totp.verify_enabled' + title: 'auth.mfa.totp.verify_enabled' + tags: ['auth'] + required: false + default: 'true' + description: | + Enable TOTP verification for multi-factor authentication. + links: + - name: 'Auth Multi-Factor Authentication (TOTP)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/totp' + + - id: 'auth.mfa.max_enrolled_factors' + title: 'auth.mfa.max_enrolled_factors' + tags: ['auth'] + required: false + default: '10' + description: | + Control how many MFA factors can be enrolled at once per user. + links: + - name: 'Auth Multi-Factor Authentication (TOTP)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/totp' + + - id: 'auth.mfa.phone.enroll_enabled' + title: 'auth.mfa.phone.enroll_enabled' + tags: ['auth'] + required: false + default: 'false' + description: | + Enable Phone enrollment for multi-factor authentication. + links: + - name: 'Auth Multi-Factor Authentication (Phone)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/phone' + + - id: 'auth.mfa.phone.otp_length' + title: 'auth.mfa.phone.otp_length' + tags: ['auth'] + required: false + default: '6' + description: | + Length of OTP code sent when using phone multi-factor authentication + links: + - name: 'Auth Multi-Factor Authentication (Phone)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/phone' + + - id: 'auth.mfa.phone.max_frequency' + title: 'auth.mfa.phone.max_frequency' + tags: ['auth'] + required: false + default: '10s' + description: | + The minimum amount of time that must pass between phone requests. + Helps prevent spam by limiting how frequently messages can be sent. + Example values: "10s", "20s", "1m" + links: + - name: 'Auth Multi-Factor Authentication (Phone)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/phone' + + - id: 'auth.mfa.phone.otp_length' + title: 'auth.mfa.phone.otp_length' + tags: ['auth'] + required: false + default: '6' + description: | + Length of OTP sent when using phone multi-factor authentication + links: + - name: 'Auth Multi-Factor Authentication (Phone)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/phone' + + - id: 'auth.mfa.phone.verify_enabled' + title: 'auth.mfa.phone.verify_enabled' + tags: ['auth'] + required: false + default: 'false' + description: | + Enable Phone verification for multi-factor authentication. + links: + - name: 'Auth Multi-Factor Authentication (Phone)' + link: 'https://supabase.com/docs/guides/auth/auth-mfa/phone' + - id: 'auth.mfa.web_authn.enroll_enabled' title: 'auth.mfa.web_authn.enroll_enabled' - tags: ['auth', 'local'] + tags: ['auth'] required: false default: 'false' description: | Enable WebAuthn enrollment for multi-factor authentication. links: - - name: 'Auth Server configuration' - link: 'https://supabase.com/docs/reference/auth' + - name: 'Auth Multi-Factor Authentication' + link: 'https://supabase.com/docs/guides/auth/auth-mfa' - id: 'auth.mfa.web_authn.verify_enabled' title: 'auth.mfa.web_authn.verify_enabled' - tags: ['auth', 'local'] + tags: ['auth'] required: false default: 'false' description: | Enable WebAuthn verification for multi-factor authentication. links: - - name: 'Auth Server configuration' - link: 'https://supabase.com/docs/reference/auth' + - name: 'Auth Multi-Factor Authentication' + link: 'https://supabase.com/docs/guides/auth/auth-mfa' + + - id: 'auth.third_party.aws_cognito.enabled' + title: 'auth.third_party.aws_cognito.enabled' + tags: ['auth'] + required: false + default: 'false' + description: | + Enable third party auth with AWS Cognito (Amplify) + links: + - name: 'Third Party Auth (Cognito)' + link: 'https://supabase.com/docs/guides/auth/third-party/aws-cognito' + + - id: 'auth.third_party.aws_cognito.user_pool_id' + title: 'auth.third_party.aws_cognito.user_pool_id' + tags: ['auth'] + required: false + default: 'false' + description: | + User Pool ID for AWS Cognito (Amplify) that you are integrating with + links: + - name: 'Third Party Auth (Cognito)' + link: 'https://supabase.com/docs/guides/auth/third-party/aws-cognito' + + - id: 'auth.third_party.aws_cognito.user_pool_region' + title: 'auth.third_party.aws_cognito.user_pool_region' + tags: ['auth'] + required: false + default: 'false' + description: | + User Pool region for AWS Cognito (Amplify) that you are integrating with. Example values: 'ap-southeast-1', 'us-east-1' + links: + - name: 'Third Party Auth (Cognito)' + link: 'https://supabase.com/docs/guides/auth/third-party/aws-cognito' + + - id: 'auth.third_party.auth0.enabled' + title: 'auth.third_party.auth0.enabled' + tags: ['auth'] + required: false + default: 'false' + description: | + Enable third party auth with Auth0 + links: + - name: 'Third Party Auth (Auth0)' + link: 'https://supabase.com/docs/guides/auth/third-party/auth0' + + - id: 'auth.third_party.auth0.tenant' + title: 'auth.third_party.auth0.tenant' + tags: ['auth'] + required: false + default: 'false' + description: | + Tenant Identifier for Auth0 instance that you are integrating with + links: + - name: 'Third Party Auth (Auth0)' + link: 'https://supabase.com/docs/guides/auth/third-party/auth0' + + - id: 'auth.third_party.auth0.tenant_region' + title: 'auth.third_party.tenant_region' + tags: ['auth'] + required: false + default: 'false' + description: | + Tenant region for Auth0 instance that you are integrating with + links: + - name: 'Third Party Auth (Auth0)' + link: 'https://supabase.com/docs/guides/auth/third-party/auth0' + + - id: 'auth.third_party.firebase.enabled' + title: 'auth.third_party.firebase.enabled' + tags: ['auth'] + required: false + default: 'false' + description: | + Enable third party auth with Firebase + links: + - name: 'Third Party Auth (Firebase)' + link: 'https://supabase.com/docs/guides/auth/third-party/firebase-auth' + + - id: 'auth.third_party.firebase.project_id' + title: 'auth.third_party.firebase.project_id' + tags: ['auth'] + required: false + default: 'false' + description: | + Project ID for Firebase instance that you are integrating with + links: + - name: 'Third Party Auth (Firebase)' + link: 'https://supabase.com/docs/guides/auth/third-party/firebase-auth' - id: 'edge_runtime.enabled' title: 'edge_runtime.enabled' diff --git a/apps/studio/components/interfaces/Account/Preferences/ThemeSettingsOld.tsx b/apps/studio/components/interfaces/Account/Preferences/ThemeSettingsOld.tsx deleted file mode 100644 index 41fcad374d291..0000000000000 --- a/apps/studio/components/interfaces/Account/Preferences/ThemeSettingsOld.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Moon, Sun } from 'lucide-react' -import { useTheme } from 'next-themes' -import { useEffect, useState } from 'react' - -import Panel from 'components/ui/Panel' -import { Listbox, Theme, themes } from 'ui' - -const ThemeSettings = () => { - const [mounted, setMounted] = useState(false) - const { theme, resolvedTheme, setTheme } = useTheme() - - /** - * Avoid Hydration Mismatch - * https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch - */ - // useEffect only runs on the client, so now we can safely show the UI - useEffect(() => { - setMounted(true) - }, []) - - if (!mounted) { - return null - } - - return ( - Theme}> - - : } - onChange={(value: string) => setTheme(value)} - > - {themes - .filter( - (theme: Theme) => - // temporary fix to exclude new themes - theme.value === 'light' || theme.value === 'dark' || theme.value === 'system' - ) - .map((theme: Theme) => ( - - {theme.name} - - ))} - - - - ) -} - -export default ThemeSettings diff --git a/apps/studio/components/interfaces/Account/Preferences/index.ts b/apps/studio/components/interfaces/Account/Preferences/index.ts index c1d48f60d4247..be8a47b1747dd 100644 --- a/apps/studio/components/interfaces/Account/Preferences/index.ts +++ b/apps/studio/components/interfaces/Account/Preferences/index.ts @@ -1,4 +1,3 @@ export { default as AccountInformation } from './AccountInformation' export { default as AnalyticsSettings } from './AnalyticsSettings' -export { default as ThemeSettingsOld } from './ThemeSettingsOld' export { default as ThemeSettings } from './ThemeSettings' diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx index cfc81587e9213..03d9c00b3bf79 100644 --- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx +++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx @@ -16,7 +16,6 @@ import SchemaSelector from 'components/ui/SchemaSelector' import { AuthConfigResponse } from 'data/auth/auth-config-query' import { useAuthHooksUpdateMutation } from 'data/auth/auth-hooks-update-mutation' import { executeSql } from 'data/sql/execute-sql-query' -import { useFlag } from 'hooks/ui/useFlag' import { Button, FormControl_Shadcn_, @@ -116,7 +115,6 @@ export const CreateHookSheet = ({ }: CreateHookSheetProps) => { const { ref: projectRef } = useParams() const { project } = useProjectContext() - const httpsAuthHooksEnabled = useFlag('httpsAuthHooksEnabled') const definition = useMemo( () => HOOKS_DEFINITIONS.find((d) => d.title === title) || HOOKS_DEFINITIONS[0], @@ -326,37 +324,35 @@ export const CreateHookSheet = ({ )} /> - {httpsAuthHooksEnabled && ( - ( - - - field.onChange(value)} - > - - - - - - )} - /> - )} + ( + + + field.onChange(value)} + > + + + + + + )} + /> {values.selectedType === 'postgres' ? ( <>
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx index d519fd8758492..39e81d3c9d701 100644 --- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx +++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx @@ -12,7 +12,6 @@ import { useThirdPartyAuthIntegrationsQuery, } from 'data/third-party-auth/integrations-query' import { useCheckPermissions } from 'hooks/misc/useCheckPermissions' -import { useFlag } from 'hooks/ui/useFlag' import { cn } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import { AddIntegrationDropdown } from './AddIntegrationDropdown' @@ -27,7 +26,6 @@ import { } from './ThirdPartyAuthForm.utils' export const ThirdPartyAuthForm = () => { - const thirdPartyAuthEnabled = useFlag('thirdPartyAuth') const { ref: projectRef } = useParams() const { data: integrationsData, @@ -45,10 +43,6 @@ export const ThirdPartyAuthForm = () => { const { mutateAsync: deleteIntegration } = useDeleteThirdPartyAuthIntegrationMutation() const canUpdateConfig = useCheckPermissions(PermissionAction.UPDATE, 'custom_config_gotrue') - if (!thirdPartyAuthEnabled) { - return null - } - if (isError) { return ( { - const [toggleConfirmationModalShown, showToggleConfirmationModal] = useState(false) const { ref } = useParams() const { project: selectedProject } = useProjectContext() + + const [toggleConfirmationModalShown, showToggleConfirmationModal] = useState(false) + + const { mutate: sendEvent } = useSendEventMutation() const { mutate: toggleDatabaseCronJob, isLoading } = useDatabaseCronJobToggleMutation() // pg_cron can also use "30 seconds" format for schedule. Cronstrue doesn't understand that format so just use the @@ -68,7 +73,18 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard checked={job.active} onCheckedChange={() => showToggleConfirmationModal(true)} /> - @@ -76,11 +92,29 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard +
) : (
@@ -82,7 +91,7 @@ export const CronjobsTab = () => { onChange={(e) => setSearchQuery(e.target.value)} /> - +
{filteredCronJobs.length === 0 ? (
void } -const DeleteCronJob = ({ cronJob, visible, onClose }: DeleteCronJobProps) => { +export const DeleteCronJob = ({ cronJob, visible, onClose }: DeleteCronJobProps) => { const { project } = useProjectContext() + const { mutate: sendEvent } = useSendEventMutation() const { mutate: deleteDatabaseCronJob, isLoading } = useDatabaseCronJobDeleteMutation({ onSuccess: () => { + sendEvent({ + action: TELEMETRY_EVENTS.CRON_JOBS, + value: TELEMETRY_VALUES.CRON_JOB_DELETED, + label: 'User deleted cron job', + }) toast.success(`Successfully removed cron job ${cronJob.jobname}`) onClose() }, @@ -56,5 +64,3 @@ const DeleteCronJob = ({ cronJob, visible, onClose }: DeleteCronJobProps) => { /> ) } - -export default DeleteCronJob diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx index d5a39b263bbdd..6b1cbf74b736b 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx @@ -181,42 +181,40 @@ export const PreviousRunsTab = () => { return (
-
- - { - const isSelected = false - return cn([ - `${isSelected ? 'bg-surface-300 dark:bg-surface-300' : 'bg-200'} `, - `${isSelected ? '[&>div:first-child]:border-l-4 border-l-secondary [&>div]:border-l-foreground' : ''}`, - '[&>.rdg-cell]:border-box [&>.rdg-cell]:outline-none [&>.rdg-cell]:shadow-none', - '[&>.rdg-cell:first-child>div]:ml-4', - ]) - }} - renderers={{ - renderRow(_idx, props) { - return - }, - noRowsFallback: isLoadingCronJobRuns ? ( -
- -
- ) : ( -
- -
- ), - }} - /> -
+ + { + const isSelected = false + return cn([ + `${isSelected ? 'bg-surface-300 dark:bg-surface-300' : 'bg-200'} `, + `${isSelected ? '[&>div:first-child]:border-l-4 border-l-secondary [&>div]:border-l-foreground' : ''}`, + '[&>.rdg-cell]:border-box [&>.rdg-cell]:outline-none [&>.rdg-cell]:shadow-none', + '[&>.rdg-cell:first-child>div]:ml-4', + ]) + }} + renderers={{ + renderRow(_idx, props) { + return + }, + noRowsFallback: isLoadingCronJobRuns ? ( +
+ +
+ ) : ( +
+ +
+ ), + }} + /> -
+
{isLoadingCronJobs ? ( ) : ( @@ -239,7 +237,7 @@ export const PreviousRunsTab = () => {

-
+

Command

@@ -266,18 +264,9 @@ export const PreviousRunsTab = () => { - {/*
- - {currentJobState?.command} - -
*/}
-
+

Explore

-
-
- - )} +
+
+

We will contact you at

+

{respondToEmail}

+
+
+

+ Please ensure you haven't blocked Hubspot in your emails +

+
+
+ +
+
) diff --git a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrations.Commands.tsx b/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrations.Commands.tsx deleted file mode 100644 index 0601598e5a8f0..0000000000000 --- a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrations.Commands.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Code } from 'lucide-react' - -import { COMMAND_MENU_SECTIONS } from 'components/interfaces/App/CommandMenu/CommandMenu.utils' -import type { CommandOptions } from 'ui-patterns/CommandMenu' -import { useRegisterCommands } from 'ui-patterns/CommandMenu' -import { useParams } from 'common' -import { orderCommandSectionsByPriority } from 'components/interfaces/App/CommandMenu/ordering' - -export function useDatabaseGotoCommands(options?: CommandOptions) { - let { ref } = useParams() - ref ||= '_' - - useRegisterCommands( - COMMAND_MENU_SECTIONS.QUERY, - [ - { - id: 'run-sql', - name: 'Run SQL', - route: `/project/${ref}/sql/new`, - icon: () => , - }, - ], - { - ...options, - deps: [ref], - orderSection: orderCommandSectionsByPriority, - sectionMeta: { priority: 2 }, - } - ) - - useRegisterCommands( - COMMAND_MENU_SECTIONS.NAVIGATE, - [ - { - id: 'nav-database-tables', - name: 'Tables', - value: 'Database: Tables', - route: `/project/${ref}/database/tables`, - defaultHidden: true, - }, - { - id: 'nav-database-triggers', - name: 'Triggers', - value: 'Database: Triggers', - route: `/project/${ref}/database/triggers`, - defaultHidden: true, - }, - { - id: 'nav-database-functions', - name: 'Functions', - value: 'Database: Functions', - route: `/project/${ref}/database/functions`, - defaultHidden: true, - }, - { - id: 'nav-database-extensions', - name: 'Extensions', - value: 'Database: Extensions', - route: `/project/${ref}/database/extensions`, - defaultHidden: true, - }, - { - id: 'nav-database-roles', - name: 'Roles', - value: 'Database: Roles', - route: `/project/${ref}/database/roles`, - defaultHidden: true, - }, - { - id: 'nav-database-replication', - name: 'Replication', - value: 'Database: Replication', - route: `/project/${ref}/database/replication`, - defaultHidden: true, - }, - { - id: 'nav-database-hooks', - name: 'Webhooks', - value: 'Database: Webhooks', - route: `/project/${ref}/integrations/hooks`, - defaultHidden: true, - }, - { - id: 'nav-database-backups', - name: 'Backups', - value: 'Database: Backups', - route: `/project/${ref}/database/backups/scheduled`, - defaultHidden: true, - }, - { - id: 'nav-database-wrappers', - name: 'Wrappers', - value: 'Database: Wrappers', - route: `/project/${ref}/integrations/wrappers`, - defaultHidden: true, - }, - { - id: 'nav-database-migrations', - name: 'Migrations', - value: 'Database: Migrations', - route: `/project/${ref}/database/migrations`, - defaultHidden: true, - }, - ], - { ...options, deps: [ref] } - ) -} diff --git a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout.tsx b/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout.tsx deleted file mode 100644 index b9496ba2ba6f1..0000000000000 --- a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsLayout.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useRouter } from 'next/router' -import { PropsWithChildren } from 'react' - -import { IS_PLATFORM } from 'common' -import { ProductMenu } from 'components/ui/ProductMenu' -import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query' -import { useSelectedProject } from 'hooks/misc/useSelectedProject' -import { withAuth } from 'hooks/misc/withAuth' -import { useFlag } from 'hooks/ui/useFlag' -import ProjectLayout from '../ProjectLayout/ProjectLayout' -import { generateProjectIntegrationsMenu } from './ProjectIntegrationsMenu.utils' - -export interface ProjectIntegrationsLayoutProps { - title: string -} - -const ProjectIntegrationsMenu = () => { - // if running on self-hosted, cron UI should be always enabled - const cronUiEnabled = useFlag('cronUi') || !IS_PLATFORM - const queuesUiEnabled = useFlag('queues') - const project = useSelectedProject() - - const router = useRouter() - const page = router.pathname.split('/')[4] - - const { data } = useDatabaseExtensionsQuery({ - projectRef: project?.ref, - connectionString: project?.connectionString, - }) - - const pgNetExtensionExists = (data ?? []).find((ext) => ext.name === 'pg_net') !== undefined - const graphqlExtensionExists = (data ?? []).find((ext) => ext.name === 'pg_graphql') !== undefined - const pgmqExtensionExists = (data ?? []).find((ext) => ext.name === 'pgmq') !== undefined - - return ( - <> - - - ) -} - -const ProjectIntegrationsLayout = ({ - children, - title, -}: PropsWithChildren) => { - return ( - } - isBlocking={false} - > - {children} - - ) -} - -export default withAuth(ProjectIntegrationsLayout) diff --git a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsMenu.utils.tsx b/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsMenu.utils.tsx deleted file mode 100644 index 1811d28d2ad47..0000000000000 --- a/apps/studio/components/layouts/ProjectIntegrationsLayout/ProjectIntegrationsMenu.utils.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import type { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types' -import type { Project } from 'data/projects/project-detail-query' - -export const generateProjectIntegrationsMenu = ( - project?: Project, - flags?: { - pgNetExtensionExists: boolean - cronUiEnabled: boolean - queuesUiEnabled: boolean - graphqlExtensionExists: boolean - pgmqExtensionExists: boolean - } -): ProductMenuGroup[] => { - const ref = project?.ref ?? 'default' - const { - pgNetExtensionExists, - cronUiEnabled, - queuesUiEnabled, - graphqlExtensionExists, - pgmqExtensionExists, - } = flags || {} - - return [ - { - title: 'Manage', - items: [ - { - name: 'Wrappers', - key: 'wrappers', - url: `/project/${ref}/integrations/wrappers`, - items: [], - }, - ...(!!pgNetExtensionExists - ? [ - { - name: 'Webhooks', - key: 'hooks', - url: `/project/${ref}/integrations/hooks`, - items: [], - }, - ] - : []), - - ...(!!cronUiEnabled - ? [ - { - name: 'Cron', - key: 'cron-jobs', - url: `/project/${ref}/integrations/cron`, - items: [], - }, - ] - : []), - ...(!!graphqlExtensionExists - ? [ - { - name: 'GraphiQL', - key: 'graphiql', - url: `/project/${ref}/integrations/graphiql`, - items: [], - }, - ] - : []), - { - name: 'Vault', - key: 'vault', - url: `/project/${ref}/integrations/vault/secrets`, - items: [], - label: 'BETA', - }, - ...(!!(queuesUiEnabled && pgmqExtensionExists) - ? [ - { - name: 'Queues', - key: 'queues', - url: `/project/${ref}/integrations/queues`, - items: [], - }, - ] - : []), - ], - }, - ] -} diff --git a/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx b/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx index 8b5bdd929e3b7..81af839800a79 100644 --- a/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx +++ b/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx @@ -47,7 +47,6 @@ const SettingsLayout = ({ title, children }: PropsWithChildren { @@ -26,7 +25,6 @@ export const generateSettingsMenu = ( const edgeFunctionsEnabled = features?.edgeFunctions ?? true const storageEnabled = features?.storage ?? true const warehouseEnabled = features?.warehouse ?? false - const logDrainsEnabled = features?.logDrains ?? false const newDiskComputeEnabled = features?.diskAndCompute ?? false return [ @@ -136,7 +134,7 @@ export const generateSettingsMenu = ( }, ] : []), - ...(IS_PLATFORM && logDrainsEnabled + ...(IS_PLATFORM ? [ { name: `Log Drains`, diff --git a/apps/studio/data/telemetry/send-event-mutation.ts b/apps/studio/data/telemetry/send-event-mutation.ts index 45afbe6179fca..36afd7e929ccc 100644 --- a/apps/studio/data/telemetry/send-event-mutation.ts +++ b/apps/studio/data/telemetry/send-event-mutation.ts @@ -19,6 +19,7 @@ export type SendEventVariables = { label?: string /** To deprecate - seems unnecessary */ category?: string + properties?: Record } type SendEventPayload = any diff --git a/apps/studio/lib/constants/telemetry.ts b/apps/studio/lib/constants/telemetry.ts index 7dd0628238085..87f03cf95b915 100644 --- a/apps/studio/lib/constants/telemetry.ts +++ b/apps/studio/lib/constants/telemetry.ts @@ -4,6 +4,7 @@ export enum TELEMETRY_EVENTS { FEATURE_PREVIEWS = 'Dashboard UI Feature Previews', AI_ASSISTANT_V2 = 'AI Assistant V2', + CRON_JOBS = 'Cron Jobs', } // [Joshen] Values refer to the "action" of the "event" @@ -35,4 +36,16 @@ export enum TELEMETRY_VALUES { * @purpose Indication of interest for wanting to expand from a SQL suggestion, aid in deciding the priority for an inline editor * */ EDIT_IN_SQL_EDITOR = 'edit-in-sql-editor', + /** + * Track events for cron jobs + * @context Cron Jobs + * @purpose TBD (Joshen just adding these here as we needed some telemetry, but ideally we think this properly through and come up with purposes) + */ + CRON_JOB_CREATED = 'cron-job-created', + CRON_JOB_UPDATED = 'cron-job-updated', + CRON_JOB_DELETED = 'cron-job-deleted', + CRON_JOB_DELETE_CLICKED = 'cron-job-delete-clicked', + CRON_JOB_UPDATE_CLICKED = 'cron-job-update-clicked', + CRON_JOB_CREATE_CLICKED = 'cron-job-create-clicked', + CRON_JOBS_VIEW_PREVIOUS_RUNS = 'view-previous-runs-clicked', } diff --git a/apps/studio/pages/account/me.tsx b/apps/studio/pages/account/me.tsx index c94b58eb601ad..9c1f90281abbb 100644 --- a/apps/studio/pages/account/me.tsx +++ b/apps/studio/pages/account/me.tsx @@ -2,7 +2,6 @@ import { AccountInformation, AnalyticsSettings, ThemeSettings, - ThemeSettingsOld, } from 'components/interfaces/Account/Preferences' import { AccountDeletion } from 'components/interfaces/Account/Preferences/AccountDeletion' import { ProfileInformation } from 'components/interfaces/Account/Preferences/ProfileInformation' @@ -11,7 +10,6 @@ import AlertError from 'components/ui/AlertError' import Panel from 'components/ui/Panel' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' -import { useFlag } from 'hooks/ui/useFlag' import { useProfile } from 'lib/profile' import type { NextPageWithLayout } from 'types' @@ -41,11 +39,8 @@ export default User const ProfileCard = () => { const profileUpdateEnabled = useIsFeatureEnabled('profile:update') - const { profile, error, isLoading, isError, isSuccess } = useProfile() - const experimentalThemeEnabled = useFlag('enableExperimentalTheme') - return (
{isLoading && ( @@ -71,7 +66,9 @@ const ProfileCard = () => { )} -
{experimentalThemeEnabled ? : }
+
+ +
diff --git a/apps/www/_blog/2024-12-04-cli-v2-config-as-code.mdx b/apps/www/_blog/2024-12-04-cli-v2-config-as-code.mdx new file mode 100644 index 0000000000000..0cf9754b3efea --- /dev/null +++ b/apps/www/_blog/2024-12-04-cli-v2-config-as-code.mdx @@ -0,0 +1,178 @@ +--- +title: 'Supabase CLI v2: Config as Code' +description: Commit the configuration for all of your Projects and Branches into version control. +author: qiao +image: launch-week-13/supabase-cli-v2-config-as-code/og.jpg +thumb: launch-week-13/supabase-cli-v2-config-as-code/thumb.jpg +categories: + - product +tags: + - launch-week +date: '2024-12-04' +toc_depth: 3 +launchweek: '13' +--- + +We have released Supabase CLI v2 today, adding support for Configuration as Code. + +This means you can commit the configuration for all of your Projects and Branches into version control (like git) for reproducible environments for your entire team. + +## Using the CLI in CI/CD pipelines + +The Supabase CLI started as a way to bootstrap the entire Supabase stack on your local machine. It uses exactly the same infra as our hosted platform, giving you unlimited Supabase projects for local testing and offline usage. + +In the last 2 years, the CLI has grown to more than 180,000 weekly installs. Nearly 85% of these come from Continuous Integration/Deployment environments like GitHub Actions. Some of the popular CI/CD use cases include migrating production databases, deploying functions, and running pgTAP tests. With this in mind, we started focusing on the CLI as a deployment tool for the v2 release. + +## Configuration as Code using the Supabase CLI + + + +**Configuration as Code** is a practice where infrastructure configuration is managed and versioned in source control using code or declarative files. It allows for automation, consistency, and repeatability. Some examples include Terraform and Docker Compose. It offers several key features: + +- **Version Control**: Configurations are stored in repositories like Git, enabling collaboration and history tracking. +- **Reproducibility**: You can recreate environments from code, avoiding manual drift. +- **Automation**: Tools apply configurations automatically, reducing human error. + + + +Our CLI’s Configuration as Code feature is an opinionated setup using a human readable `config.toml` file. + +You can make deployments consistent and repeatable by promoting Edge Functions, Storage objects, and other services from preview environments to staging and production. + +To demonstrate this workflow, let’s use the `supabase.com` website as an example. It’s hosted on Vercel with [Supabase Branching](/docs/guides/deployment/branching) enabled for development. If you are not using Branching, a similar setup can be achieved using GitHub Actions. + + + +Before changing any project configuration, it’s a good idea to verify that your remote config has not drifted. + +This can be done by running `supabase link` command locally which diffs your entire local `config.toml` with your remote project settings. + + + +### Managing Auth Config + +We use Vercel Previews for our frontend. To configure the Auth service of Supabase branches to support login for any Vercel preview URL, we declare a wildcard for the `additional_redirect_urls` in auth config: + +```toml +[auth] +additional_redirect_urls = [ + "https://*-supabase.vercel.app/*/*", + "https://supabase.com/*/*", + "http://localhost:3000/*/*", +] +``` + +View the [Auth config](/docs/guides/local-development/cli/config#auth-config) docs. + +### Managing Edge Functions + +The Supabase website uses several [Edge Functions](https://github.com/supabase/supabase/tree/master/supabase/functions) for AI docs, search embeddings, and image generation for launch week tickets. To configure automatic deployment of `search-embeddings` function, we add the following block to `config.toml`: + +```toml +[functions.search-embeddings] +verify_jwt = false +``` + +If you are using a monorepo (like the [@supabase/supabase](https://github.com/supabase/supabase) Github repository), you may also want to customize the paths to your function’s entrypoint and import map files. This is especially useful for code sharing between your frontend application and Edge Functions. + + + +Edge Function secrets must be manually added to branches as of this release. We plan to support setting Function secrets at deploy time in the near future. + + + +View the [Edge Functions config](/docs/guides/local-development/cli/config#edge-functions-config) docs. + +### Managing Storage Objects + +The [images and fonts](https://supabase.com/dashboard/project/xguihxuzqibwxjnimxev/storage/buckets/images) for all launch week tickets are stored in Supabase Storage. These assets are distributed to CDNs around the world to improve latency for visitors to our website. + +When developing locally, we can add a `[storage.buckets]` block to `config.toml` so that files in `supabase/assets` directory are automatically uploaded to Supabase Storage. + +```toml +[storage.buckets.assets] +objects_path = "./assets" +``` + +In our case, the assets are small enough (< 1MB) to be committed and tracked in git. This allows branching to automatically seed these objects to Supabase Storage for preview. Larger files like videos are best uploaded to Supabase Storage via AWS S3 CLI. + +View the [Storage config](/docs/guides/local-development/cli/config#storage-config) docs. + +### Managing Database Settings and Webhooks + +While Supabase manages the Postgres default settings based on your database compute size, sometimes you need to tweak these settings yourself. Using the `config.toml` file, we can easily update and keep track of database settings. + +```toml +[db.settings] +track_commit_timestamp = true +``` + +Our Management API automatically figures out if one or more parameters require restarting the database. If not, the config will be applied by simply sending `SIGUP` to Postgres process. + +Moreover, you can now enable database webhooks using `[experimental]` config block. This feature allows your database to call HTTP endpoints directly from Postgres functions. + +```toml +[experimental.webhooks] +enabled = true +``` + +To create a webhook, simply add a new [schema migration](https://github.com/supabase/supabase/tree/master/supabase/migrations) file with the before or after triggers for the tables you want to listen on. + +View the [Database config](/docs/guides/local-development/cli/config#database-config) docs. + +## Managing Branches and multiple “remotes” + +If you have [Branching](/docs/guides/deployment/branching#enable-supabase-branching) enabled in your project, your settings in `config.toml` are automatically synced to all your ephemeral branches. This works because we maintain a one-to-one mapping between your git branch and Supabase branch. + +To make a config change to your Supabase branch, simply update config.toml and push to GitHub. Our runner will pick up the diff and apply it to the corresponding Supabase branch. + +If you need to configure specific settings for a single persistent branch, you can declare them using `[remotes]` block of your config by providing its project ID. For example, the following config declares a separate seed script just for your staging environment. + +```toml +[remotes.staging] +project_id = "your-project-ref" + +[remotes.staging.db.seed] +sql_paths = ["./seeds/staging.sql"] +``` + +Since the `project_id` field must refer to an existing branch, you won’t be able to provision and configure a persistent branch in the same commit. Instead, always provision a persistent branch first using the CLI command so you can add the project ID returned to `config.toml`. + +```bash +$ supabase --experimental branches create --persistent +Do you want to create a branch named develop? [Y/n] +``` + +When merging a PR to any persistent branch, our runner checks and logs any configuration changes before applying them to the target remote. If you didn’t declare any remotes or provided the the wrong project ID, the whole configuration step would be skipped. + +All other config options are also available in the remotes block. + +## Getting started + +To start using configuration as code, you may follow [our guide](/docs/guides/deployment/branching#how-to-use-supabase-branching) to connect a GitHub repository to your Supabase project and enable Supabase Branching. + +Alternatively, you can get started with the Supabase CLI today: `supabase config push` + +### Installing + +Install the Supabase CLI: [docs](/docs/guides/local-development/cli/getting-started#installing-the-supabase-cli). + +### Upgrading + +Upgrade your CLI: [docs](/docs/guides/local-development/cli/getting-started#updating-the-supabase-cli). + +### Breaking changes + +There are no breaking changes in v2. + +### Contributors + +The CLI Team: [Qiao](https://github.com/sweatybridge), [Andrew](https://github.com/avallete) + +The Supabase Team: [Bobbie](https://github.com/soedirgo), [Lakshan](https://github.com/laktek), [Joel](https://github.com/J0), [Filipe](https://github.com/filipecabaco), [TzeYiing](https://github.com/Ziinc), [Div](https://github.com/darora), [Ant](https://github.com/awalias), [Thor](https://github.com/thorwebdev), [Wenbo](https://github.com/w3b6x9), [Kangming](https://github.com/kangmingtay), [Ivan](https://github.com/ivasilov), [Kevin](https://github.com/KevinBrolly), [Long](https://github.com/loong), [Stojan](https://github.com/hf), [Kamil](https://github.com/kamilogorek), [Inian](https://github.com/inian), [Greg](https://github.com/gregnr), [Fabrizio](https://github.com/fenos), [Chris](https://github.com/encima), [Julien](https://github.com/jgoux), [Terry](https://github.com/saltcod), [Egor](https://github.com/egor-romanov), [Joshen](https://github.com/joshenlim), [Steve](https://github.com/steve-chavez), [Guilherme](https://github.com/grdsdev), [Crispy](https://github.com/Crispy1975), [Bo](https://github.com/burmecia), [Rodrigo](https://github.com/mansueli), [Beng](https://github.com/thebengeu), [Copple](https://github.com/kiwicopple) + +With contributions from: [@nyannyacha](https://github.com/nyannyacha), [@grschafer](https://github.com/grschafer), [@osaxma](https://github.com/osaxma), [@theo-m](https://github.com/theo-m), [@kandros](https://github.com/kandros), [@silentworks](https://github.com/silentworks), [@Ananya2001-an](https://github.com/Ananya2001-an), [@Wakeful-Cloud](https://github.com/Wakeful-Cloud), [@snorremd](https://github.com/snorremd), [@S96EA](https://github.com/S96EA), [@wilhuff](https://github.com/wilhuff), [@djhi](https://github.com/djhi), [@FelixZY](https://github.com/FelixZY), [@dagingaa](https://github.com/dagingaa), [@ibilalkayy](https://github.com/ibilalkayy), [@akoenig](https://github.com/akoenig), [@mclean25](https://github.com/mclean25), [@pvanliefland](https://github.com/pvanliefland), [@zlepper](https://github.com/zlepper), [@ruggi99](https://github.com/ruggi99), [@ryankazokas](https://github.com/ryankazokas), [@yahsan2](https://github.com/yahsan2), [@kinolaev](https://github.com/kinolaev), [@simbas](https://github.com/simbas), [@SoraKumo001](https://github.com/SoraKumo001), [@oxcabe](https://github.com/oxcabe), [@PaulRosset](https://github.com/PaulRosset), [@paolodesa](https://github.com/paolodesa), [@eifr](https://github.com/eifr), [@NixBiks](https://github.com/NixBiks), [@nrayburn-tech](https://github.com/nrayburn-tech), [@mosnicholas](https://github.com/mosnicholas), [@NatoNathan](https://github.com/NatoNathan), [@Myzel394](https://github.com/Myzel394), [@mikelhamer](https://github.com/mikelhamer), [@zaerald](https://github.com/zaerald), [@tiniscule](https://github.com/tiniscule), [@samuba](https://github.com/samuba), [@rhnaxifg4y](https://github.com/rhnaxifg4y), [@redraskal](https://github.com/redraskal), [@madx](https://github.com/madx), [@kouwasi](https://github.com/kouwasi), [@etzelc](https://github.com/etzelc), [@arvalaan](https://github.com/arvalaan), [@arika0093](https://github.com/arika0093), [@zachblume](https://github.com/zachblume), [@yashas-hm](https://github.com/yashas-hm), [@vbaluch](https://github.com/vbaluch), [@dshukertjr](https://github.com/dshukertjr), [@tmountain](https://github.com/tmountain), [@tobowers](https://github.com/tobowers), [@tim-dianahr](https://github.com/tim-dianahr), [@StanGirard](https://github.com/StanGirard), [@chreck](https://github.com/chreck), [@chaoky](https://github.com/chaoky), [@carlobeltrame](https://github.com/carlobeltrame), [@bhaan](https://github.com/bhaan), [@bastiaanv](https://github.com/bastiaanv), [@code-withAshish](https://github.com/code-withAshish), [@ashtable](https://github.com/ashtable), [@n0tank3sh](https://github.com/n0tank3sh), [@asevich](https://github.com/asevich), [@aloisklink](https://github.com/aloisklink), [@alinjie](https://github.com/alinjie), [@codesnik](https://github.com/codesnik), [@alexanderl19](https://github.com/alexanderl19), [@alex-ketch](https://github.com/alex-ketch), [@adrientiburce](https://github.com/adrientiburce), [@abeisleem](https://github.com/abeisleem), [@AaronDewes](https://github.com/AaronDewes), [@beeme1mr](https://github.com/beeme1mr), [@isaif](https://github.com/isaif), [@maxkostow](https://github.com/maxkostow), [@Marviel](https://github.com/Marviel), [@xmliszt](https://github.com/xmliszt), [@LautaroJayat](https://github.com/LautaroJayat), [@everzet](https://github.com/everzet), [@kartikk-k](https://github.com/kartikk-k), [@j1philli](https://github.com/j1philli), [@disjukr](https://github.com/disjukr), [@jibin2706](https://github.com/jibin2706), [@felixgabler](https://github.com/felixgabler), [@eleijonmarck](https://github.com/eleijonmarck), [@activenode](https://github.com/activenode), [@jibsaramnim](https://github.com/jibsaramnim), [@byudaniel](https://github.com/byudaniel), [@clarkevandenhoven](https://github.com/clarkevandenhoven) + +## Conclusion + +Managing your project environments often go beyond schema migrations when your entire backend runs on Supabase. With Supabase CLI v2, you can easily manage these development environments using a configuration file to ensure a consistent development experience between all services in staging and production. diff --git a/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx b/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx index 03893f1521fa1..b825a3827d308 100644 --- a/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx +++ b/apps/www/components/LaunchWeek/13/Releases/data/lw13_build_stage.tsx @@ -2,6 +2,7 @@ import { ReactNode } from 'react' import { type ClassValue } from 'clsx' +import { GitBranch } from 'lucide-react' export interface AdventDay { icon?: ReactNode // use svg jsx with 34x34px viewport @@ -63,12 +64,19 @@ export const days: AdventDay[] = [ ), }, { - title: '', - description: '', - id: '', - is_shipped: false, - links: [], - icon: null, + title: 'Supabase CLI v2: Config as Code', + description: + 'Commit the configuration for all of your Projects and Branches into version control.', + id: 'cli', + is_shipped: true, + links: [ + { + url: '/blog/cli-v2-config-as-code', + label: 'Blog post', + target: '_blank', + }, + ], + icon: , }, { title: '', diff --git a/apps/www/lib/mdx/mdxComponents.tsx b/apps/www/lib/mdx/mdxComponents.tsx index 2f9c46f534017..c5c2a3f8c514b 100644 --- a/apps/www/lib/mdx/mdxComponents.tsx +++ b/apps/www/lib/mdx/mdxComponents.tsx @@ -37,9 +37,16 @@ const LinkComponent = (props: PropsWithChildren) => ( ) -const BlogCollapsible = ({ title, ...props }: { title: string }) => { +const BlogCollapsible = ({ + title, + containerClassName, + ...props +}: { + title: string + containerClassName?: string +}) => { return ( - + API +NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321 +NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0 +NEXT_SITE_URL=http://localhost:3000 +NEXT_REDIRECT_URLS=http://localhost:3000/ diff --git a/examples/todo-list/nextjs-todo-list/.env.local.example b/examples/todo-list/nextjs-todo-list/.env.local.example deleted file mode 100644 index 477da3d401d67..0000000000000 --- a/examples/todo-list/nextjs-todo-list/.env.local.example +++ /dev/null @@ -1,3 +0,0 @@ -# Update these with your Supabase details from your project settings > API -NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co -NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key \ No newline at end of file diff --git a/examples/todo-list/nextjs-todo-list/.env.production.example b/examples/todo-list/nextjs-todo-list/.env.production.example new file mode 100644 index 0000000000000..05667daec5a37 --- /dev/null +++ b/examples/todo-list/nextjs-todo-list/.env.production.example @@ -0,0 +1,6 @@ +# Get these from your API settings: https://supabase.com/dashboard/project/_/settings/api +NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co +NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key +# Get this from your Vercel project settings +NEXT_SITE_URL=https://..vercel.app/ +NEXT_REDIRECT_URLS=https://*.vercel.app/,https://*.vercel.app/** diff --git a/examples/todo-list/nextjs-todo-list/README.md b/examples/todo-list/nextjs-todo-list/README.md index 2b04f4ffeae99..2535f8d9e22df 100644 --- a/examples/todo-list/nextjs-todo-list/README.md +++ b/examples/todo-list/nextjs-todo-list/README.md @@ -13,8 +13,6 @@ The Vercel deployment will guide you through creating a Supabase account and pro [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Ftodo-list%2Fnextjs-todo-list&project-name=supabase-nextjs-todo-list&repository-name=supabase-nextjs-todo-list&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6&external-id=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Ftodo-list%2Fnextjs-todo-list) -## Build from scratch - ### 1. Create new project Sign up to Supabase - [https://supabase.com/dashboard](https://supabase.com/dashboard) and create a new project. Wait for your database to start. @@ -35,6 +33,48 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your ## Supabase details +### Using a Remote Supabase Project + +1. Create or select a project on [Supabase Dashboard](https://supabase.com/dashboard). +2. Copy and fill the dotenv template `cp .env.production.example .env.production` +3. Link the local project and merge the local configuration with the remote one: + +```bash +SUPABASE_ENV=production npx supabase@latest link --project-ref +``` + +3. Sync the configuration: + +```bash +SUPABASE_ENV=production npx supabase@latest config push +``` + +4. Sync the database schema: + +```bash +SUPABASE_ENV=production npx supabase@latest db push +``` + +## Vercel Preview with Branching + +Supabase integrates seamlessly with Vercel's preview branches, giving each branch a dedicated Supabase project. This setup allows testing database migrations or service configurations safely before applying them to production. + +### Steps + +1. Ensure the Vercel project is linked to a Git repository. +2. Configure the "Preview" environment variables in Vercel: + + - `NEXT_PUBLIC_SUPABASE_URL` + - `NEXT_PUBLIC_SUPABASE_ANON_KEY` + +3. Create a new branch, make changes (e.g., update `max_frequency`), and push the branch to Git. + - Open a pull request to trigger Vercel + Supabase integration. + - Upon successful deployment, the preview environment reflects the changes. + +![Preview Checks](https://github.com/user-attachments/assets/db688cc2-60fd-4463-bbed-e8ecc11b1a39) + +--- + ### Postgres Row level security This project uses very high-level Authorization using Postgres' Row Level Security. diff --git a/examples/todo-list/nextjs-todo-list/supabase/.gitignore b/examples/todo-list/nextjs-todo-list/supabase/.gitignore index 773c7c3e0a15a..a3ad88055b7a8 100644 --- a/examples/todo-list/nextjs-todo-list/supabase/.gitignore +++ b/examples/todo-list/nextjs-todo-list/supabase/.gitignore @@ -1,3 +1,4 @@ # Supabase .branches .temp +.env diff --git a/examples/todo-list/nextjs-todo-list/supabase/config.toml b/examples/todo-list/nextjs-todo-list/supabase/config.toml index e3274f86e336b..60860aa0ffecb 100644 --- a/examples/todo-list/nextjs-todo-list/supabase/config.toml +++ b/examples/todo-list/nextjs-todo-list/supabase/config.toml @@ -1,14 +1,15 @@ -# A string used to distinguish different Supabase projects on the same host. Defaults to the working -# directory name when running `supabase init`. +# A string used to distinguish different Supabase projects on the same host. Defaults to the +# working directory name when running `supabase init`. project_id = "nextjs-todo-list" [api] +enabled = true # Port to use for the API URL. port = 54321 # Schemas to expose in your API. Tables, views and stored procedures in this schema will get API -# endpoints. public and storage are always included. -schemas = ["public", "storage", "graphql_public"] -# Extra schemas to add to the search_path of every request. public is always included. +# endpoints. `public` and `graphql_public` are included by default. +schemas = ["public", "graphql_public"] +# Extra schemas to add to the search_path of every request. extra_search_path = ["public", "extensions"] # The maximum number of rows returns from a view, table, or stored procedure. Limits payload size # for accidental or malicious requests. @@ -17,37 +18,39 @@ max_rows = 1000 [db] # Port to use for the local database URL. port = 54322 +# Port used by db diff command to initialize the shadow database. +shadow_port = 54320 # The database major version to use. This has to be the same as your remote database's. Run `SHOW # server_version;` on the remote database to check. major_version = 15 -[studio] -# Port to use for Supabase Studio. -port = 54323 - -# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they -# are monitored, and you can view the emails that would have been sent from the web interface. -[inbucket] -# Port to use for the email testing server web interface. -port = 54324 -smtp_port = 54325 -pop3_port = 54326 - -[storage] -# The maximum file size allowed (e.g. "5MB", "500KB"). -file_size_limit = "50MiB" +[db.seed] +# If enabled, seeds the database after migrations during a db reset. +enabled = false +# Specifies an ordered list of seed files to load during db reset. +# Supports glob patterns relative to supabase directory. For example: +# sql_paths = ['./seeds/*.sql', '../project-src/seeds/*-load-testing.sql'] [auth] +enabled = true # The base URL of your website. Used as an allow-list for redirects and for constructing URLs used # in emails. -site_url = "http://localhost:3000" +site_url = "env(NEXT_SITE_URL)" # A list of *exact* URLs that auth providers are permitted to redirect to post authentication. -additional_redirect_urls = ["https://localhost:3000"] -# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 seconds (one -# week). +additional_redirect_urls = ["env(NEXT_REDIRECT_URLS)"] +# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week). jwt_expiry = 3600 +# If disabled, the refresh token will never expire. +enable_refresh_token_rotation = true +# Allows refresh tokens to be reused after expiry, up to the specified interval in seconds. +# Requires enable_refresh_token_rotation = true. +refresh_token_reuse_interval = 10 # Allow/disallow new user signups to your project. enable_signup = true +# Allow/disallow anonymous sign-ins to your project. +enable_anonymous_sign_ins = false +# Allow/disallow testing manual linking of accounts +enable_manual_linking = false [auth.email] # Allow/disallow new user signups via email to your project. @@ -56,27 +59,12 @@ enable_signup = true # addresses. If disabled, only the new email is required to confirm. double_confirm_changes = true # If enabled, users need to confirm their email address before signing in. -enable_confirmations = false - -# Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`, -# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`, -# `twitter`, `slack`, `spotify`, `workos`, `zoom`. -[auth.external.apple] -enabled = false -client_id = "" -secret = "" -# Overrides the default auth redirectUrl. -redirect_uri = "" -# Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure, -# or any other third-party OIDC providers. -url = "" - -[analytics] -enabled = false -port = 54327 -vector_port = 54328 -# Setup BigQuery project to enable log viewer on local development stack. -# See: https://supabase.com/docs/guides/getting-started/local-development#enabling-local-logging -gcp_project_id = "" -gcp_project_number = "" -gcp_jwt_path = "supabase/gcloud.json" +enable_confirmations = true +# If enabled, users will need to reauthenticate or have logged in recently to change their password. +secure_password_change = false +# Controls the minimum amount of time that must pass before sending another signup confirmation or password reset email. +max_frequency = "1m0s" +# Number of characters used in the email OTP. +otp_length = 6 +# Number of seconds before the email OTP expires (defaults to 1 hour). +otp_expiry = 3600 diff --git a/examples/todo-list/nextjs-todo-list/supabase/seed.sql b/examples/todo-list/nextjs-todo-list/supabase/seed.sql deleted file mode 100644 index e69de29bb2d1d..0000000000000