Role-Based Access for Your App

import type { SDK } from '@/types'

export class AccessDenied extends Error {
  constructor(public status: number) { super(`HTTP ${status}`) }
}

// Calls a workspace endpoint with the signed-in user's session.
export async function callEndpoint<T>(sdk: SDK, workspace: string, endpoint: string, body = {}): Promise<T> {
  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
  if (sdk.token) headers['Authorization'] = `Bearer ${sdk.token}`
  if (sdk._csrfToken) headers['x-prismeai-csrf-token'] = sdk._csrfToken

  const res = await fetch(`${sdk.host}/workspaces/slug:${workspace}/webhooks/${endpoint}`, {
    method: 'POST',
    headers,
    credentials: 'include',
    body: JSON.stringify(body),
  })
  if (res.status === 401 || res.status === 403) throw new AccessDenied(res.status)
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return res.json()
}

import { useEffect, useState } from 'react'
import { callEndpoint, AccessDenied } from '@/api'
import type { AppProps } from '@/types'

// What each role sees. Display only: the endpoints remain the real check.
const VIEWS: Record<string, string[]> = {
  owner: ['home', 'report'],
  editor: ['home', 'report'],
  analyst: ['home', 'report'],
  reader: ['home'],
}

export default function App({ sdk, workspace }: AppProps) {
  const [role, setRole] = useState<string | null>(null)
  const [denied, setDenied] = useState(false)

  useEffect(() => {
    callEndpoint<{ role: string }>(sdk, workspace.slug, 'me')
      .then((me) => setRole(me.role))
      .catch((e) => setDenied(e instanceof AccessDenied))
  }, [sdk, workspace.slug])

  if (denied) return <p>You don't have access to this app. Ask its administrator.</p>
  if (!role) return <p>Loading…</p>

  const views = VIEWS[role] ?? []
  return (
    <Tabs views={views}>
      {views.includes('report') && (
        <ReportButton onClick={() => callEndpoint(sdk, workspace.slug, 'generate-report')} />
      )}
    </Tabs>
  )
}