Fix session reset

Author: sea-snake

src/frontend/src/lib/stores/session.store.ts

@@ -22,19 +22,21 @@ export interface Session {
   salt: Uint8Array;
 }
 
+type SessionData = Pick<Session, "identity" | "nonce" | "salt">;
+
 type SessionStore = Readable<Session> & {
   init: (params: {
     canisterId: Principal;
     agentOptions: HttpAgentOptions;
   }) => Promise<void>;
-  reset: () => Promise<void>;
+  reset: () => void;
 };
 
 const STORAGE_KEY = "ii-session";
 
 const internalStore = writable<Session | undefined>();
 
-const create = async () => {
+const createSession = async (): Promise<SessionData> => {
   const identity = await ECDSAKeyIdentity.generate({
     extractable: true,
   });
@@ -59,7 +61,7 @@ const create = async () => {
   };
 };
 
-const read = async () => {
+const readSession = async (): Promise<SessionData | undefined> => {
   const item = sessionStorage.getItem(STORAGE_KEY);
   if (isNullish(item)) {
     return undefined;
@@ -91,9 +93,24 @@ const read = async () => {
   };
 };
 
+let preCreatedSession: SessionData;
+const nextSession = (): SessionData => {
+  const session = preCreatedSession!;
+  void (async () => {
+    // Pre-create the next session in the background to make reset synchronous
+    preCreatedSession = await createSession();
+  })();
+  return session;
+};
+
 export const sessionStore: SessionStore = {
   init: async ({ canisterId, agentOptions }) => {
-    const { identity, nonce, salt } = (await read()) ?? (await create());
+    // Try to read an existing session from sessionStorage,
+    // if it doesn't exist or is expired create a new one.
+    const { identity, nonce, salt } =
+      (await readSession()) ?? (await createSession());
+    // Pre-create the next session for synchronous reset later on.
+    void nextSession();
     const agent = HttpAgent.createSync({ ...agentOptions, identity });
     // Fetch subnet keys to speed up queries during authentication,
     // this avoids having to fetch them later on user interaction.
@@ -110,8 +127,8 @@ export const sessionStore: SessionStore = {
     }
     return session;
   }).subscribe,
-  reset: async () => {
-    const { identity, nonce, salt } = await create();
+  reset: () => {
+    const { identity, nonce, salt } = nextSession();
     internalStore.update((session) => {
       if (isNullish(session)) {
         throw new Error("Not initialized");

src/frontend/src/lib/utils/openID.ts

@@ -103,9 +103,7 @@ export const createRedirectURL = (
   config: Omit<RequestConfig, "configURL">,
   options: RequestOptions,
 ): URL => {
-  const state = toBase64URL(
-    window.crypto.getRandomValues(new Uint8Array(12)).buffer,
-  );
+  const state = toBase64URL(window.crypto.getRandomValues(new Uint8Array(12)));
   const redirectURL = new URL(REDIRECT_CALLBACK_PATH, window.location.origin);
   const authURL = new URL(config.authURL);
   // Even though we only need an id token, we're still asking for a code
@@ -170,7 +168,7 @@ export const createAnonymousNonce = async (
   bytes.set(salt);
   bytes.set(principal.toUint8Array(), 32);
   const nonce = toBase64URL(
-    await window.crypto.subtle.digest("SHA-256", bytes),
+    new Uint8Array(await window.crypto.subtle.digest("SHA-256", bytes)),
   );
   return { nonce, salt };
 };

src/frontend/src/lib/utils/utils.ts

@@ -431,10 +431,10 @@ export const bufFromBufLike = (
   );
 };
 
-export const toBase64 = (bytes: ArrayBuffer): string =>
-  btoa(String.fromCharCode(...new Uint8Array(bytes)));
+export const toBase64 = (bytes: Uint8Array): string =>
+  btoa(String.fromCharCode(...bytes));
 
-export const toBase64URL = (bytes: ArrayBuffer): string =>
+export const toBase64URL = (bytes: Uint8Array): string =>
   toBase64(bytes).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 
 export const fromBase64 = (base64: string): Uint8Array =>