Files
supabase/apps/studio/components/interfaces/Auth/RLSTester/useTestQueryRLS.ts
T
Joshen Lim 5f867e5f6c Feature Preview: RLS Tester (#45121)
## Context

Resolves FE-3077
Related discussion: https://github.com/orgs/supabase/discussions/45233

Verifying the correctness of your RLS policies set up has always been a
gap, as highlighted by a number of GitHub discussions like
[here](https://github.com/orgs/supabase/discussions/12269) and
[here](https://github.com/orgs/supabase/discussions/14401). As such,
we're piloting a dedicated UI for RLS testing (using role impersonation
as the base), in which you'll be able to
- Run a SQL query as a user (not logged in / logged in - this is the
role impersonation part)
- See which RLS policies are being evaluated as part of the query
- And hopefully be able to debug which policies are not set up correctly

Changes are currently set as a feature preview - and we'll iterate as we
get feedback from everyone 🙂 🙏

<img width="613" height="957" alt="image"
src="https://github.com/user-attachments/assets/83c37f8a-28fc-43b3-b0ff-e28571d8710c"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* RLS Tester: run queries as anon or authenticated users, view inferred
SQL, per-table policy summaries, and data previews of accessible rows.
* UI preview: new RLS Tester preview card and modal with opt-in toggle;
RLS Tester sheet with role/user selector and query editor.
  * SQLEditor: “Explain” tab is always visible.

* **Chores**
* Added supporting API endpoints, background checks for table RLS
status, and a local-storage flag to persist the preview opt-in.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-28 15:02:49 +08:00

185 lines
5.8 KiB
TypeScript

import { useState } from 'react'
import { toast } from 'sonner'
import { checkIfAppendLimitRequired, suffixWithLimit } from '../../SQLEditor/SQLEditor.utils'
import { type ParseQueryResults } from './RLSTester.types'
import { useParseClientCodeMutation } from '@/data/ai/parse-client-code-mutation'
import { useDatabasePoliciesQuery } from '@/data/database-policies/database-policies-query'
import { useCheckTableRLSStatusMutation } from '@/data/database/table-check-rls-mutation'
import { useParseSQLQueryMutation } from '@/data/misc/parse-query-mutation'
import { useExecuteSqlMutation } from '@/data/sql/execute-sql-mutation'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { wrapWithRoleImpersonation } from '@/lib/role-impersonation'
import {
getImpersonatedUser,
isRoleImpersonationEnabled,
useGetImpersonatedRoleState,
useRoleImpersonationStateSnapshot,
} from '@/state/role-impersonation-state'
const limit = 100
/**
* [Joshen] Testing a SQL query for it's RLS access involves 3 async steps
* 0. (Optional) Inferring client library code to SQL query via the AI Assistant
* 1. Parsing the provided SQL query to retrieve its operation type + tables involved
* 2. Checking for tables involved if they've got RLS enabled
* 3. Actually running the query to retrieve the results
*
* Errors should all be handled as part of the UI instead of toasts, hence the empty onError
* handlers to mute the default error handlers within the react query mutationhooks
*/
export const useTestQueryRLS = () => {
const { data: project } = useSelectedProjectQuery()
const { role } = useRoleImpersonationStateSnapshot()
const getImpersonatedRoleState = useGetImpersonatedRoleState()
const impersonatedRoleState = getImpersonatedRoleState()
const [isLoading, setIsLoading] = useState(false)
const { data: policies = [] } = useDatabasePoliciesQuery({
projectRef: project?.ref,
connectionString: project?.connectionString,
})
const { mutateAsync: executeSql, error: executeSqlError } = useExecuteSqlMutation({
onError: () => {},
})
const { mutateAsync: parseClientCode, error: parseClientCodeError } = useParseClientCodeMutation({
onError: () => {},
})
const { mutateAsync: parseQuery, error: parseQueryError } = useParseSQLQueryMutation({
onError: () => {},
})
const { mutateAsync: getTableRLSStatus, error: getTableRLSStatusError } =
useCheckTableRLSStatusMutation({
onError: () => {},
})
const testQuery = async ({
option,
format,
value,
onInferSQL,
onExecuteSQL,
onParseQuery,
}: {
option: 'anon' | 'authenticated'
format: 'lib' | 'sql'
value: string
onInferSQL: (sql: string) => void
onExecuteSQL: ({
result,
isAutoLimit,
}: {
result: Object[] | null
isAutoLimit: boolean
}) => void
onParseQuery: (results?: ParseQueryResults) => void
}) => {
if (!project) return console.error('Project is required')
const user = getImpersonatedUser(impersonatedRoleState)
if (option === 'authenticated' && !user) {
return toast('Select which user to test as before running the query')
}
try {
setIsLoading(true)
let formattedValue = value
if (format === 'lib') {
const { sql, valid } = await parseClientCode({ code: value })
if (valid && !!sql) {
formattedValue = sql
onInferSQL(sql)
} else {
return toast.error('Client library code provided is not valid')
}
}
const { appendAutoLimit } = checkIfAppendLimitRequired(formattedValue, limit)
const formattedSql = suffixWithLimit(formattedValue, limit)
const data = await parseQuery({ sql: formattedSql })
if (data.operation !== 'SELECT') {
return toast('Only SELECT statements are supported for now')
}
const formattedTables = data.tables.map((x) => {
const [schema, table] = x.includes('.') ? x.split('.') : ['public', x]
return { schema, table }
})
const response = await getTableRLSStatus({
projectRef: project?.ref,
connectionString: project?.connectionString,
tables: formattedTables,
})
const tables = response
.map(({ table, schema, rls_enabled }) => {
const tablePolicies = policies.filter(
(x) =>
x.schema === schema &&
x.table === table &&
x.roles.includes(role?.role ?? '') &&
x.command === data.operation
)
return {
table,
schema,
isRLSEnabled: rls_enabled,
tablePolicies,
}
})
.sort((a, b) => {
const aFirst = a.isRLSEnabled && a.tablePolicies.length === 0
const bFirst = b.isRLSEnabled && b.tablePolicies.length === 0
return Number(bFirst) - Number(aFirst)
})
const autoLimit = appendAutoLimit ? limit : undefined
const { result } = await executeSql({
autoLimit,
projectRef: project.ref,
connectionString: project.connectionString,
sql: wrapWithRoleImpersonation(formattedSql, impersonatedRoleState),
isRoleImpersonationEnabled: isRoleImpersonationEnabled(impersonatedRoleState.role),
isStatementTimeoutDisabled: true,
handleError: (error) => {
throw error
},
queryKey: ['rls-tester'],
})
onExecuteSQL({ result, isAutoLimit: !!autoLimit })
onParseQuery({
tables,
operation: data.operation,
role: role?.role,
user,
})
} catch (error) {
onExecuteSQL({ result: null, isAutoLimit: false })
onParseQuery(undefined)
} finally {
setIsLoading(false)
}
}
return {
limit,
testQuery,
isLoading,
executeSqlError,
parseQueryError,
parseClientCodeError,
getTableRLSStatusError,
}
}