start liveblocks integration

frontend/app/(app)/code/[id]/page.tsx

@@ -1,4 +1,5 @@
 import Navbar from "@/components/editor/navbar"
+import { Room } from "@/components/editor/room"
 import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
@@ -48,10 +49,12 @@ export default async function CodePage({ params }: { params: { id: string } }) {
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
+      {/* <Room> */}
       <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
       <div className="w-screen flex grow">
         <CodeEditor userData={userData} sandboxId={sandboxId} />
       </div>
+      {/* </Room> */}
     </div>
   )
 }

frontend/app/(app)/layout.tsx

@@ -1,3 +1,4 @@
+import { User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import { redirect } from "next/navigation"
 
@@ -13,9 +14,9 @@ export default async function AppAuthLayout({
   }
 
   const dbUser = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
-  const dbUserJSON = await dbUser.json()
+  const dbUserJSON = (await dbUser.json()) as User
 
-  if (!dbUserJSON?.id) {
+  if (!dbUserJSON.id) {
     const res = await fetch("http://localhost:8787/api/user", {
       method: "POST",
       headers: {

frontend/app/api/lb-auth/route.ts

@@ -0,0 +1,43 @@
+import { User } from "@/lib/types"
+import { currentUser } from "@clerk/nextjs"
+import { Liveblocks } from "@liveblocks/node"
+import { NextRequest } from "next/server"
+
+const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY!
+
+const liveblocks = new Liveblocks({
+  secret: API_KEY!,
+})
+
+export async function POST(request: NextRequest) {
+  const clerkUser = await currentUser()
+
+  if (!clerkUser) {
+    return new Response("Unauthorized", { status: 401 })
+  }
+
+  const res = await fetch(`http://localhost:8787/api/user?id=${clerkUser.id}`)
+  const user = (await res.json()) as User
+
+  // Create a session for the current user
+  // userInfo is made available in Liveblocks presence hooks, e.g. useOthers
+  const session = liveblocks.prepareSession(user.id, {
+    userInfo: {
+      id: user.id,
+      name: user.name,
+      email: user.email,
+    },
+  })
+
+  // Give the user access to the room
+  user.sandbox.forEach((sandbox) => {
+    session.allow(`${sandbox.id}`, session.FULL_ACCESS)
+  })
+  user.usersToSandboxes.forEach((userToSandbox) => {
+    session.allow(`${userToSandbox.sandboxId}`, session.FULL_ACCESS)
+  })
+
+  // Authorize the user and return the result
+  const { body, status } = await session.authorize()
+  return new Response(body, { status })
+}