FIX: Auth session should be persisted after refresh

features/support/env.rb

@@ -43,6 +43,7 @@ def sign_in(username, password)
 end
 
 def sign_out
+  execute_script("localStorage.removeItem('hyperglosae-basic-auth');")
   refresh
 end
 

frontend/src/components/Menu.js

@@ -28,7 +28,9 @@ function Menu({backend}) {
 }
 
 function Authentication({backend}) {
-  const [credentials, setCredentials] = useState();
+  const [credentials, setCredentials] = useState({
+    ...backend.credentials
+  });
 
   let handleSubmit = (e) => {
     e.preventDefault();
@@ -37,7 +39,7 @@ function Authentication({backend}) {
       .then(() => setCredentials(credentials));
   };
 
-  if (credentials) return (
+  if (credentials.name) return (
     <Navbar.Text>
       {credentials.name}
     </Navbar.Text>

frontend/src/hyperglosae.js

@@ -2,10 +2,30 @@ import {Buffer} from 'buffer';
 
 const service = 'http://localhost:5984/hyperglosae';
 
-function Hyperglosae(logger) {
+const LOCALSTORAGE_BASIC_AUTH_KEY = 'hyperglosae-basic-auth';
 
+function Hyperglosae(logger) {
   this.credentials = {};
 
+  let persistBasicAuth = () => {
+    if (!this.credentials) return;
+    localStorage.setItem(LOCALSTORAGE_BASIC_AUTH_KEY, JSON.stringify(this.credentials));
+  };
+
+  let retrieveBasicAuth = () => {
+    if (localStorage.getItem(LOCALSTORAGE_BASIC_AUTH_KEY)) {
+      try {
+        const basicAuth = JSON.parse(localStorage.getItem(LOCALSTORAGE_BASIC_AUTH_KEY));
+        this.credentials = {...this.credentials, ...basicAuth};
+      } catch {
+        console.error('Unable to parse basic auth');
+        localStorage.removeItem(LOCALSTORAGE_BASIC_AUTH_KEY);
+      }
+    }
+  };
+
+  retrieveBasicAuth();
+
   this.getView = ({view, id, options = []}) =>
     fetch(`${
       service
@@ -24,10 +44,11 @@ function Hyperglosae(logger) {
       .then(x => x.json());
 
   let basicAuthentication = ({force}) => {
-    let {name, password} = this.credentials;
-    if (!force && !name && !password) return ({});
+    retrieveBasicAuth();
+    let { base64} = this.credentials;
+    if (!force && !base64) return ({});
     return ({
-      'Authorization': 'Basic ' + Buffer.from(`${name}:${password}`).toString('base64')
+      'Authorization': 'Basic ' + base64
     });
   };
 
@@ -46,7 +67,12 @@ function Hyperglosae(logger) {
       });
 
   this.authenticate = ({name, password}) => {
-    this.credentials = {name, password};
+    this.credentials = {
+      base64: Buffer.from(`${name}:${password}`).toString('base64'),
+      name
+    };
+    persistBasicAuth();
+
     return fetch(`${service}`, {
       method: 'GET',
       headers: basicAuthentication({force: true})
@@ -55,6 +81,7 @@ function Hyperglosae(logger) {
       .then(x => {
         if (x.reason) {
           this.credentials = {};
+          localStorage.removeItem(LOCALSTORAGE_BASIC_AUTH_KEY);
           logger(x.reason);
           throw new Error(x.reason);
         }