diff --git a/app/api/liveblocks-auth/route.ts b/app/api/liveblocks-auth/route.ts
index 5b319f1..d081c82 100644
--- a/app/api/liveblocks-auth/route.ts
+++ b/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 });
+
+}
diff --git a/app/board/[boardId]/_components/canvas.tsx b/app/board/[boardId]/_components/canvas.tsx
index ebb9357..a2e19c3 100644
--- a/app/board/[boardId]/_components/canvas.tsx
+++ b/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 />
diff --git a/components/room.tsx b/components/room.tsx
index 959e9de..11a3102 100644
--- a/components/room.tsx
+++ b/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>
diff --git a/convex/board.ts b/convex/board.ts
index 60ecbca..d841615 100644
--- a/convex/board.ts
+++ b/convex/board.ts
@@ -178,3 +178,5 @@ export const get = query({
     return board;
   },
 });
+
+
diff --git a/liveblocks.config.ts b/liveblocks.config.ts
index 84db0e6..1c81223 100644
--- a/liveblocks.config.ts
+++ b/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 };