FIX: Auth session should be persisted after refresh (fixes #163).

Author: benel

frontend/package.json

@@ -5,7 +5,6 @@
   "type": "module",
   "dependencies": {
     "bootstrap": "^5.2.2",
-    "buffer": "^6.0.3",
     "events": "^3.3.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",

frontend/src/App.jsx

@@ -25,6 +25,8 @@ function App() {
           setTypes(rows);
         }
       );
+    backend.getSession()
+      .then(setUser);
   }, []);
   return (
     <StrictMode>

frontend/src/components/Bookmark.jsx

@@ -4,7 +4,7 @@ import { v4 as uuid } from 'uuid';
 
 function Bookmark({backend, id}) {
   const [isBookmarked, setIsBookmarked] = useState(false);
-  let user = backend.credentials.name;
+  let user = backend.user;
 
   const getBookmark = useCallback((id, user) =>
     backend.getView({view: 'bookmark', id: user, options: ['include_docs']})

frontend/src/components/FutureDocument.jsx

@@ -57,7 +57,7 @@ function FutureDocumentIcon({relatedTo, verb, setLastUpdate, backend}) {
     let _id = uuid().replace(/-/g, '');
     let doc = {
       _id,
-      editors: [backend.credentials.name],
+      editors: [backend.user],
       dc_creator: '<CREATOR>',
       dc_title: '<TITLE>',
       dc_issued: new Date(),

frontend/src/components/Menu.jsx

@@ -33,9 +33,12 @@ function Authentication({backend, user, setUser}) {
   let handleSubmit = (e) => {
     e.preventDefault();
     let credentials = Object.fromEntries(new FormData(e.target).entries());
-    backend.authenticate(credentials)
-      .then(() => setUser(credentials.name))
-      .catch(console.error);
+    backend.postSession(credentials)
+      .then((x) => {
+        if (x) {
+          setUser(x);
+        }
+      });
   };
 
   if (user) return (
@@ -44,7 +47,7 @@ function Authentication({backend, user, setUser}) {
         {user}
       </Dropdown.Toggle>
       <Dropdown.Menu>
-        <SignOutAction/>
+        <SignOutAction {...{setUser, backend}} />
       </Dropdown.Menu>
     </Dropdown>
   );

frontend/src/components/SignOutAction.jsx

@@ -1,8 +1,14 @@
 import Dropdown from 'react-bootstrap/Dropdown';
 
-function SignOutAction() {
+function SignOutAction({setUser, backend}) {
+
+  const handleSignOut = () => {
+    backend.deleteSession();
+    setUser();
+  };
+
   return (
-    <Dropdown.Item onClick={() => window.location.reload()}>
+    <Dropdown.Item onClick={handleSignOut}>
       Sign out
     </Dropdown.Item>
   );

frontend/src/hyperglosae.js

@@ -1,11 +1,7 @@
-import {Buffer} from 'buffer';
-
 const service = '/api';
 
 function Hyperglosae(logger) {
 
-  this.credentials = {};
-
   this.getView = ({view, id, options = []}) =>
     fetch(`${
       service
@@ -23,18 +19,9 @@ function Hyperglosae(logger) {
     fetch(`${service}/${id}`)
       .then(x => x.json());
 
-  let basicAuthentication = ({force}) => {
-    let {name, password} = this.credentials;
-    if (!force && !name && !password) return ({});
-    return ({
-      'Authorization': 'Basic ' + Buffer.from(`${name}:${password}`).toString('base64')
-    });
-  };
-
   this.putDocument = (doc, uri) =>
     fetch(`${service}/${uri || doc._id}`, {
       method: 'PUT',
-      headers: basicAuthentication({force: false}),
       body: JSON.stringify(doc)
     })
       .then(x => x.json())
@@ -49,7 +36,6 @@ function Hyperglosae(logger) {
   this.deleteDocument = ({_id, _rev}) =>
     fetch(`${service}/${_id}?rev=${_rev}`, {
       method: 'DELETE',
-      headers: basicAuthentication({ force: false })
     })
       .then(x => x.json())
       .then(x => {
@@ -63,7 +49,6 @@ function Hyperglosae(logger) {
   this.getDocumentMetadata = (id) =>
     fetch(`${service}/${id}`, {
       method: 'HEAD',
-      headers: basicAuthentication({ force: false })
     });
 
   this.putAttachment = (id, attachment, callback) =>
@@ -76,7 +61,6 @@ function Hyperglosae(logger) {
         fetch(`${service}/${id}/${attachment.name}`, {
           method: 'PUT',
           headers: {
-            ...basicAuthentication({ force: false }),
             // ETag is the header that carries the current rev.
             'If-Match': x.headers.get('ETag'),
             'Content-Type': attachment.type
@@ -86,19 +70,34 @@ function Hyperglosae(logger) {
       };
     });
 
-  this.authenticate = ({name, password}) => {
-    this.credentials = {name, password};
-    return fetch(`${service}`, {
-      method: 'GET',
-      headers: basicAuthentication({force: true})
+  this.getSession = () =>
+    fetch(`${service}/_session`)
+      .then(x => x.json())
+      .then(x => {
+        this.user = x.userCtx?.name;
+        return this.user;
+      });
+
+  this.postSession = ({name, password}) =>
+    fetch(`${service}/_session`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: `name=${name}&password=${password}`
     })
       .then(x => x.json())
       .then(x => {
-        if (x.reason) {
-          this.credentials = {};
-          logger(x.reason);
-          throw new Error(x.reason);
-        }
+        if (!x.reason) return this.user = name;
+        logger(x.reason);
+      });
+
+  this.deleteSession = () => {
+    fetch(`${service}/_session`, {
+      method: 'DELETE'
+    })
+      .then(() => {
+        this.user = null;
       });
   };
 
@@ -125,7 +124,7 @@ function Hyperglosae(logger) {
   };
 
   this.refreshDocuments = (callback) => {
-    let id = this.credentials.name || 'PUBLIC';
+    let id = this.user || 'PUBLIC';
     this.getView({view: 'all_documents', id, options: ['include_docs']})
       .then((rows) => {
         callback(

frontend/vite.config.js

@@ -16,6 +16,11 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api\/_users/, ''),
       },
+      '/api/_session': {
+        target: 'http://localhost:5984/_session',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api\/_session/, ''),
+      },
       '/api': {
         target: 'http://localhost:5984/hyperglosae',
         changeOrigin: true,

settings/haproxy.cfg

@@ -30,6 +30,7 @@ frontend http-in
 backend couchdb
     option httpchk GET /_up
     http-check disable-on-404
+    http-request replace-path /api/_session /_session
     http-request replace-path /api/_users/(.*) /_users/\1
     http-request replace-path /api(/)?(.*) /hyperglosae/\2
     server couchdb1 backend:5984 check inter 5s