Expire session after timeout

apps/web/src/components/Onboarding/SetupPassword/SetupPassword.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useMultiForm } from "@umami/components";
-import { useIsPasswordSet } from "@umami/state";
+import { useIsPasswordSet, useSessionTimeout } from "@umami/state";
 import { defaultDerivationPathTemplate } from "@umami/tezos";
 import { FormProvider } from "react-hook-form";
 
@@ -72,6 +72,7 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
   const color = useColor();
   const { onSubmit, isLoading } = useGetSetupPasswordSubmitHandler(mode);
   const isPasswordSet = useIsPasswordSet();
+  const { setupSessionTimeout } = useSessionTimeout();
 
   const form = useMultiForm<FormFields>({
     mode: "all",
@@ -88,6 +89,13 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
 
   const { title, subtitle, buttonLabel, icon } = getModeConfig(mode);
 
+  const handleSubmit = async (values: FormFields) => {
+    await onSubmit(values);
+    if (mode === "new_mnemonic") {
+      setupSessionTimeout();
+    }
+  };
+
   return (
     <ModalContent>
       <ModalHeader>
@@ -106,7 +114,7 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
         </Center>
       </ModalHeader>
       <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
+        <form onSubmit={form.handleSubmit(handleSubmit)}>
           <ModalBody>
             <Flex flexDirection="column" gap="24px">
               <PasswordInput
@@ -142,4 +150,4 @@ export const SetupPassword = ({ mode }: SetupPasswordProps) => {
       </FormProvider>
     </ModalContent>
   );
-};
+};

packages/state/src/hooks/index.ts

@@ -20,3 +20,4 @@ export * from "./setAccountData";
 export * from "./staking";
 export * from "./tokens";
 export * from "./WalletConnect";
+export * from "./session";

packages/state/src/hooks/session.ts

@@ -0,0 +1,20 @@
+
+const SESSION_TIMEOUT = 30 * 60 * 1000; // 30 minutes from login
+
+export const useSessionTimeout = () => {
+
+  const setupSessionTimeout = () => {
+    try {
+      const timeoutId = window.setTimeout(() => {
+        sessionStorage.clear();
+      }, SESSION_TIMEOUT);
+
+      // Store timeout ID in case we need to clear it
+      sessionStorage.setItem("sessionTimeoutId", timeoutId.toString());
+    } catch (error) {
+      console.error("Failed to setup session timeout:", error);
+    }
+  };
+
+  return { setupSessionTimeout };
+};