Authentication

pnpm add better-auth

import { createAuthClient } from "better-auth/react"
import { adminClient } from "better-auth/client/plugins"

export const authClient = createAuthClient({
  // Where your Better Auth server is mounted. Omit it when it is the same origin.
  baseURL: import.meta.env.VITE_AUTH_URL,
  // Types `user.role` and adds the admin endpoints.
  plugins: [adminClient()],
})

import type { ScopeInterface } from "react-resource-view"
import {
  AdminLayout,
  ForbiddenError,
  UnauthorizedError,
} from "react-resource-view"
import { authClient } from "../auth-client"

export const adminScope: ScopeInterface = {
  name: "admin",
  label: "Administration",
  resources: [articles, users],
  decoratorComponent: AdminLayout,

  // Awaited before anything of the scope renders.
  authorization: async () => {
    const { data } = await authClient.getSession()
    if (!data) throw new UnauthorizedError()                 // 401 → onUnauthorized
    if (data.user.role !== "admin") throw new ForbiddenError() // 403 → access denied
    return true
  },
}

import { ResourceViewProvider } from "react-resource-view"
import { useRouter } from "@tanstack/react-router"

function Admin({ url }: { url: string }) {
  const router = useRouter()

  return (
    <ResourceViewProvider
      viewResourceContextParams={parseLink(url)}
      configuration={{
        scopes: {
          admin: () => import("./scopes/admin").then((m) => m.adminScope),
        },
        defaultScope: "admin",
        // A 401, thrown or rejected: send the reader to sign in, and back here after.
        onUnauthorized: () =>
          router.navigate({
            to: "/login",
            search: { redirect: window.location.pathname },
          }),
        // While the session is being fetched — instead of the default page loader.
        authorizationFallback: <Spinner />,
        // A 403, or an authorization returning false.
        forbiddenFallback: <p>This area is for administrators.</p>,
      }}
    />
  )
}

// /login — a plain Better Auth form, nothing specific to react-resource-view.
function LoginPage() {
  const { redirect } = Route.useSearch()
  const router = useRouter()
  const [error, setError] = useState<string>()

  async function onSubmit(email: string, password: string) {
    const { error } = await authClient.signIn.email({ email, password })
    if (error) return setError(error.message)

    router.navigate({ to: redirect ?? "/admin" })
  }

  // …the form itself
}

import { authClient } from "./auth-client"

type Session = typeof authClient.$Infer.Session

let pending: Promise<Session | null> | undefined
let current: Session | null = null

/** Fetches the session once; later calls share the same request. */
export function loadSession(): Promise<Session | null> {
  pending ??= authClient.getSession().then(({ data }) => (current = data))
  return pending
}

/** Forgets it — after a sign-out, or to pick up a role that changed. */
export function forgetSession() {
  pending = undefined
  current = null
}

/**
 * Synchronous, for the permissions asked on every render. The scope's authorization
 * has awaited loadSession() before any view of the scope renders, so the
 * session is already there when this is read.
 */
export function hasRole(role: string): boolean {
  // The admin plugin stores several roles comma-separated: "admin,editor".
  return current?.user.role?.split(",").includes(role) ?? false
}

import { hasRole, loadSession } from "../session"

export const adminScope: ScopeInterface = {
  name: "admin",
  // …
  authorization: async () => {
    const session = await loadSession()
    if (!session) throw new UnauthorizedError()
    if (!hasRole("admin") && !hasRole("editor")) throw new ForbiddenError()
    return true
  },
}

import { hasRole } from "../session"

export const articles = createViewResource("articles", {
  path: "/api/articles",
  // Everything is allowed by default: only the restrictions are written.
  permissions: {
    create: () => hasRole("editor") || hasRole("admin"),
    update: () => hasRole("editor") || hasRole("admin"),
    delete: () => hasRole("admin"),
  },
})

menu: [
  articles,
  {
    // An entry of its own, to add a getter: it names the scope its link leads to.
    ...createItemMenuWithResource({ resource: users, scope: "admin" }),
    // `hidden` is read each time the menu renders: a getter follows the session.
    get hidden() {
      return !hasRole("admin")
    },
  },
],

import { useScopeContext } from "react-resource-view"
import { authClient } from "./auth-client"
import { forgetSession } from "./session"

export function SignOutButton() {
  const scopeContext = useScopeContext()

  return (
    <button
      onClick={async () => {
        await authClient.signOut()
        forgetSession()
        // Runs the scope's authorization again: no session → 401 → /login.
        scopeContext?.recheckAuthorization()
      }}
    >
      Sign out
    </button>
  )
}

import { ForbiddenError, UnauthorizedError } from "react-resource-view"

// LexikJWTAuthenticationBundle: POST /api/login_check { username, password }
// answers { token }, kept here by the login form.
authorization: async () => {
  const token = localStorage.getItem("token")
  if (!token) throw new UnauthorizedError()

  // A /me operation of your API Platform app, returning the signed-in user.
  const response = await fetch("/api/me", {
    headers: { Authorization: `Bearer ${token}` },
  })
  if (response.status === 401) throw new UnauthorizedError() // expired or revoked
  if (!response.ok) throw new Error(`/api/me answered ${response.status}`)

  const me = await response.json()
  if (!me.roles.includes("ROLE_ADMIN")) throw new ForbiddenError()
  return true
}