fix(auth): scope permissions and org list cache keys by user ID FE-2872 (#44139)

## Problem

React Query cache keys for permissions and organizations are generic
(`['permissions']`, `['organizations']`) with no user identifier. When a
new session is established without going through the explicit sign-out
flow (e.g. clicking an email verification link while still logged in as
another account), stale data from the previous user persists in cache.
The new user ends up seeing the old user's permissions and org list,
which makes the project creation form appear enabled. When submitted,
the backend rejects with "not an owner" because the token belongs to the
new account which has no ownership of the old org.

A hard refresh clears the in-memory React Query state and forces a fresh
fetch, which is why it resolved the issue.

## Fix

Scope `permissionKeys.list` and `organizationKeys.list` by user ID so
different accounts never share the same cache slot. When a different
user logs in, their queries simply get fresh cache entries and never see
data from the previous session. Updated all invalidation and
`setQueriesData` call sites across 18 files to pass the current user ID.

## How to test

I don't think it can be tested in the preview environment sadly since
the request to verify has to go to auth.supabase.green instead of
vercel-ref.supabase.green

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jordi EnricandClaude Sonnet 4.6 authored and GitHub committed 2026-03-24 18:13:32 +01:00
1 parent 089edbe6fa
commit e88f389fa5
1 file changed
+11
@@ -1,10 +1,13 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { UseFormReturn } from 'react-hook-form'
import { useParams } from 'common'
import { NoPermission } from 'components/ui/NoPermission'
import Panel from 'components/ui/Panel'
import { permissionKeys } from 'data/permissions/keys'
import { useOrganizationsQuery } from 'data/organizations/organizations-query'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
@@ -30,9 +33,17 @@ interface OrganizationSelectorProps {
export const OrganizationSelector = ({ form }: OrganizationSelectorProps) => {
const router = useRouter()
const { slug } = useParams()
const queryClient = useQueryClient()
const { data: currentOrg } = useSelectedOrganizationQuery()
const { can: isAdmin } = useAsyncCheckPermissions(PermissionAction.CREATE, 'projects')
// Permissions may be stale for newly created accounts due to replication lag between
// org setup and the permissions endpoint. Invalidate in the background on mount so the
// check reflects the latest state before the user tries to create a project.
useEffect(() => {
queryClient.invalidateQueries({ queryKey: permissionKeys.list() })
}, [queryClient])
const { data: organizations, isSuccess: isOrganizationsSuccess } = useOrganizationsQuery()
const isInvalidSlug = isOrganizationsSuccess && currentOrg === undefined
const orgNotFound = (organizations?.length ?? 0) > 0 && isInvalidSlug