Make argon2id and srp flow work in browser dev (#541)

browser-extensions/chrome/package-lock.json

@@ -13,7 +13,7 @@
         "buffer": "^6.0.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "secure-remote-password": "^0.3.1"
+        "secure-remote-password": "github:LinusU/secure-remote-password#73e5f732b6ca0cdbdc19da1a0c5f48cdbad2cbf0"
       },
       "devDependencies": {
         "@types/react": "^19.0.7",
@@ -2686,9 +2686,9 @@
       "license": "MIT"
     },
     "node_modules/secure-remote-password": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/secure-remote-password/-/secure-remote-password-0.3.1.tgz",
-      "integrity": "sha512-iEp/qLRfb9XYhfKFrPFfdeD7KVreCjhDKSTRP1G1nRIO0Sw1hjnVHD58ymOhiy9Zf5quHbDIbG9cTupji7qwnA==",
+      "version": "0.3.0",
+      "resolved": "git+ssh://git@github.com/LinusU/secure-remote-password.git#73e5f732b6ca0cdbdc19da1a0c5f48cdbad2cbf0",
+      "integrity": "sha512-UT5eya0NtNvT+R/+L4DgReCLvCJttVTl4g4oy0sQ4aiRYspyHJf/X/ZA+zB2ZrZBXe7gyNpMnhQNT9MXFNPwvA==",
       "license": "MIT",
       "dependencies": {
         "array-buffer-to-hex": "^1.0.0",

browser-extensions/chrome/package.json

@@ -17,7 +17,7 @@
     "buffer": "^6.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "secure-remote-password": "^0.3.1"
+    "secure-remote-password": "github:LinusU/secure-remote-password#73e5f732b6ca0cdbdc19da1a0c5f48cdbad2cbf0"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",

browser-extensions/chrome/src/manifest.json

@@ -3,6 +3,9 @@
     "description": "AliasVault Chrome Extension which allows you to generate and manage aliases directly in your browser on signup and login forms.",
     "version": "1.0",
     "manifest_version": 3,
+    "content_security_policy": {
+      "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
+    },
     "action": {
       "default_popup": "src/popup.html"
     },

browser-extensions/chrome/src/services/SrpService.tsx

@@ -41,28 +41,13 @@ class SrpService {
         type: argon2.ArgonType.Argon2id,
       });
 
-      return hash.hashHex;
+      return hash.hashHex.toUpperCase();
     } catch (error) {
       console.error('Argon2 hashing failed:', error);
       throw error;
     }
   }
 
-  /**
-   * Generates a client ephemeral
-   *
-   * @returns
-   */
-  private static generateEphemeral(): srp.Ephemeral {
-    return srp.generateEphemeral()
-  }
-
-  private static derivePrivateKey(salt: string, username: string, passwordHash: string): string {
-    // SRP private key derivation
-    const hash = srp.derivePrivateKey(salt, username, passwordHash);
-    return hash;
-  }
-
   public async initiateLogin(username: string): Promise<LoginInitiateResponse> {
     const response = await fetch('https://localhost:7223/v1/Auth/login', {
       method: 'POST',
@@ -98,17 +83,14 @@ class SrpService {
     console.log(passwordHashString);
 
     // 2. Generate client ephemeral
-    const clientEphemeral = SrpService.generateEphemeral();
+    const clientEphemeral = srp.generateEphemeral()
     console.log('step 2');
     console.log('--------------------------------');
     console.log(clientEphemeral);
 
     // 3. Derive private key
-    const privateKey = SrpService.derivePrivateKey(
-        loginResponse.salt,
-        username,
-        passwordHashString
-    );
+    console.log(loginResponse);
+    const privateKey = srp.derivePrivateKey(loginResponse.salt, username, passwordHashString);
 
     console.log('step 3');
     console.log('--------------------------------');
@@ -135,7 +117,29 @@ class SrpService {
         })
       });
 
-    console.log(response);
+    const responseJson = await response.json();
+
+    console.log('Auth response:')
+    console.log('--------------------------------');
+    console.log(responseJson);
+
+    // Store access and refresh token
+    localStorage.setItem('accessToken', responseJson.token.token);
+    localStorage.setItem('refreshToken', responseJson.token.refreshToken);
+
+    // Make another API call trying to get latest vault
+    const vaultResponse = await fetch('https://localhost:7223/v1/Vault', {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
+        }
+    });
+
+    const vaultResponseJson = await vaultResponse.json();
+
+    console.log('Vault response:')
+    console.log('--------------------------------');
+    console.log(vaultResponseJson);
+
 
     return true;
 

browser-extensions/chrome/vite.config.js

@@ -41,4 +41,7 @@ export default defineConfig({
     },
     outDir: 'dist',
   },
+  server: {
+    open: '/src/popup.html'
+  },
 });