React Quickstart

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { NebutraProvider } from "@nebutra/react";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <NebutraProvider
      orgId={import.meta.env.VITE_NEBUTRA_ORG_ID}
      apiUrl="https://api.nebutra.com"
    >
      <App />
    </NebutraProvider>
  </StrictMode>
);

import { useNebutraUser, useNebutraOrg } from "@nebutra/react";

export function UserMenu() {
  const { user, isLoaded, isSignedIn } = useNebutraUser();
  const { org } = useNebutraOrg();

  if (!isLoaded) return <Skeleton />;
  if (!isSignedIn) return <SignInButton />;

  return (
    <div>
      <p>{user.fullName}</p>
      <p>{org.name} · {org.plan}</p>
    </div>
  );
}

import { Can } from "@nebutra/react";

export function DeleteButton({ projectId }: { projectId: string }) {
  return (
    <Can action="delete" resource="Project">
      <button onClick={() => handleDelete(projectId)}>
        Delete Project
      </button>
    </Can>
  );
}

import { useNebutraUser } from "@nebutra/react";
import { Navigate } from "react-router-dom";

export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isLoaded, isSignedIn } = useNebutraUser();

  if (!isLoaded) return <LoadingSpinner />;
  if (!isSignedIn) return <Navigate to="/sign-in" />;

  return <>{children}</>;
}

import { useNebutraToken } from "@nebutra/react";

export function useProjects() {
  const { getToken } = useNebutraToken();

  return async function fetchProjects() {
    const token = await getToken();
    const res = await fetch("/api/projects", {
      headers: { Authorization: `Bearer ${token}` },
    });
    return res.json();
  };
}