Improved joining flow

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@huddle01/iframe": "0.0.12",
+    "@huddle01/server-sdk": "^2.0.5",
     "@types/node": "20.1.4",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
@@ -22,6 +23,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.2",
+    "types": "link:@huddle01/iframe/types",
     "typescript": "5.0.4"
   }
 }

src/app/[roomId]/page.tsx

@@ -7,7 +7,7 @@ import HuddleLogo from "../components/HuddleLogo";
 import DocBtn from "../components/DocBtn";
 
 import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 export default function Home({ params }: { params: { roomId: string } }) {
   const [isDark, setIsDark] = useState(true);
@@ -40,20 +40,24 @@ export default function Home({ params }: { params: { roomId: string } }) {
   });
 
   return (
-    <main className="h-screen flex items-center flex-col">
-      <div className="flex items-center justify-between w-full py-3 px-6">
+    <main className='h-screen flex items-center flex-col'>
+      <div className='flex items-center justify-between w-full py-3 px-6'>
         <HuddleLogo />
         <DocBtn />
       </div>
-      <div className="flex items-center w-full flex-1">
-        <Customize setIsDark={setIsDark} isDark={isDark} />
-        <div className="aspect-video w-full mx-auto p-4 flex">
+      <div className='flex items-center w-full flex-1'>
+        <Customize
+          setIsDark={setIsDark}
+          isDark={isDark}
+          roomId={params.roomId}
+        />
+        <div className='aspect-video w-full mx-auto p-4 flex'>
           <HuddleIframe
             // if you add autojoin = true, skips the lobby and goes directly to the room
-            roomUrl={`https://iframe.huddle01.com/${params.roomId}/lobby?displayName=axitdoteth&autojoin=true`}
+            roomUrl={`http://localhost:3001/${params.roomId}/lobby?token=${token}`}
             // if you don't add displayName, you'll be directed to the lobby
             // roomUrl={`https://iframe.huddle01.com/${params.roomId}/`}
-            className="w-full aspect-video"
+            className='w-full aspect-video'
             theme={isDark ? darkTheme : lightTheme}
             projectId={process.env.NEXT_PUBLIC_PROJECT_ID || ""}
           />

src/app/api/room/route.ts

@@ -6,7 +6,7 @@ class Huddle01CreateRoomError extends Error {
   }
 }
 
-export async function GET(request: Request) {
+export async function GET() {
   const API_KEY = process.env.HUDDLE_API_KEY;
 
   if (!API_KEY) {
@@ -22,7 +22,7 @@ export async function GET(request: Request) {
   }
   try {
     const response = await fetch(
-      "https://api.huddle01.com/api/v1/create-iframe-room",
+      "https://api.huddle01.com/api/v1/create-room",
       {
         method: "POST",
         body: JSON.stringify({

src/app/api/token/route.ts

@@ -0,0 +1,48 @@
+import { AccessToken, Role } from '@huddle01/server-sdk/auth';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const roomId = searchParams.get('roomId');
+  const walletAddress = searchParams.get('walletAddress');
+
+  console.log({ roomId, walletAddress });
+
+  if (!roomId) {
+    return new Response('Missing roomId', { status: 400 });
+  }
+
+  console.log('HUDDLE_API_KEY', process.env.HUDDLE_API_KEY);
+
+  const accessToken = new AccessToken({
+    apiKey: process.env.HUDDLE_API_KEY as string,
+    roomId: roomId as string,
+    role: Role.HOST,
+    permissions: {
+      admin: true,
+      canConsume: true,
+      canProduce: true,
+      canProduceSources: {
+        cam: true,
+        mic: true,
+        screen: true,
+      },
+      canRecvData: true,
+      canSendData: true,
+      canUpdateMetadata: true,
+    },
+    options: {
+      metadata: {
+        walletAddress,
+      },
+    },
+  });
+
+  const token = await accessToken.toJwt();
+
+  console.log({ token });
+
+  return new Response(token, {
+    status: 200,
+  });
+}

src/app/components/Customize/Customize.tsx

@@ -1,22 +1,22 @@
-import React, { Dispatch, SetStateAction } from "react";
-import Essentials from "./Essentials/Essentials";
-import Inputs from "./Inputs/Inputs";
-import Wallets from "./Wallets/Wallets";
+import React, { Dispatch, SetStateAction } from 'react';
+import Essentials from './Essentials/Essentials';
+import Inputs from './Inputs/Inputs';
+import Wallets from './Wallets/Wallets';
 // import Additional from "./Additional/Additional";
-import Themes, { Props } from "./Themes/Themes";
+import Themes, { Props } from './Themes/Themes';
 
-const Customize = ({ isDark, setIsDark }: Props) => {
+const Customize = ({ isDark, setIsDark, roomId }: Props) => {
   return (
-    <div className="bg-[#121214] border border-slate-700 p-6 rounded-tr-2xl rounded-br-2xl">
-      <div className="flex justify-between items-center gap-44">
-        <div className="text-slate-300 font-semibold text-xl">Customize</div>
+    <div className='bg-[#121214] border border-slate-700 p-6 rounded-tr-2xl rounded-br-2xl'>
+      <div className='flex justify-between items-center gap-44'>
+        <div className='text-slate-300 font-semibold text-xl'>Customize</div>
         {/* <div className="text-blue-400 font-medium">Reset</div> */}
       </div>
       <Essentials />
-      <Inputs />
+      <Inputs roomId={roomId} />
       <Wallets />
       {/* <Additional /> */}
-      <Themes isDark={isDark} setIsDark={setIsDark} />
+      <Themes isDark={isDark} setIsDark={setIsDark} roomId={roomId} />
     </div>
   );
 };