Using sessionStorage or localStorage inside methods

[max-programming]

Hey there! First off I just loved this library and I have been using it more and more with my upcoming projects. When using it with Next.js I faced this one problem

ReferenceError: Can't find variable: sessionStorage
    at <anonymous> (webpack-internal:///(ssr)/./src/lib/stores/key.store.ts:20:41)
    at recoverKeyFromSessionStorage (webpack-internal:///(ssr)/./src/lib/stores/key.store.ts:19:44)
    at new KeyStore (webpack-internal:///(ssr)/./src/lib/stores/key.store.ts:13:42)
    at <anonymous> (webpack-internal:///(ssr)/./src/lib/stores/key.store.ts:111:18)
    at eval (null)
    at (ssr)/./src/lib/stores/key.store.ts (.next/server/app/dashboard/page.js:432:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:33)
    at <anonymous> (webpack-internal:///(ssr)/./src/components/vault-credentials.tsx:7:98)
    at eval (null)
    at (ssr)/./src/components/vault-credentials.tsx (.next/server/app/dashboard/page.js:366:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:33)
    at <anonymous> (webpack-internal:///(ssr)/./src/components/vault-item-dialog.tsx:10:95)
    at eval (null)
    at (ssr)/./src/components/vault-item-dialog.tsx (.next/server/app/dashboard/page.js:399:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:33)
    at <anonymous> (webpack-internal:///(ssr)/./src/components/vault-item-cards.tsx:20:95)
    at eval (null)
    at (ssr)/./src/components/vault-item-cards.tsx (.next/server/app/dashboard/page.js:388:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:33)
    at <anonymous> (webpack-internal:///(ssr)/./src/components/vault-dashboard.tsx:8:94)
    at eval (null)
    at (ssr)/./src/components/vault-dashboard.tsx (.next/server/app/dashboard/page.js:377:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:33)

I was wondering if there is an SSR-safe way to access localStorage and/or sessionStorage or similar window properties

My current code/implementation

class KeyStore extends Exome {
  public static readonly STORAGE_KEY = "key-store";
  public derivedKey: CryptoKey | null = null;

  constructor() {
    super();
    this.recoverKeyFromSessionStorage().then(key => (this.derivedKey = key));
  }

  private async recoverKeyFromSessionStorage() {
    const storedKey = sessionStorage.getItem(KeyStore.STORAGE_KEY);
    if (storedKey) {
      const jwk = JSON.parse(storedKey);
      const key = await crypto.subtle.importKey(
        "jwk",
        jwk,
        { name: "AES-GCM" },
        true,
        ["encrypt", "decrypt"]
      );
      return key;
    }
    return null;
  }
}

[Marcisbee]

Hey! sessionStorage and localStorage are browser APIs. On server you'd have to skip this or write some different logic.

You can check if this is server environment like this typeof window === "undefined".