Revert "Update auth hooks to use new endpoint and add perms checking" (supabase#29893)

Revert "Update auth hooks to use new endpoint and add perms checking (supabase#29870)" This reverts commit a3e1fb2.

Author: joshenlim

apps/studio/components/interfaces/Auth/Hooks/AddHookDropdown.tsx

@@ -16,6 +16,7 @@ import {
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
+ SheetSection,
 } from 'ui'
 import { HOOKS_DEFINITIONS, HOOK_DEFINITION_TITLE, Hook } from './hooks.constants'
 import { extractMethod, isValidHook } from './hooks.utils'
@@ -37,7 +38,7 @@ export const AddHookDropdown = ({
  { enabled: IS_PLATFORM }
  )
  const { data: authConfig } = useAuthConfigQuery({ projectRef })
- const canUpdateAuthHook = useCheckPermissions(PermissionAction.AUTH_EXECUTE, '*')
+ const canUpdateConfig = useCheckPermissions(PermissionAction.UPDATE, 'custom_config_gotrue')
 
  const hooks: Hook[] = HOOKS_DEFINITIONS.map((definition) => {
  return {
@@ -56,7 +57,7 @@ export const AddHookDropdown = ({
  const isTeamsOrEnterprisePlan =
  subscription?.plan.id === 'team' || subscription?.plan.id === 'enterprise'
 
- if (!canUpdateAuthHook) {
+ if (!canUpdateConfig) {
  return (
  <ButtonTooltip
  disabled
@@ -77,7 +78,7 @@ export const AddHookDropdown = ({
  {buttonText}
  </Button>
  </DropdownMenuTrigger>
- <DropdownMenuContent className="w-76" align="end">
+ <DropdownMenuContent className="w-76 p-0" align="end">
  <div>
  {nonEnterpriseHookOptions.map((h) => (
  <DropdownMenuItem key={h.title} onClick={() => onSelectHook(h.title)}>
@@ -86,7 +87,7 @@ export const AddHookDropdown = ({
  ))}
  </div>
 
- <DropdownMenuSeparator />
+ <DropdownMenuSeparator className="my-0" />
 
  {!isTeamsOrEnterprisePlan && (
  <DropdownMenuLabel className="grid gap-1 bg-surface-200">

apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx

@@ -14,7 +14,7 @@ import CodeEditor from 'components/ui/CodeEditor/CodeEditor'
 import FunctionSelector from 'components/ui/FunctionSelector'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { AuthConfigResponse } from 'data/auth/auth-config-query'
-import { useAuthHooksUpdateMutation } from 'data/auth/auth-hooks-update-mutation'
+import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { useFlag } from 'hooks/ui/useFlag'
 import {
@@ -42,10 +42,10 @@ import { extractMethod, getRevokePermissionStatements, isValidHook } from './hoo
 
 interface CreateHookSheetProps {
  visible: boolean
- title: HOOK_DEFINITION_TITLE | null
- authConfig: AuthConfigResponse
  onClose: () => void
  onDelete: () => void
+ title: HOOK_DEFINITION_TITLE | null
+ authConfig: AuthConfigResponse
 }
 
 export function generateAuthHookSecret() {
@@ -109,13 +109,14 @@ const FormSchema = z
 
 export const CreateHookSheet = ({
  visible,
- title,
- authConfig,
  onClose,
  onDelete,
+ title,
+ authConfig,
 }: CreateHookSheetProps) => {
  const { ref: projectRef } = useParams()
  const { project } = useProjectContext()
+ const { mutate: updateAuthConfig, isLoading: isUpdatingConfig } = useAuthConfigUpdateMutation()
  const httpsAuthHooksEnabled = useFlag('httpsAuthHooksEnabled')
 
  const definition = useMemo(
@@ -154,6 +155,45 @@ export const CreateHookSheet = ({
  },
  })
 
+ useEffect(() => {
+ if (visible) {
+ if (definition) {
+ const values = extractMethod(
+ authConfig?.[definition.uriKey] || '',
+ authConfig?.[definition.secretsKey] || ''
+ )
+
+ form.reset({
+ hookType: definition.title,
+ enabled: authConfig?.[definition.enabledKey] || false,
+ selectedType: values.type,
+ httpsValues: {
+ url: (values.type === 'https' && values.url) || '',
+ secret: (values.type === 'https' && values.secret) || '',
+ },
+ postgresValues: {
+ schema: (values.type === 'postgres' && values.schema) || 'public',
+ functionName: (values.type === 'postgres' && values.functionName) || '',
+ },
+ })
+ } else {
+ form.reset({
+ hookType: title || '',
+ enabled: true,
+ selectedType: 'postgres',
+ httpsValues: {
+ url: '',
+ secret: '',
+ },
+ postgresValues: {
+ schema: 'public',
+ functionName: '',
+ },
+ })
+ }
+ }
+ }, [authConfig, title, visible, definition])
+
  const values = form.watch()
 
  const statements = useMemo(() => {
@@ -182,23 +222,6 @@ export const CreateHookSheet = ({
  return permissionChanges
  }, [hook, values.postgresValues.schema, values.postgresValues.functionName])
 
- const { mutate: updateAuthHooks, isLoading: isUpdatingAuthHooks } = useAuthHooksUpdateMutation({
- onSuccess: () => {
- toast.success(`Successfully created ${values.hookType}.`)
- if (statements.length > 0) {
- executeSql({
- projectRef,
- connectionString: project!.connectionString,
- sql: statements.join('\n'),
- })
- }
- onClose()
- },
- onError: (error) => {
- toast.error(`Failed to create hook: ${error.message}`)
- },
- })
-
  const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (values) => {
  if (!project) return console.error('Project is required')
  const definition = HOOKS_DEFINITIONS.find((d) => values.hookType === d.title)
@@ -224,47 +247,27 @@ export const CreateHookSheet = ({
  [secretsLabel]: values.selectedType === 'https' ? values.httpsValues.secret : null,
  }
 
- updateAuthHooks({ projectRef: projectRef!, config: payload })
- }
-
- useEffect(() => {
- if (visible) {
- if (definition) {
- const values = extractMethod(
- authConfig?.[definition.uriKey] || '',
- authConfig?.[definition.secretsKey] || ''
- )
-
- form.reset({
- hookType: definition.title,
- enabled: authConfig?.[definition.enabledKey] || false,
- selectedType: values.type,
- httpsValues: {
- url: (values.type === 'https' && values.url) || '',
- secret: (values.type === 'https' && values.secret) || '',
- },
- postgresValues: {
- schema: (values.type === 'postgres' && values.schema) || 'public',
- functionName: (values.type === 'postgres' && values.functionName) || '',
- },
- })
- } else {
- form.reset({
- hookType: title || '',
- enabled: true,
- selectedType: 'postgres',
- httpsValues: {
- url: '',
- secret: '',
- },
- postgresValues: {
- schema: 'public',
- functionName: '',
- },
- })
+ updateAuthConfig(
+ { projectRef: projectRef!, config: payload },
+ {
+ onSuccess: () => {
+ toast.success(`Successfully created ${values.hookType}.`)
+ if (statements.length > 0) {
+ executeSql({
+ projectRef,
+ connectionString: project.connectionString,
+ sql: statements.join('\n'),
+ })
+ }
+ onClose()
+ },
+ onError: (error) => {
+ toast.error(`Failed to create hook: ${error.message}`)
+ onClose()
+ },
  }
- }
- }, [authConfig, title, visible, definition])
+ )
+ }
 
  return (
  <Sheet open={visible} onOpenChange={() => onClose()}>
@@ -489,16 +492,16 @@ export const CreateHookSheet = ({
  </div>
  )}
 
- <Button disabled={isUpdatingAuthHooks} type="default" onClick={() => onClose()}>
+ <Button disabled={isUpdatingConfig} type="default" onClick={() => onClose()}>
  Cancel
  </Button>
  <Button
  form={FORM_ID}
  htmlType="submit"
- disabled={isUpdatingAuthHooks}
- loading={isUpdatingAuthHooks}
+ disabled={isUpdatingConfig}
+ loading={isUpdatingConfig}
  >
- {isCreating ? 'Create hook' : 'Update hook'}
+ {isCreating ? 'Create' : 'Update'}
  </Button>
  </SheetFooter>
  </SheetContent>

apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx

@@ -1,20 +1,18 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Check, Webhook } from 'lucide-react'
 import { Badge, Input } from 'ui'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { copyToClipboard } from 'lib/helpers'
 import { Hook } from './hooks.constants'
 
 interface HookCardProps {
  hook: Hook
+ canUpdateConfig: boolean
+ onToggle: (enabled: boolean) => void
  onSelect: () => void
 }
 
-export const HookCard = ({ hook, onSelect }: HookCardProps) => {
- const canUpdateAuthHook = useCheckPermissions(PermissionAction.AUTH_EXECUTE, '*')
-
+export const HookCard = ({ hook, canUpdateConfig, onToggle, onSelect }: HookCardProps) => {
  return (
  <div className="bg-surface-100 border-default overflow-hidden border shadow px-5 py-4 flex flex-row first:rounded-t-md last:rounded-b-md space-x-4">
  <div className="">
@@ -95,7 +93,7 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
  <div className="flex flex-row gap-2">
  <ButtonTooltip
  type="default"
- disabled={!canUpdateAuthHook}
+ disabled={!canUpdateConfig}
  onClick={() => onSelect()}
  tooltip={{
  content: {