chore: disable role impersonation for edge functions (supabase#36599)

* chore: disable role impersonation for edge functions

* allow service role and anon

Author: alaister

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionTesterSheet.tsx

@@ -15,7 +15,10 @@ import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { IS_PLATFORM } from 'lib/constants'
 import { prettifyJSON } from 'lib/helpers'
 import { getRoleImpersonationJWT } from 'lib/role-impersonation'
-import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
+import {
+  RoleImpersonationStateContextProvider,
+  useGetImpersonatedRoleState,
+} from 'state/role-impersonation-state'
 import {
   Badge,
   Button,
@@ -416,7 +419,12 @@ export const EdgeFunctionTesterSheet = ({ visible, onClose }: EdgeFunctionTester
 
             <SheetFooter className="px-5 py-3 border-t">
               <div className="flex items-center gap-2">
-                <RoleImpersonationPopover portal={false} />
+                {/* [Alaister]: We're using a fresh context here as edge functions don't allow impersonating users. */}
+                <RoleImpersonationStateContextProvider
+                  key={`role-impersonation-state-${projectRef}`}
+                >
+                  <RoleImpersonationPopover portal={false} disallowAuthenticatedOption={true} />
+                </RoleImpersonationStateContextProvider>
                 <Button
                   type="primary"
                   htmlType="submit"

apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationPopover.tsx

@@ -12,13 +12,15 @@ export interface RoleImpersonationPopoverProps {
   serviceRoleLabel?: string
   variant?: 'regular' | 'connected-on-right' | 'connected-on-left' | 'connected-on-both'
   align?: 'center' | 'start' | 'end'
+  disallowAuthenticatedOption?: boolean
 }
 
 const RoleImpersonationPopover = ({
   portal = true,
   serviceRoleLabel,
   variant = 'regular',
   align = 'end',
+  disallowAuthenticatedOption = false,
 }: RoleImpersonationPopoverProps) => {
   const state = useRoleImpersonationStateSnapshot()
 
@@ -64,7 +66,10 @@ const RoleImpersonationPopover = ({
         side="bottom"
         align={align}
       >
-        <RoleImpersonationSelector serviceRoleLabel={serviceRoleLabel} />
+        <RoleImpersonationSelector
+          serviceRoleLabel={serviceRoleLabel}
+          disallowAuthenticatedOption={disallowAuthenticatedOption}
+        />
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>
   )

apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationSelector.tsx

@@ -10,11 +10,13 @@ import UserImpersonationSelector from './UserImpersonationSelector'
 export interface RoleImpersonationSelectorProps {
   serviceRoleLabel?: string
   padded?: boolean
+  disallowAuthenticatedOption?: boolean
 }
 
 const RoleImpersonationSelector = ({
   serviceRoleLabel,
   padded = true,
+  disallowAuthenticatedOption = false,
 }: RoleImpersonationSelectorProps) => {
   const state = useRoleImpersonationStateSnapshot()
 
@@ -81,38 +83,47 @@ const RoleImpersonationSelector = ({
               icon={<AnonIcon isSelected={selectedOption === 'anon'} />}
             />
 
-            <RoleImpersonationRadio
-              value="authenticated"
-              isSelected={
-                selectedOption === 'authenticated' &&
-                (isAuthenticatedOptionFullySelected || 'partially')
-              }
-              onSelectedChange={onSelectedChange}
-              icon={<AuthenticatedIcon isSelected={selectedOption === 'authenticated'} />}
-            />
+            {!disallowAuthenticatedOption && (
+              <RoleImpersonationRadio
+                value="authenticated"
+                isSelected={
+                  selectedOption === 'authenticated' &&
+                  (isAuthenticatedOptionFullySelected || 'partially')
+                }
+                onSelectedChange={onSelectedChange}
+                icon={<AuthenticatedIcon isSelected={selectedOption === 'authenticated'} />}
+              />
+            )}
           </fieldset>
         </form>
 
         {selectedOption === 'service_role' && (
           <p className="text-foreground-light text-sm">
-            The default Postgres/superuser role. This has admin privileges.
+            The default Postgres/superuser role.
+            {disallowAuthenticatedOption ? <br /> : ' '}
+            This has admin privileges.
             <br />
             It will bypass Row Level Security (RLS) policies.
           </p>
         )}
 
         {selectedOption === 'anon' && (
           <p className="text-foreground-light text-sm">
-            For "anonymous access". This is the role which the API (PostgREST) will use when a user
+            For "anonymous access".
+            {disallowAuthenticatedOption ? <br /> : ' '}
+            This is the role which the API (PostgREST)
             <br />
-            is not logged in. It will respect Row Level Security (RLS) policies.
+            will use when a user is not logged in.
+            {disallowAuthenticatedOption ? <br /> : ' '}
+            It will respect Row Level Security (RLS) policies.
           </p>
         )}
 
         {selectedOption === 'authenticated' && (
           <p className="text-foreground-light text-sm">
-            For "authenticated access". This is the role which the API (PostgREST) will use when
-            <br /> a user is logged in. It will respect Row Level Security (RLS) policies.
+            For "authenticated access". This is the role which the API (PostgREST)
+            <br />
+            will use when a user is logged in. It will respect Row Level Security (RLS) policies.
           </p>
         )}
       </div>