Merge remote-tracking branch 'upstream/main' into feat/39

2026-10-14 09:30:09 +00:00 · 2022-12-07 20:45:49 +09:00
parent 242f7b80e7 5e1f6d3884
commit 5910bfbb4d
24 changed files with 625 additions and 376 deletions
@@ -1,19 +1,27 @@
-import React from "react";
-import { useState } from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
-import {
-  faCircle,
-  faCircleExclamation,
-  faE,
-  faEye,
-  faEyeSlash,
-} from "@fortawesome/free-solid-svg-icons";
+import { faCircle, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import guidGenerator from "../utilities/randomId";
-import Error from "./Error";

-const InputField = (props) => {
+interface InputFieldProps {
+  static?: boolean;
+  label: string;
+  type: string;
+  value: string;
+  placeholder?: string;
+  isRequired: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  text?: string;
+  name?: string;
+  blurred?: boolean;
+  errorText?: string;
+  onChangeHandler: (value: string) => void;
+}
+
+const InputField = (props: InputFieldProps) => {
  const [passwordVisible, setPasswordVisible] = useState(false);
  const router = useRouter();

@@ -67,7 +75,7 @@ const InputField = (props) => {
        >
          <input
            onChange={(e) => props.onChangeHandler(e.target.value)}
-            type={passwordVisible == false ? props.type : "text"}
+            type={passwordVisible === false ? props.type : "text"}
            placeholder={props.placeholder}
            value={props.value}
            required={props.isRequired}
@@ -1,3 +1,4 @@
+/* eslint-disable no-unexpected-multiline */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
 import Link from "next/link";
@@ -23,6 +24,7 @@ import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
 import uploadKeys from "~/pages/api/workspace/uploadKeys";

 import NavBarDashboard from "../navigation/NavBarDashboard";
+import { tempLocalStorage } from "../utilities/checks/tempLocalStorage";
 import {
  decryptAssymmetric,
  encryptAssymmetric,
@@ -31,13 +33,17 @@ import Button from "./buttons/Button";
 import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
 import Listbox from "./Listbox";

-export default function Layout({ children }) {
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
  const router = useRouter();
  const [workspaceList, setWorkspaceList] = useState([]);
  const [workspaceMapping, setWorkspaceMapping] = useState([{ 1: 2 }]);
  const [workspaceSelected, setWorkspaceSelected] = useState("∞");
-  let [newWorkspaceName, setNewWorkspaceName] = useState("");
-  let [isOpen, setIsOpen] = useState(false);
+  const [newWorkspaceName, setNewWorkspaceName] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

@@ -47,164 +53,186 @@ export default function Layout({ children }) {
    setIsOpen(false);
  }

+  function openModal() {
+    setIsOpen(true);
+  }
+
  // TODO: what to do about the fact that 2ids can have the same name

  /**
   * When a user creates a new workspace, redirect them to the page of the new workspace.
   * @param {*} workspaceName
   */
-  async function submitModal(workspaceName, addAllUsers) {
+  async function submitModal(workspaceName: string, addAllUsers: boolean) {
    setLoading(true);
+    // timeout code.
    setTimeout(() => setLoading(false), 1500);
-    const workspaces = await getWorkspaces();
-    const currentWorkspaces = workspaces.map((workspace) => workspace.name);
-    if (!currentWorkspaces.includes(workspaceName)) {
-      const newWorkspace = await createWorkspace({
-        workspaceName,
-        organizationId: localStorage.getItem("orgData.id"),
-      });
-      let newWorkspaceId;
-      try {
-        newWorkspaceId = newWorkspace._id;
-      } catch (error) {
-        console.log(error);
-      }
-      if (addAllUsers) {
-        let orgUsers = await getOrganizationUsers({
-          orgId: localStorage.getItem("orgData.id"),
+
+    try {
+      const workspaces = await getWorkspaces();
+      const currentWorkspaces = workspaces.map((workspace) => workspace.name);
+      if (!currentWorkspaces.includes(workspaceName)) {
+        const newWorkspace = await createWorkspace({
+          workspaceName,
+          organizationId: tempLocalStorage("orgData.id"),
        });
-        orgUsers.map(async (user) => {
-          if (user.status == "accepted") {
-            let result = await addUserToWorkspace(
-              user.user.email,
-              newWorkspaceId
-            );
-            if (result?.invitee && result?.latestKey) {
-              const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+        const newWorkspaceId = newWorkspace._id;

-              // assymmetrically decrypt symmetric key with local private key
-              const key = decryptAssymmetric({
-                ciphertext: result.latestKey.encryptedKey,
-                nonce: result.latestKey.nonce,
-                publicKey: result.latestKey.sender.publicKey,
-                privateKey: PRIVATE_KEY,
-              });
+        if (addAllUsers) {
+          const orgUsers = await getOrganizationUsers({
+            orgId: tempLocalStorage("orgData.id"),
+          });
+          orgUsers.map(async (user: any) => {
+            if (user.status == "accepted") {
+              const result = await addUserToWorkspace(
+                user.user.email,
+                newWorkspaceId
+              );
+              if (result?.invitee && result?.latestKey) {
+                const PRIVATE_KEY = tempLocalStorage("PRIVATE_KEY");

-              const { ciphertext, nonce } = encryptAssymmetric({
-                plaintext: key,
-                publicKey: result.invitee.publicKey,
-                privateKey: PRIVATE_KEY,
-              });
+                // assymmetrically decrypt symmetric key with local private key
+                const key = decryptAssymmetric({
+                  ciphertext: result.latestKey.encryptedKey,
+                  nonce: result.latestKey.nonce,
+                  publicKey: result.latestKey.sender.publicKey,
+                  privateKey: PRIVATE_KEY,
+                });

-              uploadKeys(newWorkspaceId, result.invitee._id, ciphertext, nonce);
+                const { ciphertext, nonce } = encryptAssymmetric({
+                  plaintext: key,
+                  publicKey: result.invitee.publicKey,
+                  privateKey: PRIVATE_KEY,
+                }) as { ciphertext: string; nonce: string };
+
+                uploadKeys(
+                  newWorkspaceId,
+                  result.invitee._id,
+                  ciphertext,
+                  nonce
+                );
+              }
            }
-          }
-        });
+          });
+        }
+        router.push("/dashboard/" + newWorkspaceId + "?Development");
+        setIsOpen(false);
+        setNewWorkspaceName("");
+      } else {
+        console.error("A project with this name already exists.");
+        setError(true);
+        setLoading(false);
      }
-      router.push("/dashboard/" + newWorkspaceId + "?Development");
-      setIsOpen(false);
-      setNewWorkspaceName("");
-    } else {
-      setError(t("error_project-already-exists"));
+    } catch (err) {
+      console.error(err);
+      setError(true);
      setLoading(false);
    }
  }

-  function openModal() {
-    setIsOpen(true);
-  }
-
  const menuItems = [
    {
      href:
-        "/dashboard/" + workspaceMapping[workspaceSelected] + "?Development",
+        "/dashboard/" +
+        workspaceMapping[workspaceSelected as any] +
+        "?Development",
      title: t("nav:menu.secrets"),
      emoji: <FontAwesomeIcon icon={faKey} />,
    },
    {
-      href: "/users/" + workspaceMapping[workspaceSelected],
+      href: "/users/" + workspaceMapping[workspaceSelected as any],
      title: t("nav:menu.members"),
      emoji: <FontAwesomeIcon icon={faUser} />,
    },
    {
-      href: "/integrations/" + workspaceMapping[workspaceSelected],
+      href: "/integrations/" + workspaceMapping[workspaceSelected as any],
      title: t("nav:menu.integrations"),
      emoji: <FontAwesomeIcon icon={faPlug} />,
    },
    {
-      href: "/settings/project/" + workspaceMapping[workspaceSelected],
+      href: "/settings/project/" + workspaceMapping[workspaceSelected as any],
      title: t("nav:menu.project-settings"),
      emoji: <FontAwesomeIcon icon={faGear} />,
    },
  ];

-  useEffect(async () => {
+  useEffect(() => {
    // Put a user in a workspace if they're not in one yet
-    if (
-      localStorage.getItem("orgData.id") == null ||
-      localStorage.getItem("orgData.id") == ""
-    ) {
-      const userOrgs = await getOrganizations();
-      localStorage.setItem("orgData.id", userOrgs[0]._id);
-    }
-
-    let orgUserProjects = await getOrganizationUserProjects({
-      orgId: localStorage.getItem("orgData.id"),
-    });
-    let userWorkspaces = orgUserProjects;
-    if (
-      userWorkspaces.length == 0 &&
-      router.asPath != "/noprojects" &&
-      !router.asPath.includes("settings")
-    ) {
-      router.push("/noprojects");
-    } else if (router.asPath != "/noprojects") {
-      const intendedWorkspaceId = router.asPath
-        .split("/")
-        [router.asPath.split("/").length - 1].split("?")[0];
-      // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
-      if (
-        intendedWorkspaceId != "heroku" &&
-        !userWorkspaces
-          .map((workspace) => workspace._id)
-          .includes(intendedWorkspaceId)
-      ) {
-        router.push("/dashboard/" + userWorkspaces[0]._id + "?Development");
-      } else {
-        setWorkspaceList(userWorkspaces.map((workspace) => workspace.name));
-        setWorkspaceMapping(
-          Object.fromEntries(
-            userWorkspaces.map((workspace) => [workspace.name, workspace._id])
-          )
-        );
-        setWorkspaceSelected(
-          Object.fromEntries(
-            userWorkspaces.map((workspace) => [workspace._id, workspace.name])
-          )[
-            router.asPath
-              .split("/")
-              [router.asPath.split("/").length - 1].split("?")[0]
-          ]
-        );
+    const putUserInWorkSpace = async () => {
+      if (tempLocalStorage("orgData.id") === "") {
+        const userOrgs = await getOrganizations();
+        localStorage.setItem("orgData.id", userOrgs[0]._id);
      }
-    }
+
+      const orgUserProjects = await getOrganizationUserProjects({
+        orgId: tempLocalStorage("orgData.id"),
+      });
+      const userWorkspaces = orgUserProjects;
+      if (
+        userWorkspaces.length == 0 &&
+        router.asPath != "/noprojects" &&
+        !router.asPath.includes("settings")
+      ) {
+        router.push("/noprojects");
+      } else if (router.asPath != "/noprojects") {
+        const intendedWorkspaceId = router.asPath
+          .split("/")
+          [router.asPath.split("/").length - 1].split("?")[0];
+        // If a user is not a member of a workspace they are trying to access, just push them to one of theirs
+        if (
+          intendedWorkspaceId != "heroku" &&
+          !userWorkspaces
+            .map((workspace: { _id: string }) => workspace._id)
+            .includes(intendedWorkspaceId)
+        ) {
+          router.push("/dashboard/" + userWorkspaces[0]._id + "?Development");
+        } else {
+          setWorkspaceList(
+            userWorkspaces.map((workspace: any) => workspace.name)
+          );
+          setWorkspaceMapping(
+            Object.fromEntries(
+              userWorkspaces.map((workspace: any) => [
+                workspace.name,
+                workspace._id,
+              ])
+            ) as any
+          );
+          setWorkspaceSelected(
+            Object.fromEntries(
+              userWorkspaces.map((workspace: any) => [
+                workspace._id,
+                workspace.name,
+              ])
+            )[
+              router.asPath
+                .split("/")
+                [router.asPath.split("/").length - 1].split("?")[0]
+            ]
+          );
+        }
+      }
+    };
+    putUserInWorkSpace();
  }, []);

  useEffect(() => {
    try {
      if (
-        workspaceMapping[workspaceSelected] &&
-        workspaceMapping[workspaceSelected] !==
+        workspaceMapping[Number(workspaceSelected)] &&
+        `${workspaceMapping[Number(workspaceSelected)]}` !==
          router.asPath
            .split("/")
            [router.asPath.split("/").length - 1].split("?")[0]
      ) {
        router.push(
-          "/dashboard/" + workspaceMapping[workspaceSelected] + "?Development"
+          "/dashboard/" +
+            workspaceMapping[Number(workspaceSelected)] +
+            "?Development"
        );
        localStorage.setItem(
          "projectData.id",
-          workspaceMapping[workspaceSelected]
+          `${workspaceMapping[Number(workspaceSelected)]}`
        );
      }
    } catch (error) {
@@ -221,18 +249,18 @@ export default function Layout({ children }) {
            <nav className="flex flex-col justify-between items-between h-full">
              {/* <div className="py-6"></div> */}
              <div>
-                <div className="flex justify-center w-full mt-[4.5rem] mb-6 bg-bunker-600 w-full h-20 flex flex-col items-center px-4">
+                <div className="flex justify-center w-full mt-[4.5rem] mb-6 bg-bunker-600 h-20 flex-col items-center px-4">
                  <div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
                    {t("nav:menu.project")}
                  </div>
                  {workspaceList.length > 0 ? (
                    <Listbox
                      selected={workspaceSelected}
-                      onChange={setWorkspaceSelected}
+                      onChange={setWorkspaceSelected as any}
                      data={workspaceList}
                      buttonAction={openModal}
                      text=""
-                      workspaceMapping={workspaceMapping}
+                      // workspaceMapping={workspaceMapping as any}
                    />
                  ) : (
                    <Button
@@ -300,7 +328,9 @@ export default function Layout({ children }) {
                    Infisical Guide
                  </div>
                ) : (
-                  <Link href={`/home/` + workspaceMapping[workspaceSelected]}>
+                  <Link
+                    href={`/home/` + workspaceMapping[workspaceSelected as any]}
+                  >
                    <div
                      className={`flex p-2.5 text-white text-sm rounded cursor-pointer hover:bg-primary-50/5 mt-max border border-dashed border-bunker-400`}
                    >
@@ -326,7 +356,7 @@ export default function Layout({ children }) {
          <main className="flex-1 bg-bunker-800">{children}</main>
        </div>
      </div>
-      <div className="block md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
+      <div className="md:hidden bg-bunker-800 w-screen h-screen flex flex-col justify-center items-center">
        <FontAwesomeIcon
          icon={faMobile}
          className="text-gray-300 text-7xl mb-8"
@@ -8,14 +8,13 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Listbox, Transition } from "@headlessui/react";

-
-type ListBoxProps = {
-  selected: string,
-  onChange: () => void,
-  data: string[],
-  text: string,
-  buttonAction: () => void,
-  width: string,
+interface ListBoxProps {
+  selected: string;
+  onChange: () => void;
+  data: string[];
+  text: string;
+  buttonAction: () => void;
+  isFull?: boolean;
 }

 /**
@@ -35,14 +34,14 @@ export default function ListBox({
  data,
  text,
  buttonAction,
-  width,
-} : ListBoxProps): JSX.Element {
+  isFull,
+}: ListBoxProps): JSX.Element {
  return (
    <Listbox value={selected} onChange={onChange}>
      <div className="relative">
        <Listbox.Button
          className={`text-gray-400 relative ${
-            width == "full" ? "w-full" : "w-52"
+            isFull ? "w-full" : "w-52"
          } cursor-default rounded-md bg-white/[0.07] hover:bg-white/[0.11] duration-200 py-2.5 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm`}
        >
          <div className="flex flex-row">
@@ -12,7 +12,7 @@ type ButtonProps = {
  text: string;
  onButtonPressed: () => void;
  loading?: boolean;
-  color: string;
+  color?: string;
  size: string;
  icon?: IconProp;
  active?: boolean;
@@ -0,0 +1,38 @@
+import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classnames from "classnames";
+
+import { Notification as NotificationType } from "./NotificationProvider";
+
+interface NotificationProps {
+  notification: NotificationType;
+  clearNotification: (text?: string) => void;
+}
+
+const Notification = ({
+  notification,
+  clearNotification,
+}: NotificationProps) => {
+  return (
+    <div
+      className={classnames(
+        "w-full flex items-center justify-between px-4 py-3 rounded pointer-events-auto",
+        {
+          "bg-green-600": notification.type === "success",
+          "bg-red-500": notification.type === "error",
+        }
+      )}
+      role="alert"
+    >
+      <p className="text-white text-sm font-bold">{notification.text}</p>
+      <button
+        className="bg-white/5 rounded-lg p-3"
+        onClick={() => clearNotification(notification.text)}
+      >
+        <FontAwesomeIcon className="text-white" icon={faXmarkCircle} />
+      </button>
+    </div>
+  );
+};
+
+export default Notification;
@@ -0,0 +1,64 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+import Notifications from "./Notifications";
+
+type NotificationType = "success" | "error";
+
+export type Notification = {
+  text: string;
+  type: NotificationType;
+};
+
+type NotificationContextState = {
+  createNotification: ({ text, type }: Notification) => void;
+};
+
+const NotificationContext = createContext<NotificationContextState>({
+  createNotification: () => console.log("createNotification not set!"),
+});
+
+export const useNotificationContext = () => useContext(NotificationContext);
+
+interface NotificationProviderProps {
+  children: ReactNode;
+}
+
+const NotificationProvider = ({ children }: NotificationProviderProps) => {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+
+  const clearNotification = (text?: string) => {
+    if (text) {
+      return setNotifications((state) =>
+        state.filter((notif) => notif.text !== text)
+      );
+    }
+
+    return setNotifications([]);
+  };
+
+  const createNotification = ({ text, type = "success" }: Notification) => {
+    const doesNotifExist = notifications.some((notif) => notif.text === text);
+
+    if (doesNotifExist) {
+      return;
+    }
+
+    return setNotifications((state) => [...state, { text, type }]);
+  };
+
+  return (
+    <NotificationContext.Provider
+      value={{
+        createNotification,
+      }}
+    >
+      <Notifications
+        notifications={notifications}
+        clearNotification={clearNotification}
+      />
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export default NotificationProvider;
@@ -0,0 +1,28 @@
+import Notification from "./Notification";
+import { Notification as NotificationType } from "./NotificationProvider";
+
+interface NoticationsProps {
+  notifications: NotificationType[];
+  clearNotification: (text?: string) => void;
+}
+
+const Notifications = ({
+  notifications,
+  clearNotification,
+}: NoticationsProps) => {
+  return (
+    <div className="hidden fixed z-50 top-1 w-full inset-x-0 pointer-events-none md:flex justify-center">
+      <div className="flex flex-col gap-y-2 w-96">
+        {notifications.map((notif) => (
+          <Notification
+            key={notif.text}
+            notification={notif}
+            clearNotification={clearNotification}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Notifications;
@@ -3,7 +3,7 @@ import token from "~/pages/api/auth/Token";
 export default class SecurityClient {
  static #token = "";

-  contructor() {}
+  constructor() {}

  static setToken(token) {
    this.#token = token;
@@ -7,6 +7,7 @@ import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProj
 import { initPostHog } from "../analytics/posthog";
 import pushKeys from "./secrets/pushKeys";
 import { ENV } from "./config";
+import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
 import SecurityClient from "./SecurityClient";

 const nacl = require("tweetnacl");
@@ -32,7 +33,6 @@ const attemptLogin = async (
  isLogin
 ) => {
  try {
-    let userWorkspace, userOrg;
    client.init(
      {
        username: email,
@@ -41,66 +41,38 @@ const attemptLogin = async (
      async () => {
        const clientPublicKey = client.getPublicKey();

-        let serverPublicKey, salt;
-        try {
-          let res = await login1(email, clientPublicKey);
-          res = await res.json();
-          serverPublicKey = res.serverPublicKey;
-          salt = res.salt;
-        } catch (err) {
-          setErrorLogin(true);
-          console.log("Wrong password", err);
-        }
+        const { serverPublicKey, salt } = await login1(email, clientPublicKey);

-        let response;
        try {
          client.setSalt(salt);
          client.setServerPublicKey(serverPublicKey);
          const clientProof = client.getProof(); // called M1
-          response = await login2(email, clientProof);
-        } catch (err) {
-          setErrorLogin(true);
-          console.log("Password verification failed");
-        }

-        // if everything works, go the main dashboard page.
-        try {
-          if (response.status == "200") {
-            response = await response.json();
-            SecurityClient.setToken(response["token"]);
-            const publicKey = response["publicKey"];
-            const encryptedPrivateKey = response["encryptedPrivateKey"];
-            const iv = response["iv"];
-            const tag = response["tag"];
+          // if everything works, go the main dashboard page.
+          const { token, publicKey, encryptedPrivateKey, iv, tag } =
+            await login2(email, clientProof);
+          SecurityClient.setToken(token);

-            const PRIVATE_KEY = Aes256Gcm.decrypt(
-              encryptedPrivateKey,
-              iv,
-              tag,
-              password
-                .slice(0, 32)
-                .padStart(
-                  32 +
-                    (password.slice(0, 32).length - new Blob([password]).size),
-                  "0"
-                )
-            );
+          const privateKey = Aes256Gcm.decrypt(
+            encryptedPrivateKey,
+            iv,
+            tag,
+            password
+              .slice(0, 32)
+              .padStart(
+                32 + (password.slice(0, 32).length - new Blob([password]).size),
+                "0"
+              )
+          );

-            try {
-              localStorage.setItem("publicKey", publicKey);
-              localStorage.setItem("encryptedPrivateKey", encryptedPrivateKey);
-              localStorage.setItem("iv", iv);
-              localStorage.setItem("tag", tag);
-              localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY);
-            } catch (err) {
-              setErrorLogin(true);
-              console.error(
-                "Unable to send the tokens in local storage:" + err.message
-              );
-            }
-          } else {
-            setErrorLogin(true);
-          }
+          saveTokenToLocalStorage({
+            token,
+            publicKey,
+            encryptedPrivateKey,
+            iv,
+            tag,
+            privateKey,
+          });

          const userOrgs = await getOrganizations();
          const userOrgsData = userOrgs.map((org) => org._id);
@@ -140,14 +112,8 @@ const attemptLogin = async (
                  "mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@mongodb.net",
                  "personal",
                ],
-                DB_USERNAME: [
-                  "user1234",
-                  "personal",
-                ],
-                DB_PASSWORD: [
-                  "ah8jak3hk8dhiu4dw7whxwe1l",
-                  "personal",
-                ],
+                DB_USERNAME: ["user1234", "personal"],
+                DB_PASSWORD: ["ah8jak3hk8dhiu4dw7whxwe1l", "personal"],
                TWILIO_AUTH_TOKEN: [
                  "hgSIwDAKvz8PJfkj6xkzYqzGmAP3HLuG",
                  "shared",
@@ -156,7 +122,7 @@ const attemptLogin = async (
                STRIPE_SECRET_KEY: ["sk_test_7348oyho4hfq398HIUOH78", "shared"],
              },
              workspaceId: projectToLogin,
-              env: "Development"
+              env: "Development",
            });
          }
          try {
@@ -1,18 +1,21 @@
+interface PasswordCheckProps {
+  password: string;
+  currentErrorCheck: boolean;
+  setPasswordErrorLength: (value: boolean) => void;
+  setPasswordErrorNumber: (value: boolean) => void;
+  setPasswordErrorLowerCase: (value: boolean) => void;
+}
+
 /**
 * This function checks a user password with respect to some criteria.
- * @param {*} password
- * @param {*} setPasswordError
- * @param {*} setPasswordErrorMessage
- * @param {*} currentErrorCheck
- * @returns
 */
-const passwordCheck = (
+const passwordCheck = ({
  password,
  setPasswordErrorLength,
  setPasswordErrorNumber,
  setPasswordErrorLowerCase,
-  currentErrorCheck
-) => {
+  currentErrorCheck,
+}: PasswordCheckProps) => {
  let errorCheck = currentErrorCheck;
  if (!password || password.length < 14) {
    setPasswordErrorLength(true);
@@ -0,0 +1,11 @@
+// this is temporary util function. create error handling logic for localStorage and delete this.
+export const tempLocalStorage = (key: string) => {
+  const value = localStorage.getItem(key);
+
+  if (value === null || value === "") {
+    console.warn("No value found in localStorage for key");
+    return "";
+  }
+
+  return value;
+};
@@ -0,0 +1,29 @@
+interface Props {
+  publicKey: string;
+  encryptedPrivateKey: string;
+  iv: string;
+  tag: string;
+  privateTag: string;
+}
+
+export const saveTokenToLocalStorage = ({
+  publicKey,
+  encryptedPrivateKey,
+  iv,
+  tag,
+  privateTag,
+}: Props) => {
+  try {
+    localStorage.setItem("publicKey", publicKey);
+    localStorage.setItem("encryptedPrivateKey", encryptedPrivateKey);
+    localStorage.setItem("iv", iv);
+    localStorage.setItem("tag", tag);
+    localStorage.setItem("PRIVATE_KEY", privateTag);
+  } catch (err) {
+    if (err instanceof Error) {
+      throw new Error(
+        "Unable to send the tokens in local storage:" + err.message
+      );
+    }
+  }
+};