fix(liveblocks-auth): 未认证用户无法加入房间

修复了未认证用户能够加入房间的问题，现在后端会检查用户是否经过身份验证，只有在提供有效的Clerk授权标头和存在当前用户的情况下，才会为用户创建Liveblocks会话并允许访问特定房间。此外，更新了`liveblocks.config.ts`中的导出以符合新的认证机制。

BREAKING CHANGE: 依赖于LiveblocksProvider中的`publicApiKey`属性的现有实现将需要移除该属性并迁移到使用新的`authEndpoint`属性，以指向新的认证路由。

app/api/liveblocks-auth/route.ts

@@ -1,7 +1,49 @@
-import { Liveblocks } from "@liveblocks/node";  
-import {liveblocksSCKey} from "@/liveblocks.config";
+import { Liveblocks } from "@liveblocks/node";
+import { liveblocksSCKey } from "@/liveblocks.config";
 
-const liveblocksSecretKey= liveblocksSCKey;
+import { ConvexHttpClient } from "convex/browser";
+
+import { api } from "@/convex/_generated/api";
+import { auth, currentUser } from "@clerk/nextjs/server";
+
+const convex = new ConvexHttpClient(
+  process.env.NEXT_PUBLIC_CONVEX_URL!
+);
+
+const liveblocksSecretKey = liveblocksSCKey;
 const liveblocks = new Liveblocks({
   secret: liveblocksSCKey ?? "",
 });
+
+export async function POST(request: Request) {
+  const authorization = auth();
+  const user = await currentUser();
+
+  if (!authorization || !user) {
+    return new Response("Unauthorized", { status: 403 });
+  }
+
+  const { room } = await request.json(); // the room we trying to join
+  const board = await convex.query(api.board.get, { id: room });
+
+
+  if (board?.orgId !== authorization.orgId) {
+    return new Response("Unauthorized", { status: 403 });
+  }
+
+  const userInfo = {
+    name: user.firstName || "Teammate",
+    imageUrl: user.imageUrl,
+  };
+
+  const session = liveblocks.prepareSession(user.id, { userInfo });
+
+  if (room) {
+    session.allow(room, session.FULL_ACCESS);
+  }
+
+  const { status, body } = await session.authorize();
+
+  return new Response(body, { status });
+
+}

app/board/[boardId]/_components/canvas.tsx

@@ -4,10 +4,17 @@ import { Info } from "./info";
 import { Participants } from "./participants";
 import { Toolbar } from "./toolbar";
 
+import { useSelf } from "@liveblocks/react";
+
 interface CanvasProps {
   boardId: string;
 }
 export const Canvas = ({ boardId }: CanvasProps) => {
+
+  const info = useSelf((me) => me.info);
+
+  console.log(info);
+
   return (
     <main className="w-full h-full relative bg-neutral-100 touch-none">
       <Info />

components/room.tsx

@@ -17,8 +17,12 @@ const apiKey = liveblocksPBKey ?? "";
 
 export const Room = ({ children, roomId, fallback }: RoomProps) => {
   return (
-    <LiveblocksProvider publicApiKey={apiKey}>
+    // publicApiKey={apiKey}  publicApiKey and authEndpoint can only one works
+    <LiveblocksProvider authEndpoint={"/api/liveblocks-auth"}>
+
       <RoomProvider id={roomId} initialPresence={{}}>
+        {/* // there some problem that the board should not be access by a non-privledged user
+      // the ui canvas should in the loading status when such users trying to join a board room which not belong to them */}
         <ClientSideSuspense fallback={fallback}>
           {() => children}
         </ClientSideSuspense>

convex/board.ts

@@ -178,3 +178,5 @@ export const get = query({
     return board;
   },
 });
+
+

liveblocks.config.ts

@@ -6,6 +6,12 @@ import { createRoomContext } from "@liveblocks/react";
 const liveblocksPBKey = process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY;
 const liveblocksSCKey = process.env.NEXT_PUBLIC_LIVEBLOCKS_SECRET_KEY;
 
+// it replace by the LiveblocksProvider { publicApiKey or authEndpoint }
+const client = createClient({
+  authEndpoint: "/api/liveblocks-auth"
+});
+
+
 declare global {
   interface Liveblocks {
     // Each user's Presence, for useMyPresence, useOthers, etc.
@@ -22,11 +28,11 @@ declare global {
 
     // Custom user info set when authenticating with a secret key
     UserMeta: {
-      id: string;
-      info: {
+      id?: string;
+      info?: {
         // Example properties, for useSelf, useUser, useOthers, etc.
-        // name: string;
-        // avatar: string;
+        name?: string;
+        picture?: string;
       };
     };
 
@@ -52,4 +58,4 @@ declare global {
   }
 }
 
-export { liveblocksPBKey ,liveblocksSCKey };
+export { liveblocksPBKey, liveblocksSCKey };