jwt in headers+localstorage instead of httpOnly cookie (#117)

frontend/src/atoms/rpc.ts

@@ -5,6 +5,10 @@ import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
 export const rpcClientState = selector({
   key: 'rpcClientState',
   get: ({ get }) =>
-    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+    new RPCClient(
+      get(rpcHTTPEndpoint),
+      get(rpcWebSocketEndpoint),
+      localStorage.getItem('token') ?? ''
+    ),
   dangerouslyAllowMutability: true,
 })

frontend/src/components/Logout.tsx

@@ -10,10 +10,8 @@ export default function Logout() {
   const url = useRecoilValue(serverURL)
 
   const logout = async () => {
-    const res = await fetch(`${url}/auth/logout`)
-    if (res.ok) {
-      navigate('/login')
-    }
+    localStorage.removeItem('token')
+    navigate('/login')
   }
 
   const { i18n } = useI18n()

frontend/src/lib/httpClient.ts

@@ -7,7 +7,7 @@ export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
 
 
 const fetcher = async <T>(url: string, opt?: RequestInit) => {
-  const res = await fetch(url, opt)
+  const jwt = localStorage.getItem('token')
 
   if (opt && !opt.headers) {
     opt.headers = {
@@ -15,6 +15,12 @@ const fetcher = async <T>(url: string, opt?: RequestInit) => {
     }
   }
 
+  if (opt?.headers) {
+    opt.headers = { ...opt.headers, 'X-Authentication': jwt ?? '' }
+  }
+
+  const res = await fetch(url, opt)
+
   if (!res.ok) {
     throw await res.text()
   }

frontend/src/lib/rpcClient.ts

@@ -15,13 +15,15 @@ export class RPCClient {
   private seq: number
   private httpEndpoint: string
   private readonly _socket$: WebSocketSubject<any>
+  private readonly token?: string
 
-  constructor(httpEndpoint: string, webSocketEndpoint: string) {
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
     this.seq = 0
     this.httpEndpoint = httpEndpoint
     this._socket$ = webSocket<any>({
-      url: webSocketEndpoint
+      url: token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
     })
+    this.token = token
   }
 
   public get socket$(): Observable<RPCResponse<RPCResult[]>> {
@@ -49,6 +51,9 @@ export class RPCClient {
   private async sendHTTP<T>(req: RPCRequest) {
     const res = await fetch(this.httpEndpoint, {
       method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
       body: JSON.stringify({
         ...req,
         id: this.incrementSeq(),

frontend/src/views/Archive.tsx

@@ -69,7 +69,7 @@ export default function Downloaded() {
         pushMessage(e, 'error')
         navigate('/login')
       },
-      (d) => files$.next(d),
+      (d) => files$.next(d ?? []),
     )
   )()
 

frontend/src/views/Login.tsx

@@ -54,7 +54,7 @@ export default function Login() {
   }
 
   const login = async () => {
-    const task = ffetch(`${url}/auth/login`, {
+    const task = ffetch<string>(`${url}/auth/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -68,11 +68,15 @@ export default function Login() {
     pipe(
       task,
       matchW(
-        (l) => {
+        (error) => {
           setFormHasError(true)
-          pushMessage(l, 'error')
+          pushMessage(error, 'error')
         },
-        () => navigateAndReload()
+        (token) => {
+          console.log(token)
+          localStorage.setItem('token', token)
+          navigateAndReload()
+        }
       )
     )()
   }