fix: token for multiplayer

src/AppDev.tsx

@@ -15,7 +15,7 @@ function App() {
 
   const [persistanceApiUrl, setPersistanceApiUrl] = useState<boolean>(false);
   const [assetsApiUrl, setAssetsApiUrl] = useState<boolean>(false);
-  const [token, setToken] = useState<string>('');
+  const [token, setToken] = useState<string>('Bearer');
   const [initUrl, setInitUrl] = useState<boolean>(false);
   const [owner, setOwner] = useState<boolean>(false);
   const [clearOnLeave, setClearOnLeave] = useState<boolean>(true);

src/components/MultiplayerEditor.tsx

@@ -10,6 +10,7 @@ const components = {
 export default function MultiplayerEditor({
   persistanceApiUrl,
   assetsApiUrl,
+  token,
   websocketApiUrl,
   roomId,
   initUrl,
@@ -26,6 +27,7 @@ export default function MultiplayerEditor({
     ...useMultiplayer(
       persistanceApiUrl,
       assetsApiUrl,
+      token,
       websocketApiUrl,
       roomId,
       initUrl,

src/components/TldrawEditor.tsx

@@ -35,7 +35,8 @@ export default function TldrawEditor({
 
   if (!token && !userInfoApiUrl) throw new Error('Token or userInfoApiUrl is required');
 
-  if (token) setToken(token);
+  if (token?.startsWith('Bearer ')) setToken(token);
+  else throw new Error('Invalid token');
   if (userInfoApiUrl) setUserInfoApiUrl(userInfoApiUrl);
 
   useEffect(() => {
@@ -75,6 +76,7 @@ export default function TldrawEditor({
   const multiplayerProps = {
     persistanceApiUrl,
     assetsApiUrl,
+    token,
     websocketApiUrl: websocketApiUrl!,
     roomId: roomId!,
     initUrl,

src/hooks/useMultiplayer.ts

@@ -1,6 +1,6 @@
 import { useAssets } from '../hooks/useAssets.ts';
 import { findLanguage } from '../utils/i18nUtils';
-import { getToken } from '../utils/soffitUtils.ts';
+import { getJwt, parseJwt } from '../utils/soffitUtils.ts';
 import { donwloadImageFile } from '../utils/tldrawUtils.ts';
 import { getDocData, updateDoc } from '../utils/yjsUtils.ts';
 import { toBlob, usePersistance } from './usePersistance.ts';
@@ -14,6 +14,7 @@ import { WebsocketProvider } from 'y-websocket';
 export function useMultiplayer(
   persistanceApiUrl: string | undefined,
   assetsApiUrl: string | undefined,
+  token: string | undefined,
   websocketApiUrl: string,
   roomId: string,
   initUrl: string | undefined,
@@ -127,9 +128,14 @@ export function useMultiplayer(
       tldrawRef.current = app;
 
       if (app.currentUser) {
-        const {
-          decoded: { name },
-        } = await getToken();
+        let name;
+        if (!token) {
+          const { decoded } = await getJwt();
+          name = decoded.name;
+        } else {
+          const decoded = parseJwt(token);
+          name = decoded.name;
+        }
         app.currentUser.metadata = { name: name != undefined && !name.startsWith('guest') ? name : undefined };
       }
 
@@ -141,7 +147,7 @@ export function useMultiplayer(
 
       if (!initUrl) setIsReady(true);
     }, 10),
-    [roomId],
+    [roomId, token],
   );
 
   const onChangePage = useCallback(

src/types/MultiplayerEditorProps.ts

@@ -4,6 +4,7 @@ import { WebsocketProvider } from 'y-websocket';
 export type MultiplayerEditorProps = {
   persistanceApiUrl?: string;
   assetsApiUrl?: string;
+  token?: string;
   websocketApiUrl: string;
   roomId: string;
   initUrl?: string;

src/utils/axiosUtils.ts

@@ -1,4 +1,4 @@
-import { getToken } from './soffitUtils.ts';
+import { getJwt } from './soffitUtils.ts';
 import axios from 'axios';
 import throttle from 'lodash.throttle';
 
@@ -19,12 +19,12 @@ const init = async () => {
     const {
       encoded,
       decoded: { exp, iat },
-    } = await getToken();
+    } = await getJwt();
     token = `Bearer ${encoded}`;
     timeout = (exp - iat) * 1000 * 0.75;
     renewToken = throttle(async () => {
       try {
-        const { encoded } = await getToken();
+        const { encoded } = await getJwt();
         token = `Bearer ${encoded}`;
       } catch (e) {
         // nothing to do

src/utils/soffitUtils.ts

@@ -6,10 +6,24 @@ const setUserInfoApiUrl = (url: string): void => {
   userInfoApiUrl = url;
 };
 
-const getToken = async (): Promise<{ encoded: string; decoded: JWT }> => {
+const getJwt = async (): Promise<{ encoded: string; decoded: JWT }> => {
   const { encoded, decoded } = await oidc({ userInfoApiUrl });
 
   return { encoded, decoded };
 };
 
-export { setUserInfoApiUrl, getToken };
+const parseJwt = (token: string): JWT => {
+  const base64Url = token.split('.')[1];
+  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const jsonPayload = decodeURIComponent(
+    window
+      .atob(base64)
+      .split('')
+      .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+      .join(''),
+  );
+
+  return JSON.parse(jsonPayload);
+};
+
+export { setUserInfoApiUrl, getJwt, parseJwt };