rough tauri auth (#167)

src/App.tsx

@@ -20,6 +20,7 @@ import { Stream } from './components/Stream'
 import ModalContainer from 'react-modal-promise'
 import { EngineCommandManager } from './lang/std/engineConnection'
 import { isOverlap } from './lib/utils'
+import { SetToken } from './components/TokenInput'
 
 export function App() {
   const cam = useRef()
@@ -46,6 +47,7 @@ export function App() {
     setMediaStream,
     setIsStreamReady,
     isStreamReady,
+    token,
   } = useStore((s) => ({
     editorView: s.editorView,
     setEditorView: s.setEditorView,
@@ -71,6 +73,7 @@ export function App() {
     setMediaStream: s.setMediaStream,
     isStreamReady: s.isStreamReady,
     setIsStreamReady: s.setIsStreamReady,
+    token: s.token
   }))
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
@@ -135,15 +138,18 @@ export function App() {
       codeBasedSelections,
     })
   }
-  const engineCommandManager = useMemo(() => new EngineCommandManager({
-    setMediaStream,
-    setIsStreamReady,
-  }), [])
+  const engineCommandManager = useMemo(() => {
+    return new EngineCommandManager({
+      setMediaStream,
+      setIsStreamReady,
+      token,
+    })
+  }, [token])
   useEffect(() => {
     return () => {
-      engineCommandManager.tearDown()
+      engineCommandManager?.tearDown()
     }
-  }, [])
+  }, [engineCommandManager])
 
   useEffect(() => {
     if (!isStreamReady) return
@@ -249,7 +255,9 @@ export function App() {
     <div className="h-screen">
       <ModalContainer />
       <Allotment snap={true}>
-        <Allotment vertical defaultSizes={[400, 1, 1]} minSize={20}>
+
+        <Allotment vertical defaultSizes={[5, 400, 1, 1]} minSize={20}>
+          <SetToken />
           <div className="h-full flex flex-col items-start">
             <PanelHeader title="Editor" />
             {/* <button

src/Auth.tsx

@@ -2,12 +2,22 @@ import useSWR from 'swr'
 import fetcher from './lib/fetcher'
 import withBaseUrl from './lib/withBaseURL'
 import { App } from './App'
+import { SetToken } from './components/TokenInput'
+import { useStore } from './useStore'
 
 export const Auth = () => {
   const { data: user } = useSWR(withBaseUrl('/user'), fetcher) as any
+  const  {token} = useStore((s) => ({
+    token: s.token
+  }))
+
   const isLocalHost =
     typeof window !== 'undefined' && window.location.hostname === 'localhost'
 
+  if ((window as any).__TAURI__ && !token) {
+    return <SetToken />
+  }
+
   if (!user && !isLocalHost) {
     return (
       <>

src/components/TokenInput.tsx

@@ -0,0 +1,26 @@
+import { useStore } from '../useStore'
+
+export const SetToken = () => {
+  const { token, setToken } = useStore((s) => ({
+    token: s.token,
+    setToken: s.setToken,
+  }))
+
+  if (!(window as any).__TAURI__) {
+    return <div />
+  }
+  return (
+    <div className="w-full flex gap-2">
+      token:
+      <input
+        type="text"
+        className="flex-grow font-mono"
+        value={token}
+        onChange={(e) => {
+          setToken(e.target.value)
+        }}
+        placeholder="<your-token>"
+      />
+    </div>
+  )
+}

src/lang/std/engineConnection.ts

@@ -95,9 +95,11 @@ export class EngineCommandManager {
   constructor({
     setMediaStream,
     setIsStreamReady,
+    token,
   }: {
     setMediaStream: (stream: MediaStream) => void
     setIsStreamReady: (isStreamReady: boolean) => void
+    token?: string
   }) {
     this.waitForReady = new Promise((resolve) => {
       this.resolveReady = resolve
@@ -109,8 +111,11 @@ export class EngineCommandManager {
     this.pc.createDataChannel('unreliable_modeling_cmds')
     this.socket.addEventListener('open', (event) => {
       console.log('Connected to websocket, waiting for ICE servers')
-      setIsStreamReady(true)
-      this.resolveReady()
+      if (token) {
+        this.socket?.send(
+          JSON.stringify({ headers: { Authorization: `Bearer ${token}` } })
+        )
+      }
     })
 
     this.socket.addEventListener('close', (event) => {
@@ -122,7 +127,7 @@ export class EngineCommandManager {
     })
 
     this?.socket?.addEventListener('message', (event) => {
-      if (!this.socket) return
+      if (!this.socket || !this.pc) return
 
       //console.log('Message from server ', event.data);
       if (event.data instanceof Blob) {
@@ -192,6 +197,8 @@ export class EngineCommandManager {
             this.lossyDataChannel = event.channel
             console.log('accepted lossy data channel', event.channel.label)
             this.lossyDataChannel.addEventListener('open', (event) => {
+              setIsStreamReady(true)
+              this.resolveReady()
               console.log('lossy data channel opened', event)
             })
             this.lossyDataChannel.addEventListener('close', (event) => {

src/useStore.ts

@@ -161,6 +161,8 @@ export interface StoreState {
     path: string
   }[]
   setHomeMenuItems: (items: { name: string; path: string }[]) => void
+  token: string
+  setToken: (token: string) => void
 }
 
 let pendingAstUpdates: number[] = []
@@ -314,12 +316,14 @@ export const useStore = create<StoreState>()(
       setHomeShowMenu: (showHomeMenu) => set({ showHomeMenu }),
       homeMenuItems: [],
       setHomeMenuItems: (homeMenuItems) => set({ homeMenuItems }),
+      token: '',
+      setToken: (token) => set({ token }),
     }),
     {
       name: 'store',
       partialize: (state) =>
         Object.fromEntries(
-          Object.entries(state).filter(([key]) => ['code', 'defaultDir'].includes(key))
+          Object.entries(state).filter(([key]) => ['code', 'defaultDir', 'token'].includes(key))
         ),
     }
   )