feat: add access control to project

Author: Kitenite

apps/web/client/src/app/project/[id]/layout.tsx

@@ -0,0 +1,42 @@
+import { api } from "@/trpc/server";
+import { Routes } from "@/utils/constants";
+import { Icons } from "@onlook/ui/icons/index";
+import Link from "next/link";
+
+export default async function Layout({ params, children }: Readonly<{ params: Promise<{ id: string }>, children: React.ReactNode }>) {
+    const projectId = (await params).id;
+    const hasAccess = await api.project.hasAccess({ projectId });
+    if (!hasAccess) {
+        return <NoAccess />;
+    }
+    return <>{children}</>;
+}
+
+const NoAccess = () => {
+    const SUPPORT_EMAIL = '[email protected]';
+    return (
+        <main className="flex flex-1 flex-col items-center justify-center h-screen w-screen p-4 text-center">
+            <div className="space-y-6">
+                <div className="space-y-2">
+                    <h1 className="text-4xl font-bold tracking-tight text-foreground-primary">Access denied</h1>
+                    <h2 className="text-2xl font-semibold tracking-tight text-foreground-primary">{`Please contact the project owner to request access.`}</h2>
+                    <p className="text-foreground-secondary">
+                        {`Please email `}
+                        <Link href={`mailto:${SUPPORT_EMAIL}`} className="text-primary underline">
+                            {SUPPORT_EMAIL}
+                        </Link>
+                        {` if you believe this is an error.`}
+                    </p>
+                </div>
+
+                <Link
+                    className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                    href={Routes.PROJECTS}
+                >
+                    <Icons.ArrowLeft className="h-4 w-4" />
+                    Back to projects
+                </Link>
+            </div>
+        </main>
+    );
+};

apps/web/client/src/server/api/routers/project/project.ts

@@ -33,6 +33,20 @@ import { createTRPCRouter, protectedProcedure } from '../../trpc';
 import { projectCreateRequestRouter } from './createRequest';
 
 export const projectRouter = createTRPCRouter({
+    hasAccess: protectedProcedure
+        .input(z.object({ projectId: z.string() }))
+        .query(async ({ ctx, input }) => {
+            const user = ctx.user;
+            const project = await ctx.db.query.projects.findFirst({
+                where: eq(projects.id, input.projectId),
+                with: {
+                    userProjects: {
+                        where: eq(userProjects.userId, user.id),
+                    },
+                },
+            });
+            return !!project && project.userProjects.length > 0;
+        }),
     createRequest: projectCreateRequestRouter,
     captureScreenshot: protectedProcedure
         .input(z.object({ projectId: z.string() }))