[web][cast] Use deviceCode generated by sever (#1594)

## Description

## Tests

web/apps/cast/src/pages/index.tsx

@@ -9,27 +9,8 @@ import { useEffect, useState } from "react";
 import { storeCastData } from "services/cast/castService";
 import { useCastReceiver } from "../utils/useCastReceiver";
 
-// Function to generate cryptographically secure digits
-const generateSecureData = (length: number): Uint8Array => {
-    const array = new Uint8Array(length);
-    window.crypto.getRandomValues(array);
-    // Modulo operation to ensure each byte is a single digit
-    for (let i = 0; i < length; i++) {
-        array[i] = array[i] % 10;
-    }
-    return array;
-};
-
-const convertDataToDecimalString = (data: Uint8Array): string => {
-    let decimalString = "";
-    for (let i = 0; i < data.length; i++) {
-        decimalString += data[i].toString(); // No need to pad, as each value is a single digit
-    }
-    return decimalString;
-};
-
 export default function PairingMode() {
-    const [digits, setDigits] = useState<string[]>([]);
+    const [deviceCode, setDeviceCode] = useState("");
     const [publicKeyB64, setPublicKeyB64] = useState("");
     const [privateKeyB64, setPrivateKeyB64] = useState("");
     const [codePending, setCodePending] = useState(true);
@@ -43,8 +24,6 @@ export default function PairingMode() {
 
     const init = async () => {
         try {
-            const data = generateSecureData(6);
-            setDigits(convertDataToDecimalString(data).split(""));
             const keypair = await generateKeyPair();
             setPublicKeyB64(await toB64(keypair.publicKey));
             setPrivateKeyB64(await toB64(keypair.privateKey));
@@ -107,7 +86,7 @@ export default function PairingMode() {
                 "urn:x-cast:pair-request",
                 message.senderId,
                 {
-                    code: digits.join(""),
+                    code: deviceCode,
                 },
             );
         } catch (e) {
@@ -117,9 +96,7 @@ export default function PairingMode() {
 
     const generateKeyPair = async () => {
         await _sodium.ready;
-
         const keypair = _sodium.crypto_box_keypair();
-
         return keypair;
     };
 
@@ -132,9 +109,7 @@ export default function PairingMode() {
         // then, we can decrypt this and store all the necessary info locally so we can play the collection slideshow.
         let devicePayload = "";
         try {
-            const encDastData = await castGateway.getCastData(
-                `${digits.join("")}`,
-            );
+            const encDastData = await castGateway.getCastData(`${deviceCode}`);
             if (!encDastData) return;
             devicePayload = encDastData;
         } catch (e) {
@@ -157,10 +132,8 @@ export default function PairingMode() {
     const advertisePublicKey = async (publicKeyB64: string) => {
         // hey client, we exist!
         try {
-            await castGateway.registerDevice(
-                `${digits.join("")}`,
-                publicKeyB64,
-            );
+            const codeValue = await castGateway.registerDevice(publicKeyB64);
+            setDeviceCode(codeValue);
             setCodePending(false);
         } catch (e) {
             // schedule re-try after 5 seconds
@@ -175,7 +148,7 @@ export default function PairingMode() {
 
     useEffect(() => {
         console.log("useEffect for pairing called");
-        if (digits.length < 1 || !publicKeyB64 || !privateKeyB64) return;
+        if (deviceCode.length < 1 || !publicKeyB64 || !privateKeyB64) return;
 
         const interval = setInterval(async () => {
             console.log("polling for cast data");
@@ -192,7 +165,7 @@ export default function PairingMode() {
         return () => {
             clearInterval(interval);
         };
-    }, [digits, publicKeyB64, privateKeyB64, codePending]);
+    }, [deviceCode, publicKeyB64, privateKeyB64, codePending]);
 
     useEffect(() => {
         if (!publicKeyB64) return;
@@ -235,7 +208,7 @@ export default function PairingMode() {
                             <EnteSpinner />
                         ) : (
                             <>
-                                <LargeType chars={digits} />
+                                <LargeType chars={deviceCode.split("")} />
                             </>
                         )}
                     </div>

web/packages/shared/network/cast.ts

@@ -58,11 +58,14 @@ class CastGateway {
         return resp.data.publicKey;
     }
 
-    public async registerDevice(code: string, publicKey: string) {
-        await HTTPService.post(getEndpoint() + "/cast/device-info/", {
-            deviceCode: `${code}`,
-            publicKey: publicKey,
-        });
+    public async registerDevice(publicKey: string): Promise<string> {
+        const resp = await HTTPService.post(
+            getEndpoint() + "/cast/device-info/",
+            {
+                publicKey: publicKey,
+            },
+        );
+        return resp.data.deviceCode;
     }
 
     public async publishCastPayload(