use sessionStorage for keys

Author: pcarranzav

apps/connect/src/Boot.tsx

@@ -18,17 +18,18 @@ declare module '@tanstack/react-router' {
 
 const queryClient = new QueryClient();
 
-const storage = localStorage;
+const addressStorage = localStorage;
+const keysStorage = sessionStorage;
 
 export function Boot() {
   // check if the user is already authenticated on initial render
   const initialRenderAuthCheckRef = useRef(false);
   // using a layout effect to avoid a re-render
   useLayoutEffect(() => {
     if (!initialRenderAuthCheckRef.current) {
-      const accountAddress = Connect.loadAccountAddress(storage);
+      const accountAddress = Connect.loadAccountAddress(addressStorage);
       if (accountAddress) {
-        const keys = Connect.loadKeys(storage, accountAddress);
+        const keys = Connect.loadKeys(keysStorage, accountAddress);
         if (keys) {
           // user is already authenticated, set state
           StoreConnect.store.send({

apps/connect/src/components/logout.tsx

@@ -11,7 +11,7 @@ export function Logout() {
   const [isLoading, setIsLoading] = useState(false);
   const disconnectWallet = async () => {
     setIsLoading(true);
-    Connect.wipeAllAuthData(localStorage);
+    Connect.wipeAllAuthData(localStorage, sessionStorage);
     await privyLogout();
     router.navigate({
       to: '/login',

apps/connect/src/routes/login.lazy.tsx

@@ -8,7 +8,8 @@ import { type WalletClient, createWalletClient, custom } from 'viem';
 
 const CHAIN = import.meta.env.VITE_HYPERGRAPH_CHAIN === 'geogenesis' ? GEOGENESIS : GEO_TESTNET;
 const syncServerUri = import.meta.env.VITE_HYPERGRAPH_SYNC_SERVER_ORIGIN;
-const storage = localStorage;
+const addressStorage = localStorage;
+const keysStorage = sessionStorage;
 
 export const Route = createLazyFileRoute('/login')({
   component: () => <Login />,
@@ -52,7 +53,16 @@ function Login() {
       console.log(walletClient);
       console.log(rpcUrl);
       console.log(CHAIN);
-      await Connect.login({ walletClient, signer, syncServerUri, storage, identityToken, rpcUrl, chain: CHAIN });
+      await Connect.login({
+        walletClient,
+        signer,
+        syncServerUri,
+        addressStorage,
+        keysStorage,
+        identityToken,
+        rpcUrl,
+        chain: CHAIN,
+      });
     },
     [identityToken, signMessage],
   );

packages/hypergraph/src/connect/auth-storage.ts

@@ -66,11 +66,11 @@ export const wipeAccountAddress = (storage: Storage) => {
   storage.removeItem(buildAccountAddressStorageKey());
 };
 
-export const wipeAllAuthData = (storage: Storage) => {
-  const accountAddress = loadAccountAddress(storage);
-  wipeAccountAddress(storage);
+export const wipeAllAuthData = (addressStorage: Storage, keysAndTokenStorage: Storage) => {
+  const accountAddress = loadAccountAddress(addressStorage);
+  wipeAccountAddress(addressStorage);
   if (accountAddress) {
-    wipeKeys(storage, accountAddress);
-    wipeSyncServerSessionToken(storage, accountAddress);
+    wipeKeys(keysAndTokenStorage, accountAddress);
+    wipeSyncServerSessionToken(keysAndTokenStorage, accountAddress);
   }
 };

packages/hypergraph/src/connect/login.ts

@@ -31,7 +31,8 @@ export async function signup(
   smartAccountClient: SmartAccountClient,
   accountAddress: Address,
   syncServerUri: string,
-  storage: Storage,
+  addressStorage: Storage,
+  keysStorage: Storage,
   identityToken: string,
   chain: Chain,
   rpcUrl: string,
@@ -74,8 +75,8 @@ export async function signup(
   if (!decoded.success) {
     throw new Error('Error creating identity');
   }
-  storeKeys(storage, accountAddress, keys);
-  storeAccountAddress(storage, accountAddress);
+  storeKeys(keysStorage, accountAddress, keys);
+  storeAccountAddress(addressStorage, accountAddress);
   return {
     accountAddress,
     keys,
@@ -86,7 +87,8 @@ export async function restoreKeys(
   signer: Signer,
   accountAddress: Address,
   syncServerUri: string,
-  storage: Storage,
+  addressStorage: Storage,
+  keysStorage: Storage,
   identityToken: string,
 ) {
   const res = await fetch(new URL('/connect/identity/encrypted', syncServerUri), {
@@ -103,8 +105,8 @@ export async function restoreKeys(
     const { keyBox } = decoded;
     const { ciphertext, nonce } = keyBox;
     const keys = await decryptIdentity(signer, ciphertext, nonce);
-    storeKeys(storage, accountAddress, keys);
-    storeAccountAddress(storage, accountAddress);
+    storeKeys(keysStorage, accountAddress, keys);
+    storeAccountAddress(addressStorage, accountAddress);
     return {
       accountAddress,
       keys,
@@ -113,8 +115,13 @@ export async function restoreKeys(
   throw new Error(`Error fetching identity ${res.status}`);
 }
 
-const getAndUpdateSmartAccount = async (walletClient: WalletClient, rpcUrl: string, chain: Chain, storage: Storage) => {
-  const accountAddressFromStorage = loadAccountAddress(storage) as Hex;
+const getAndUpdateSmartAccount = async (
+  walletClient: WalletClient,
+  rpcUrl: string,
+  chain: Chain,
+  addressStorage: Storage,
+) => {
+  const accountAddressFromStorage = loadAccountAddress(addressStorage) as Hex;
   const smartAccountParams: SmartAccountParams = {
     owner: walletClient,
     rpcUrl,
@@ -145,25 +152,27 @@ export async function login({
   walletClient,
   signer,
   syncServerUri,
-  storage,
+  addressStorage,
+  keysStorage,
   identityToken,
   rpcUrl,
   chain,
 }: {
   walletClient: WalletClient;
   signer: Signer;
   syncServerUri: string;
-  storage: Storage;
+  addressStorage: Storage;
+  keysStorage: Storage;
   identityToken: string;
   rpcUrl: string;
   chain: Chain;
 }) {
-  const smartAccountWalletClient = await getAndUpdateSmartAccount(walletClient, rpcUrl, chain, storage);
+  const smartAccountWalletClient = await getAndUpdateSmartAccount(walletClient, rpcUrl, chain, addressStorage);
   if (!smartAccountWalletClient.account) {
     throw new Error('Smart account wallet client account not found');
   }
   const accountAddress = smartAccountWalletClient.account.address;
-  // const keys = loadKeys(storage, accountAddress);
+
   let authData: {
     accountAddress: Address;
     keys: IdentityKeys;
@@ -176,13 +185,14 @@ export async function login({
       smartAccountWalletClient,
       accountAddress,
       syncServerUri,
-      storage,
+      addressStorage,
+      keysStorage,
       identityToken,
       chain,
       rpcUrl,
     );
   } else {
-    authData = await restoreKeys(signer, accountAddress, syncServerUri, storage, identityToken);
+    authData = await restoreKeys(signer, accountAddress, syncServerUri, addressStorage, keysStorage, identityToken);
   }
   store.send({ type: 'reset' });
   store.send({