Repository: supabase/supabase
File: apps/studio/pages/authorize.tsx (TypeScript)

Code before:
    },
  })

  const onApproveRequest = form.handleSubmit((values) => {
    if (!auth_id) {
      return toast.error('Unable to approve request: auth_id is missing ')
    }

    setIsApproving(true)
    approveRequest(
      { id: auth_id, slug: values.selectedOrgSlug },
      { onError: () => setIsApproving(false) }
    )
  })

  const onDeclineRequest = async () => {
    if (!auth_id) {
      return toast.error('Unable to decline request: auth_id is missing ')
    }

    // Guard: ensure organizations are loaded
    if (!organizations || organizations.length === 0) {
      return toast.error('Unable to decline request: Organizations not loaded')
    }

    const slugToUse = selectedOrgSlug || organization_slug || organizations[0]?.slug
    if (!slugToUse) {
      return toast.error('Unable to decline request: No organization context available')
    }

    setIsDeclining(true)
    declineRequest({ id: auth_id, slug: slugToUse }, { onError: () => setIsDeclining(false) })
  }

  useEffect(() => {
    if (isSuccessOrganizations && organizations.length > 0) {
      if (organization_slug) {
        const preselected = organizations.find(({ slug }) => slug === organization_slug)?.slug
        if (preselected) form.setValue('selectedOrgSlug', preselected)
      } else if (!form.getValues('selectedOrgSlug') && organizations.length === 1) {
        // If user only has one organization and none pre-selected via URL, default to it
        form.setValue('selectedOrgSlug', organizations[0].slug)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccessOrganizations])

  if (isLoading) {
    return (
      <Card>
        <CardHeader>Authorize API access</CardHeader>

Review comment (suggestion):
I'm thinking it would be better to stick with `values.selectedOrgSlug`. With all the fallbacks here, it might be easy to get into a bizarre state where the user has no idea what they're declining

Code after:
    },
  })

  const onApproveRequest = form.handleSubmit((values) => {
    if (!auth_id) {
      return toast.error('Unable to approve request: auth_id is missing ')
    }

    setIsApproving(true)
    approveRequest(
      { id: auth_id, slug: values.selectedOrgSlug },
      { onError: () => setIsApproving(false) }
    )
  })

  const onDeclineRequest = form.handleSubmit((values) => {
    if (!auth_id) {
      return toast.error('Unable to decline request: auth_id is missing ')
    }

    setIsDeclining(true)
    declineRequest(
      { id: auth_id, slug: values.selectedOrgSlug },
      { onError: () => setIsDeclining(false) }
    )
  })

  useEffect(() => {
    if (isSuccessOrganizations && organizations.length > 0) {
      if (organization_slug) {
        const preselected = organizations.find(({ slug }) => slug === organization_slug)?.slug
        if (preselected) form.setValue('selectedOrgSlug', preselected)
      } else if (!form.getValues('selectedOrgSlug') && organizations.length === 1) {
        // If user only has one organization and none pre-selected via URL, default to it
        form.setValue('selectedOrgSlug', organizations[0].slug)
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSuccessOrganizations])

  if (isLoading) {
    return (
      <Card>
        <CardHeader>Authorize API access</CardHeader>
        <CardContent>
          <div className="flex gap-x-4 items-center">
            <ShimmeringLoader className="w-12 h-12 md:w-14 md:h-14" />
            <ShimmeringLoader className="h-6 w-64" />
          </div>

          <div className="flex flex-col gap-y-2 mt-4">