Can | better-supabase

Shows an action only to members who hold a permission key; the checks of one render share one round trip.

It loads its data on the server through the block's client; the access block must be installed (npx better-supabase add access). Its page on bettersupabase.com is /recipes/can.

Web, with no shadcn components.

apps/examples/nextjs/src/features/projects/components/task-import-action.tsx

"use client";

import { Can } from "better-supabase/blocks/access/react";

import { permissions } from "@/lib/supabase/blocks.generated";

import { TaskImportDialog } from "./task-import-dialog";

/**
 * The import button, for members with `imports.manage` in the active
 * organization. The `<Can>` checks of one render share one `my_permissions`
 * call; the import action checks the key again on the server.
 */
export function TaskImportAction({ projectId }: { projectId: string }) {
  return (
    <Can permission={permissions.imports.manage}>
      <TaskImportDialog projectId={projectId} />
    </Can>
  );
}

It loads its data on the server through the block's client; the access block must be installed (npx better-supabase add access). Its page on bettersupabase.com is /recipes/can.

Web, with no shadcn components.

apps/examples/nextjs/src/features/projects/components/task-import-action.tsx

"use client";

import { Can } from "better-supabase/blocks/access/react";

import { permissions } from "@/lib/supabase/blocks.generated";

import { TaskImportDialog } from "./task-import-dialog";

/**
 * The import button, for members with `imports.manage` in the active
 * organization. The `<Can>` checks of one render share one `my_permissions`
 * call; the import action checks the key again on the server.
 */
export function TaskImportAction({ projectId }: { projectId: string }) {
  return (
    <Can permission={permissions.imports.manage}>
      <TaskImportDialog projectId={projectId} />
    </Can>
  );
}