update: decrypt llt for store tokens

smswithoutborders · Jul 17, 2024 · ccab82e · ccab82e
1 parent ec1d78a
commit ccab82e
Show file tree

Hide file tree

Showing 18 changed files with 389 additions and 298 deletions.
diff --git a/package.json b/package.json
@@ -20,10 +20,10 @@
     "@testing-library/user-event": "^14.5.2",
     "assert": "^2.1.0",
     "base64-arraybuffer": "^1.0.2",
+    "base64url": "^3.0.1",
     "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",
     "constants-browserify": "^1.0.0",
-    "crypto": "^1.0.1",
     "crypto-browserify": "^3.12.0",
     "electron-json-storage": "^4.6.0",
     "electron-store": "^10.0.0",

diff --git a/public/electron.mjs b/public/electron.mjs
@@ -5,7 +5,8 @@ import url from "url";
 import { fileURLToPath } from "url";
 import { dirname } from "path";
 import Store from "electron-store";
-import OAuth2Handler from '../src/OAuthHandler.js'
+import OAuth2Handler from "../src/OAuthHandler.js";
+import { decryptLongLivedToken } from "../src/Cryptography.js";
 
 const storage = new Store({ name: "relaysms" });
 
@@ -235,7 +236,7 @@ ipcMain.handle("store-params", async (event, { key, value }) => {
   try {
     console.log(">>>>", { key, value });
     storage.set(key, value);
-    return true; 
+    return true;
   } catch (error) {
     console.error("Error storing params:", error);
     throw error;
@@ -244,6 +245,7 @@ ipcMain.handle("store-params", async (event, { key, value }) => {
 
 ipcMain.handle("retrieve-params", async (event, key) => {
   try {
+    console.log(">>>>", { key });
     const params = storage.get(key);
     return params;
   } catch (error) {
@@ -322,3 +324,28 @@ ipcMain.handle("open-oauth", async (event, { oauthUrl, expectedRedirect }) => {
 
   mainWindow.webContents.send("authorization-code", code);
 });
+
+ipcMain.handle(
+  "get-long-lived-token",
+  async (
+    event,
+    {
+      client_device_id_secret_key,
+      server_device_id_pub_key,
+      long_lived_token_cipher,
+    }
+  ) => {
+    try {
+      const decryptedToken = await decryptLongLivedToken(
+        client_device_id_secret_key,
+        server_device_id_pub_key,
+        long_lived_token_cipher
+      );
+      console.log("Decrypted Token:", decryptedToken);
+      return decryptedToken;
+    } catch (err) {
+      console.error("Error:", err.message);
+      throw err;
+    }
+  }
+);
diff --git a/public/preload.mjs b/public/preload.mjs
@@ -128,6 +128,7 @@ contextBridge.exposeInMainWorld("api", {
     await ipcRenderer.invoke("store-params", { key, value });
   },
   retrieveParams: async (key) => {
+    console.log(">>>>> --", { key });
     return await ipcRenderer.invoke("retrieve-params", key);
   },
 
@@ -176,7 +177,7 @@ contextBridge.exposeInMainWorld("api", {
       throw error;
     }
   },
- 
+
   openOauth: ({ oauthUrl, expectedRedirect }) => {
     console.log("r_url", expectedRedirect);
     console.log("authURL:", oauthUrl);
@@ -191,4 +192,27 @@ contextBridge.exposeInMainWorld("api", {
       });
     });
   },
+
+  retrieveLongLivedToken: ({
+    client_device_id_secret_key,
+    server_device_id_pub_key,
+    long_lived_token_cipher,
+  }) => {
+    return new Promise((resolve, reject) => {
+      ipcRenderer
+        .invoke("get-long-lived-token", {
+          client_device_id_secret_key,
+          server_device_id_pub_key,
+          long_lived_token_cipher,
+        })
+        .then((decryptedToken) => {
+          console.log("Decrypted Token:", decryptedToken);
+          resolve(decryptedToken);
+        })
+        .catch((err) => {
+          console.error("Error:", err.message);
+          reject(err);
+        });
+    });
+  },
 });
diff --git a/public/publisher.proto b/public/publisher.proto
@@ -12,6 +12,8 @@ message GetOAuth2AuthorizationUrlRequest {
   string code_verifier = 3;
   // Flag to indicate if the code verifier should be auto-generated
   bool autogenerate_code_verifier = 4;
+  // Optional redirect URL for the OAuth2 application
+  string redirect_url = 5;
 }
 
 // Response message for the OAuth2 GetAuthorizationUrl RPC
@@ -42,6 +44,8 @@ message ExchangeOAuth2CodeAndStoreRequest {
   string authorization_code = 3;
   // Optional code verifier used for PKCE
   string code_verifier = 4;
+  // Optional redirect URL for the OAuth2 application
+  string redirect_url = 5;
 }
 
 // Response message for the ExchangeOAuth2Code RPC

diff --git a/src/App.js b/src/App.js
@@ -77,7 +77,7 @@ function App() {
           },
           background: {
             default: prefersDarkMode ? "#1E1E1E" : "#fafafa",
-            paper: prefersDarkMode ? "#171717" : "#F2F2F2",
+            paper: prefersDarkMode ? "#0C1D2FE6" : "#449DD1",
           },
           text: {
             primary: prefersDarkMode ? "#fff" : "#000",

diff --git a/src/Components/AddAccounts.js b/src/Components/AddAccounts.js
@@ -1,15 +1,24 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import url from "url";
-import { Drawer, Grid, Box, Typography } from "@mui/material";
+import { Grid, Box, Typography, Dialog, Snackbar, Alert } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import decryptLongLivedToken from "../Cryptography"
+import { useNavigate } from "react-router-dom";
 
-export default function AddAccounts({ open, onClose, DecryptedLLT }) {
+export default function AddAccounts({ open, onClose }) {
   const { t } = useTranslation();
-  const [unstoredTokens, setUnstoredTokens] = useState([
+  const [alert, setAlert] = useState({ message: "", severity: "" });
+  const [unstoredTokens] = useState([
     { platform: "gmail" },
     { platform: "twitter" },
   ]);
+  const handleAlertClose = () => {
+    setAlert({ ...alert, open: false });
+  };
+  const navigate = useNavigate();
+
+  const handleClose = () => {
+    onClose();    
+  };
 
   const handleAddAccount = async (platform) => {
     try {
@@ -34,42 +43,94 @@ export default function AddAccounts({ open, onClose, DecryptedLLT }) {
         expectedRedirect: newRedirectUri,
       });
 
-  // Retrieve the long-lived token and device IDs
-  const longLivedToken = await window.api.retrieveParams("longLivedToken");
-  const serverDeviceId = await window.api.retrieveParams("serverDeviceId");
-  const clientDeviceId = await window.api.retrieveParams("client_device_id_pub_key");
+      const longLivedToken = await window.api.retrieveParams("longLivedToken");
+      const serverDevicePublicId = await window.api.retrieveParams(
+        "serverDeviceId"
+      );
+      const clientDeviceSecretId = await window.api.retrieveParams(
+        "client_device_id_key_pair"
+      );
 
-  // Decrypt the long-lived token
-  const decryptedLLT = decryptLongLivedToken(longLivedToken, serverDeviceId, clientDeviceId);
+      const llt = await window.api.retrieveLongLivedToken({
+        client_device_id_secret_key: clientDeviceSecretId.secretKey,
+        server_device_id_pub_key: serverDevicePublicId,
+        long_lived_token_cipher: longLivedToken,
+      });
 
       const store = await window.api.exchangeOAuth2CodeAndStore(
-        decryptedLLT,
+        llt,
         platform,
         auth_code,
-        response.code_verifier       
+        response.code_verifier
       );
       console.log(store);
+      setAlert({
+        message: "Token stored successfully",
+        severity: "success",
+        open: true,
+      });
+
+      setTimeout(() => {
+        navigate("/onboarding4"); 
+        handleClose();
+      }, 2000);
     } catch (error) {
       console.error("Failed to get OAuth2 authorization URL:", error);
+      setAlert({
+        message: error,
+        severity: "success",
+        open: true,
+      });
     }
   };
 
   return (
-    <Drawer
+    <>
+    <Snackbar
+    open={alert.open}
+    autoHideDuration={6000}
+    onClose={handleAlertClose}
+  >
+    <Alert
+      onClose={handleAlertClose}
+      severity={alert.severity}
+      sx={{ width: "100%" }}
+    >
+      {alert.message}
+    </Alert>
+  </Snackbar>
+    <Dialog
       anchor="bottom"
       open={open}
       onClose={onClose}
       sx={{ my: 10, mx: 5 }}
     >
       <Box sx={{ py: 8, px: 5 }}>
-        <Typography variant="h6">Add Accounts</Typography>
-        <Typography variant="body1">Adding accounts blah blah blah</Typography>
-        <Grid container sx={{ pt: 5 }}>
+        <Typography variant="h6" textAlign="center">
+          Add Accounts
+        </Typography>
+        <Typography sx={{ pt: 2 }} variant="body1" textAlign="center">
+          Adding accounts blah blah blah
+        </Typography>
+        <Grid
+          container
+          sx={{ pt: 6 }}
+          justifyContent="center"
+          alignItems="center"
+          spacing={3}
+        >
           {unstoredTokens.map((token, index) => (
-            <Grid item md={2} sm={3} key={index}>
+            <Grid
+              item
+              md={4}
+              sm={6}
+              xs={12}
+              key={index}
+              sx={{ textAlign: "center" }}
+            >
               <Box onClick={() => handleAddAccount(token.platform)}>
                 <img
-                  src={`/${token.platform}.svg`} // Adjust path as per your project structure
+                  src={`/${token.platform}.svg`} 
                   alt={token.platform}
                   style={{ width: "30%", cursor: "pointer" }}
                 />
@@ -79,6 +140,7 @@ export default function AddAccounts({ open, onClose, DecryptedLLT }) {
           ))}
         </Grid>
       </Box>
-    </Drawer>
+    </Dialog>
+    </>
   );
 }
diff --git a/src/Components/Loader.js b/src/Components/Loader.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { LinearProgress, Box, Typography } from '@mui/material';
+
+const Loader = ({ loading, message }) => {
+  return (
+    <Box sx={{ width: '100%', textAlign: 'center', padding: '20px' }}>
+      {loading && (
+        <>
+          <Typography variant="h6" gutterBottom>
+            {message}
+          </Typography>
+          <LinearProgress />
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default Loader;