Check Roles and Permissions with Authorization Checks

import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { clerkClient, auth } from '@clerk/tanstack-react-start/server'

const authStateFn = createServerFn({ method: 'GET' }).handler(async () => {
  // Use `auth()` to access the `Auth` object
  // https://clerk.com/docs/reference/backend/types/auth-object
  const { isAuthenticated, orgId, has } = await auth()
  const requiredOrgName = 'Acme Corp'

  // Check if the user is authenticated
  if (!isAuthenticated) {
    // This might error if you're redirecting to a path that doesn't exist yet
    // You can create a sign-in route to handle this
    // See https://clerk.com/docs/tanstack-react-start/guides/development/custom-sign-in-or-up-page
    throw redirect({
      to: '/sign-in/$',
    })
  }

  // Check if there is an Active Organization
  if (!orgId) return { error: 'Set an Active Organization to access this page.' }

  // Check if the user has the `org:admin` Role
  if (!has({ role: 'org:admin' })) return { error: 'You must be an admin to access this page.' }

  // Use the `getOrganization()` method to get the Backend `Organization` object
  const organization = await clerkClient().organizations.getOrganization({ organizationId: orgId })

  // Check if Organization name matches (e.g., 'Acme Corp')
  if (organization.name !== requiredOrgName) {
    return {
      error: `This page is only accessible in the ${requiredOrgName} Organization. Switch to the ${requiredOrgName} Organization to access this page.`,
    }
  }

  return { organizationName: organization.name }
})

export const Route = createFileRoute('/protected')({
  component: Protected,
  beforeLoad: () => authStateFn(),
  loader: async ({ context }) => context,
})

function Protected() {
  const state = Route.useLoaderData()

  if ('error' in state) return <p>{state.error}</p>

  return (
    <p>
      You are currently signed in as an <strong>admin</strong> in the{' '}
      <strong>{state.organizationName}</strong> Organization.
    </p>
  )
}

import { useAuth, useOrganization } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/protected')({
  component: Protected,
})

function Protected() {
  // The `useAuth()` hook gives you access to properties like `isSignedIn` and `has()`
  const { isSignedIn, has } = useAuth()
  const { organization } = useOrganization()
  const requiredOrgName = 'Acme Corp'

  // Check if the user is authenticated
  if (!isSignedIn) return <p>You must be signed in to access this page.</p>

  // Check if there is an Active Organization
  if (!organization) return <p>Set an Active Organization to access this page.</p>

  // Check if the user has the `org:admin` Role
  if (!has({ role: 'org:admin' })) return <p>You must be an admin to access this page.</p>

  // Check if Organization name matches (e.g., 'Acme Corp')
  if (organization.name !== requiredOrgName)
    return (
      <p>
        This page is only accessible in the <strong>{requiredOrgName}</strong> Organization. Switch
        to the <strong>{requiredOrgName}</strong> Organization to access this page.
      </p>
    )

  return (
    <p>
      You are currently signed in as an <strong>admin</strong> in the{' '}
      <strong>{organization.name}</strong> Organization.
    </p>
  )
}