1 files changed, 41 insertions, 14 deletions
diff --git a/packages/demobank-ui/src/hooks/backend.ts b/packages/demobank-ui/src/hooks/backend.ts
index 83df53a1a..f7c255ead 100644
--- a/packages/demobank-ui/src/hooks/backend.ts
+++ b/packages/demobank-ui/src/hooks/backend.ts
@@ -14,11 +14,20 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { canonicalizeBaseUrl } from "@gnu-taler/taler-util";
+import {
+  Codec,
+  buildCodecForObject,
+  buildCodecForUnion,
+  canonicalizeBaseUrl,
+  codecForBoolean,
+  codecForConstString,
+  codecForString,
+} from "@gnu-taler/taler-util";
 import {
   ErrorType,
   HttpError,
   RequestError,
+  buildStorageKey,
   useLocalStorage,
 } from "@gnu-taler/web-util/browser";
 import {
@@ -51,6 +60,26 @@ interface LoggedOut {
   status: "loggedOut";
 }
 
+export const codecForBackendStateLoggedIn = (): Codec<LoggedIn> =>
+  buildCodecForObject<LoggedIn>()
+    .property("status", codecForConstString("loggedIn"))
+    .property("username", codecForString())
+    .property("password", codecForString())
+    .property("isUserAdministrator", codecForBoolean())
+    .build("BackendState.LoggedIn");
+
+export const codecForBackendStateLoggedOut = (): Codec<LoggedOut> =>
+  buildCodecForObject<LoggedOut>()
+    .property("status", codecForConstString("loggedOut"))
+    .build("BackendState.LoggedOut");
+
+export const codecForBackendState = (): Codec<BackendState> =>
+  buildCodecForUnion<BackendState>()
+    .discriminateOn("status")
+    .alternative("loggedIn", codecForBackendStateLoggedIn())
+    .alternative("loggedOut", codecForBackendStateLoggedOut())
+    .build("BackendState");
+
 export function getInitialBackendBaseURL(): string {
   const overrideUrl =
     typeof localStorage !== "undefined"
@@ -79,29 +108,27 @@ export interface BackendStateHandler {
   logOut(): void;
   logIn(info: BackendCredentials): void;
 }
+
+const BACKEND_STATE_KEY = buildStorageKey(
+  "backend-state",
+  codecForBackendState(),
+);
+
 /**
  * Return getters and setters for
  * login credentials and backend's
  * base URL.
  */
 export function useBackendState(): BackendStateHandler {
-  const { value, update } = useLocalStorage(
-    "backend-state",
-    JSON.stringify(defaultState),
+  const { value: state, update } = useLocalStorage(
+    BACKEND_STATE_KEY,
+    defaultState,
   );
 
-  let parsed;
-  try {
-    parsed = JSON.parse(value!);
-  } catch {
-    parsed = undefined;
-  }
-  const state: BackendState = !parsed?.status ? defaultState : parsed;
-
   return {
     state,
     logOut() {
-      update(JSON.stringify({ ...defaultState }));
+      update(defaultState);
     },
     logIn(info) {
       //admin is defined by the username
@@ -110,7 +137,7 @@ export function useBackendState(): BackendStateHandler {
         ...info,
         isUserAdministrator: info.username === "admin",
       };
-      update(JSON.stringify(nextState));
+      update(nextState);
     },
   };
 }