zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enforce RLS when user opted in to MFA. (#188)

Browse Source 
* Allow Super Admin to view tables using RLS
* Replace previous usages of the Admin client using the authed client using the new RLS
* Enforce MFA for Super Admin users
* Enforce RLS when user opted in to MFA.
* Add Super Admin Access Policies and Update Database Types
* Consolidate super admin logic into a single function that uses the RPC is_super_admin
* Added Super Admin E2E tests
* Fixes and improvements
* Bump version to 2.5.0
This commit is contained in:
Giancarlo Buomprisco
2025-03-02 10:21:01 +07:00
committed by GitHub
parent 9cf7bf0aac
commit 131b1061e6
61 changed files with 2193 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/features/accounts/src/components/personal-account-dropdown.tsx
View File

@@ -76,7 +76,13 @@ export function PersonalAccountDropdown({
personalAccountData?.name ?? account?.name ?? user?.email ?? '';
const isSuperAdmin = useMemo(() => {
return user?.app_metadata.role === 'super-admin';
const factors = user?.factors ?? [];
const hasAdminRole = user?.app_metadata.role === 'super-admin';
const hasTotpFactor = factors.some(
(factor) => factor.factor_type === 'totp' && factor.status === 'verified',
);
return hasAdminRole && hasTotpFactor;
}, [user]);
return (
@@ -179,12 +185,14 @@ export function PersonalAccountDropdown({
<DropdownMenuItem asChild>
<Link
className={'s-full flex cursor-pointer items-center space-x-2'}
className={
's-full flex cursor-pointer items-center space-x-2 text-yellow-700 dark:text-yellow-500'
}
href={'/admin'}
>
<Shield className={'h-5'} />
<span>Admin</span>
<span>Super Admin</span>
</Link>
</DropdownMenuItem>
</If>

61
packages/features/admin/src/components/admin-account-page.tsx
View File

@@ -1,13 +1,13 @@
import {
BadgeX,
Ban,
CreditCardIcon,
ShieldPlus,
VenetianMask,
} from 'lucide-react';
import { Tables } from '@kit/supabase/database';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
import { Badge } from '@kit/ui/badge';
@@ -49,15 +49,18 @@ export function AdminAccountPage(props: {
}
async function PersonalAccountPage(props: { account: Account }) {
const client = getSupabaseServerAdminClient();
const adminClient = getSupabaseServerAdminClient();
const memberships = await getMemberships(props.account.id);
const { data, error } = await client.auth.admin.getUserById(props.account.id);
const { data, error } = await adminClient.auth.admin.getUserById(
props.account.id,
);
if (!data || error) {
throw new Error(`User not found`);
}
const memberships = await getMemberships(props.account.id);
const isBanned =
'banned_until' in data.user && data.user.banned_until !== 'none';
@@ -77,7 +80,11 @@ async function PersonalAccountPage(props: { account: Account }) {
<div className={'flex gap-x-2.5'}>
<If condition={isBanned}>
<AdminReactivateUserDialog userId={props.account.id}>
<Button size={'sm'} variant={'secondary'}>
<Button
size={'sm'}
variant={'secondary'}
data-test={'admin-reactivate-account-button'}
>
<ShieldPlus className={'mr-1 h-4'} />
Reactivate
</Button>
@@ -86,14 +93,22 @@ async function PersonalAccountPage(props: { account: Account }) {
<If condition={!isBanned}>
<AdminBanUserDialog userId={props.account.id}>
<Button size={'sm'} variant={'secondary'}>
<Button
size={'sm'}
variant={'secondary'}
data-test={'admin-ban-account-button'}
>
<Ban className={'text-destructive mr-1 h-3'} />
Ban
</Button>
</AdminBanUserDialog>
<AdminImpersonateUserDialog userId={props.account.id}>
<Button size={'sm'} variant={'secondary'}>
<Button
size={'sm'}
variant={'secondary'}
data-test={'admin-impersonate-button'}
>
<VenetianMask className={'mr-1 h-4 text-blue-500'} />
Impersonate
</Button>
@@ -101,7 +116,11 @@ async function PersonalAccountPage(props: { account: Account }) {
</If>
<AdminDeleteUserDialog userId={props.account.id}>
<Button size={'sm'} variant={'destructive'}>
<Button
size={'sm'}
variant={'destructive'}
data-test={'admin-delete-account-button'}
>
<BadgeX className={'mr-1 h-4'} />
Delete
</Button>
@@ -166,7 +185,11 @@ async function TeamAccountPage(props: {
}
>
<AdminDeleteAccountDialog accountId={props.account.id}>
<Button size={'sm'} variant={'destructive'}>
<Button
size={'sm'}
variant={'destructive'}
data-test={'admin-delete-account-button'}
>
<BadgeX className={'mr-1 h-4'} />
Delete
</Button>
@@ -208,7 +231,7 @@ async function TeamAccountPage(props: {
}
async function SubscriptionsTable(props: { accountId: string }) {
const client = getSupabaseServerAdminClient();
const client = getSupabaseServerClient();
const { data: subscription, error } = await client
.from('subscriptions')
@@ -229,21 +252,15 @@ async function SubscriptionsTable(props: { accountId: string }) {
}
return (
<div className={'flex flex-col space-y-2.5'}>
<div className={'flex flex-col gap-y-1'}>
<Heading level={6}>Subscription</Heading>
<If
condition={subscription}
fallback={
<Alert variant={'warning'}>
<CreditCardIcon className={'h-4'} />
<AlertTitle>No subscription found for this account.</AlertTitle>
<AlertDescription>
This account does not have a subscription.
</AlertDescription>
</Alert>
<span className={'text-sm text-muted-foreground'}>
This account does not currently have a subscription.
</span>
}
>
{(subscription) => {
@@ -355,7 +372,7 @@ async function SubscriptionsTable(props: { accountId: string }) {
}
async function getMemberships(userId: string) {
const client = getSupabaseServerAdminClient();
const client = getSupabaseServerClient();
const memberships = await client
.from('accounts_memberships')
@@ -378,7 +395,7 @@ async function getMemberships(userId: string) {
}
async function getMembers(accountSlug: string) {
const client = getSupabaseServerAdminClient();
const client = getSupabaseServerClient();
const members = await client.rpc('get_account_members', {
account_slug: accountSlug,

4
packages/features/admin/src/components/admin-accounts-table.tsx
View File

@@ -52,6 +52,7 @@ export function AdminAccountsTable(
page: number;
filters: {
type: 'all' | 'team' | 'personal';
query: string;
};
}>,
) {
@@ -79,7 +80,7 @@ function AccountsTableFilters(props: {
resolver: zodResolver(FiltersSchema),
defaultValues: {
type: props.filters?.type ?? 'all',
query: '',
query: props.filters?.query ?? '',
},
mode: 'onChange',
reValidateMode: 'onChange',
@@ -142,6 +143,7 @@ function AccountsTableFilters(props: {
<FormItem>
<FormControl className={'w-full min-w-36 md:min-w-80'}>
<Input
data-test={'admin-accounts-table-filter-input'}
className={'w-full'}
placeholder={`Search account...`}
{...field}

34
packages/features/admin/src/components/admin-ban-user-dialog.tsx
View File

@@ -1,8 +1,11 @@
'use client';
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import {
AlertDialog,
AlertDialogCancel,
@@ -23,6 +26,7 @@ import {
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { banUserAction } from '../lib/server/admin-server-actions';
@@ -33,6 +37,9 @@ export function AdminBanUserDialog(
userId: string;
}>,
) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const form = useForm({
resolver: zodResolver(BanUserSchema),
defaultValues: {
@@ -57,11 +64,30 @@ export function AdminBanUserDialog(
<Form {...form}>
<form
data-test={'admin-ban-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
return banUserAction(data);
startTransition(async () => {
try {
await banUserAction(data);
setError(false);
} catch {
setError(true);
}
});
})}
>
<If condition={error}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
<AlertDescription>
There was an error banning the user. Please check the server
logs to see what went wrong.
</AlertDescription>
</Alert>
</If>
<FormField
name={'confirmation'}
render={({ field }) => (
@@ -91,7 +117,11 @@ export function AdminBanUserDialog(
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button type={'submit'} variant={'destructive'}>
<Button
disabled={pending}
type={'submit'}
variant={'destructive'}
>
Ban User
</Button>
</AlertDialogFooter>

6
packages/features/admin/src/components/admin-dashboard.tsx
View File

@@ -80,6 +80,12 @@ export async function AdminDashboard() {
</div>
</CardContent>
</Card>
<div>
<p className={'text-muted-foreground w-max text-xs'}>
The above data is estimated and may not be 100% accurate.
</p>
</div>
</div>
);
}

39
packages/features/admin/src/components/admin-delete-account-dialog.tsx
View File

@@ -1,8 +1,11 @@
'use client';
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import {
AlertDialog,
AlertDialogCancel,
@@ -21,7 +24,9 @@ import {
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { deleteAccountAction } from '../lib/server/admin-server-actions';
@@ -32,6 +37,9 @@ export function AdminDeleteAccountDialog(
accountId: string;
}>,
) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const form = useForm({
resolver: zodResolver(DeleteAccountSchema),
defaultValues: {
@@ -57,11 +65,30 @@ export function AdminDeleteAccountDialog(
<Form {...form}>
<form
data-form={'admin-delete-account-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
return deleteAccountAction(data);
startTransition(async () => {
try {
await deleteAccountAction(data);
setError(false);
} catch {
setError(true);
}
});
})}
>
<If condition={error}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
<AlertDescription>
There was an error deleting the account. Please check the
server logs to see what went wrong.
</AlertDescription>
</Alert>
</If>
<FormField
name={'confirmation'}
render={({ field }) => (
@@ -83,6 +110,8 @@ export function AdminDeleteAccountDialog(
Are you sure you want to do this? This action cannot be
undone.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
@@ -90,8 +119,12 @@ export function AdminDeleteAccountDialog(
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button type={'submit'} variant={'destructive'}>
Delete
<Button
disabled={pending}
type={'submit'}
variant={'destructive'}
>
{pending ? 'Deleting...' : 'Delete'}
</Button>
</AlertDialogFooter>
</form>

36
packages/features/admin/src/components/admin-delete-user-dialog.tsx
View File

@@ -1,8 +1,11 @@
'use client';
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import {
AlertDialog,
AlertDialogCancel,
@@ -23,6 +26,7 @@ import {
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { deleteUserAction } from '../lib/server/admin-server-actions';
@@ -33,6 +37,9 @@ export function AdminDeleteUserDialog(
userId: string;
}>,
) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const form = useForm({
resolver: zodResolver(DeleteUserSchema),
defaultValues: {
@@ -58,11 +65,30 @@ export function AdminDeleteUserDialog(
<Form {...form}>
<form
data-test={'admin-delete-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
return deleteUserAction(data);
startTransition(async () => {
try {
await deleteUserAction(data);
setError(false);
} catch {
setError(true);
}
});
})}
>
<If condition={error}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
<AlertDescription>
There was an error deleting the user. Please check the server
logs to see what went wrong.
</AlertDescription>
</Alert>
</If>
<FormField
name={'confirmation'}
render={({ field }) => (
@@ -93,8 +119,12 @@ export function AdminDeleteUserDialog(
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button type={'submit'} variant={'destructive'}>
Delete
<Button
disabled={pending}
type={'submit'}
variant={'destructive'}
>
{pending ? 'Deleting...' : 'Delete'}
</Button>
</AlertDialogFooter>
</form>

35
packages/features/admin/src/components/admin-impersonate-user-dialog.tsx
View File

@@ -1,12 +1,13 @@
'use client';
import { useState } from 'react';
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useQuery } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import {
AlertDialog,
AlertDialogCancel,
@@ -27,6 +28,7 @@ import {
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { LoadingOverlay } from '@kit/ui/loading-overlay';
@@ -51,6 +53,9 @@ export function AdminImpersonateUserDialog(
refreshToken: string;
}>();
const [isPending, startTransition] = useTransition();
const [error, setError] = useState<boolean | null>(null);
if (tokens) {
return (
<>
@@ -77,13 +82,31 @@ export function AdminImpersonateUserDialog(
<Form {...form}>
<form
data-test={'admin-impersonate-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit(async (data) => {
const tokens = await impersonateUserAction(data);
onSubmit={form.handleSubmit((data) => {
startTransition(async () => {
try {
const result = await impersonateUserAction(data);
setTokens(tokens);
setTokens(result);
} catch {
setError(true);
}
});
})}
>
<If condition={error}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Failed to impersonate user. Please check the logs to
understand what went wrong.
</AlertDescription>
</Alert>
</If>
<FormField
name={'confirmation'}
render={({ field }) => (
@@ -113,7 +136,9 @@ export function AdminImpersonateUserDialog(
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button type={'submit'}>Impersonate User</Button>
<Button disabled={isPending} type={'submit'}>
{isPending ? 'Impersonating...' : 'Impersonate User'}
</Button>
</AlertDialogFooter>
</form>
</Form>

32
packages/features/admin/src/components/admin-reactivate-user-dialog.tsx
View File

@@ -1,8 +1,11 @@
'use client';
import { useState, useTransition } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
import {
AlertDialog,
AlertDialogCancel,
@@ -23,6 +26,7 @@ import {
FormLabel,
FormMessage,
} from '@kit/ui/form';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { reactivateUserAction } from '../lib/server/admin-server-actions';
@@ -33,6 +37,9 @@ export function AdminReactivateUserDialog(
userId: string;
}>,
) {
const [pending, startTransition] = useTransition();
const [error, setError] = useState<boolean>(false);
const form = useForm({
resolver: zodResolver(ReactivateUserSchema),
defaultValues: {
@@ -56,11 +63,30 @@ export function AdminReactivateUserDialog(
<Form {...form}>
<form
data-test={'admin-reactivate-user-form'}
className={'flex flex-col space-y-8'}
onSubmit={form.handleSubmit((data) => {
return reactivateUserAction(data);
startTransition(async () => {
try {
await reactivateUserAction(data);
setError(false);
} catch {
setError(true);
}
});
})}
>
<If condition={error}>
<Alert variant={'destructive'}>
<AlertTitle>Error</AlertTitle>
<AlertDescription>
There was an error reactivating the user. Please check the
server logs to see what went wrong.
</AlertDescription>
</Alert>
</If>
<FormField
name={'confirmation'}
render={({ field }) => (
@@ -90,7 +116,9 @@ export function AdminReactivateUserDialog(
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button type={'submit'}>Reactivate User</Button>
<Button disabled={pending} type={'submit'}>
{pending ? 'Reactivating...' : 'Reactivate User'}
</Button>
</AlertDialogFooter>
</form>
</Form>

4
packages/features/admin/src/lib/server/loaders/admin-dashboard.loader.ts
View File

@@ -2,7 +2,7 @@ import 'server-only';
import { cache } from 'react';
import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { createAdminDashboardService } from '../services/admin-dashboard.service';
@@ -14,7 +14,7 @@ import { createAdminDashboardService } from '../services/admin-dashboard.service
export const loadAdminDashboard = cache(adminDashboardLoader);
function adminDashboardLoader() {
const client = getSupabaseServerAdminClient();
const client = getSupabaseServerClient();
const service = createAdminDashboardService(client);
return service.getDashboardData();

11
packages/features/admin/src/lib/server/services/admin-auth-user.service.ts
View File

@@ -137,6 +137,17 @@ class AdminAuthUserService {
`You cannot perform a destructive action on your own account as a Super Admin`,
);
}
const targetUser =
await this.adminClient.auth.admin.getUserById(targetUserId);
const targetUserRole = targetUser.data.user?.app_metadata?.role;
if (targetUserRole === 'super-admin') {
throw new Error(
`You cannot perform a destructive action on a Super Admin account`,
);
}
}
private async setBanDuration(userId: string, banDuration: string) {

25
packages/features/admin/src/lib/server/utils/is-super-admin.ts
View File

@@ -1,6 +1,5 @@
import { SupabaseClient } from '@supabase/supabase-js';
import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
import { Database } from '@kit/supabase/database';
/**
@@ -9,25 +8,15 @@ import { Database } from '@kit/supabase/database';
* @param client
*/
export async function isSuperAdmin(client: SupabaseClient<Database>) {
const { data, error } = await client.auth.getUser();
try {
const { data, error } = await client.rpc('is_super_admin');
if (error) {
throw error;
}
if (error) {
throw error;
}
if (!data.user) {
return data;
} catch {
return false;
}
const requiresMultiFactorAuthentication =
await checkRequiresMultiFactorAuthentication(client);
// If user requires multi-factor authentication, deny access.
if (requiresMultiFactorAuthentication) {
return false;
}
const appMetadata = data.user.app_metadata;
return appMetadata?.role === 'super-admin';
}

17
packages/features/auth/src/components/multi-factor-challenge-container.tsx
View File

@@ -21,6 +21,7 @@ import {
FormItem,
FormMessage,
} from '@kit/ui/form';
import { Heading } from '@kit/ui/heading';
import { If } from '@kit/ui/if';
import {
InputOTP,
@@ -86,9 +87,15 @@ export function MultiFactorChallengeContainer({
});
})}
>
<div className={'flex flex-col space-y-4'}>
<div className={'flex w-full flex-col space-y-2.5'}>
<div className={'flex flex-col space-y-4'}>
<div className={'flex flex-col items-center gap-y-6'}>
<div className="flex flex-col items-center gap-y-4">
<Heading level={5}>
<Trans i18nKey={'auth:verifyCodeHeading'} />
</Heading>
</div>
<div className={'flex w-full flex-col gap-y-2.5'}>
<div className={'flex flex-col gap-y-4'}>
<If condition={verifyMFAChallenge.error}>
<Alert variant={'destructive'}>
<ExclamationTriangleIcon className={'h-5'} />
@@ -130,7 +137,7 @@ export function MultiFactorChallengeContainer({
</InputOTP>
</FormControl>
<FormDescription>
<FormDescription className="text-center">
<Trans
i18nKey={'account:verifyActivationCodeDescription'}
/>
@@ -145,6 +152,8 @@ export function MultiFactorChallengeContainer({
</div>
<Button
className="w-full"
data-test={'submit-mfa-button'}
disabled={
verifyMFAChallenge.isPending ||
!verificationCodeForm.formState.isValid

16
packages/supabase/src/database.types.ts
View File

@@ -858,6 +858,14 @@ export type Database = {
};
Returns: boolean;
};
install_extensions: {
Args: Record<PropertyKey, never>;
Returns: undefined;
};
is_aal2: {
Args: Record<PropertyKey, never>;
Returns: boolean;
};
is_account_owner: {
Args: {
account_id: string;
@@ -870,12 +878,20 @@ export type Database = {
};
Returns: boolean;
};
is_mfa_compliant: {
Args: Record<PropertyKey, never>;
Returns: boolean;
};
is_set: {
Args: {
field_name: string;
};
Returns: boolean;
};
is_super_admin: {
Args: Record<PropertyKey, never>;
Returns: boolean;
};
is_team_member: {
Args: {
account_id: string;

2
packages/ui/src/makerkit/data-table.tsx
View File

@@ -67,6 +67,8 @@ export function DataTable<T extends object>({
manualSorting = false,
sorting: initialSorting,
}: ReactTableProps<T>) {
'use no memo';
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: pageIndex ?? 0,
pageSize: pageSize ?? 15,