fix: signin persistance across controllers

package.json

@@ -16,6 +16,7 @@
   "type": "module",
   "dependencies": {
     "lodash": "^4.17.21",
+    "nanoid": "^5.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.6.2",

src/components/signinCard.tsx

@@ -46,7 +46,7 @@ export function SigninCard({
                 ? formatMessage({ id: "signin.identifierAlias" })
                 : formatMessage({ id: "credential.title" })}
             </Text>
-            <Text $color="text">{signin?.identifier?.name}</Text>
+            <Text $color="text">{signin?.identifier?.name ?? signin?.credential?.schema?.title}</Text>
           </div>
           <div>
             <Text fontWeight="bold" $color="heading">
@@ -63,7 +63,7 @@ export function SigninCard({
               {formatMessage({ id: "signin.autoSignin" })}
             </Text>
             <Switch
-              isChecked={signin.autoSignin}
+              isChecked={!!signin.autoSignin}
               handleToggle={handleAutoSignin}
               icon={<AutoSigninIcon size={4} />}
             />

src/components/signinList.tsx

@@ -4,9 +4,12 @@ import { SigninCard } from "@components/signinCard";
 import { Loader, Flex, Box, Text } from "@components/ui";
 import { IMessage, ISignin } from "@config/types";
 
-interface IResourceSignin {
-  index: number;
-  signin?: ISignin;
+interface IDeleteSignin {
+  id: string;
+}
+
+interface IUpdateSignin {
+  signin: ISignin;
 }
 
 export function SigninList(): JSX.Element {
@@ -23,14 +26,14 @@ export function SigninList(): JSX.Element {
     setIsLoading(false);
   };
 
-  const deleteSignin = async (index: number) => {
+  const deleteSignin = async (id: string) => {
     const { data } = await chrome.runtime.sendMessage<
-      IMessage<IResourceSignin>
+      IMessage<IDeleteSignin>
     >({
       type: "delete-resource",
       subtype: "signins",
       data: {
-        index,
+        id,
       },
     });
     if (data?.isDeleted) {
@@ -52,15 +55,13 @@ export function SigninList(): JSX.Element {
     }
   };
 
-  const updateAutoSignin = async (index: number, signin: ISignin) => {
-    console.log("signin", signin, index);
+  const updateAutoSignin = async (signin: ISignin) => {
     const { data } = await chrome.runtime.sendMessage<
-      IMessage<IResourceSignin>
+      IMessage<IUpdateSignin>
     >({
       type: "update-resource",
       subtype: "auto-signin",
       data: {
-        index,
         signin,
       },
     });
@@ -94,12 +95,12 @@ export function SigninList(): JSX.Element {
           <Loader size={6} />
         </Flex>
       ) : null}
-      {signins.map((signin, index) => (
-        <Box marginY={2} marginX={3} key={index}>
+      {signins.map((signin) => (
+        <Box marginY={2} marginX={3} key={signin.id}>
           <SigninCard
             signin={signin}
-            handleDelete={() => deleteSignin(index)}
-            handleAutoSignin={() => updateAutoSignin(index, signin)}
+            handleDelete={() => deleteSignin(signin.id)}
+            handleAutoSignin={() => updateAutoSignin(signin)}
           />
         </Box>
       ))}

src/config/types.ts

@@ -1,3 +1,7 @@
+export interface ObjectOfArrays<T> {
+  [key: string]: T[];
+}
+
 export interface IMessage<T> {
   type: string;
   subtype?: string;
@@ -31,18 +35,22 @@ export interface IVendorData {
 }
 
 export interface ISignin {
+  id: string;
   domain: string;
   identifier?: {
     name?: string;
+    prefix?: string;
   };
   credential?: {
     issueeName?: string;
+    sad: { d: string };
     schema?: {
       title: string;
     };
   };
-  updatedAt: string;
-  autoSignin: boolean;
+  createdAt: number;
+  updatedAt: number;
+  autoSignin?: boolean;
 }
 
 export interface IIdentifier {
@@ -52,7 +60,7 @@ export interface IIdentifier {
 
 export interface ICredential {
   issueeName: string;
-  sad: { a: { i: string } };
+  sad: { a: { i: string }, d: string };
   schema: {
     title: string;
     credentialType: string;

src/pages/background/index.ts

@@ -1,22 +1,17 @@
-import { browserStorageService } from "@pages/background/services/browser-storage";
 import {
   WEB_APP_PERMS,
   configService,
 } from "@pages/background/services/config";
 import { userService } from "@pages/background/services/user";
 import { signifyService } from "@pages/background/services/signify";
+import * as signinResource from "@pages/background/resource/signin";
 import { IMessage, IIdentifier, ICredential } from "@config/types";
 import { senderIsPopup } from "@pages/background/utils";
 import {
   removeSlash,
   getCurrentUrl,
   setActionIcon,
 } from "@pages/background/utils";
-import {
-  updateDomainAutoSigninByIndex,
-  getSigninsByDomain,
-  deleteSigninByIndex,
-} from "@pages/background/signins-utils";
 
 console.log("Background script loaded");
 
@@ -116,8 +111,7 @@ chrome.runtime.onMessage.addListener(function (
         message.subtype === "auto-signin-signature"
       ) {
         // Validate that message comes from a page that has a signin
-        const origin = removeSlash(sender.url);
-        const signins = await getSigninsByDomain(origin);
+        const signins = await signinResource.getSigninsByDomain(sender.url!);
         const autoSignin = signins?.find((signin) => signin.autoSignin);
         if (!signins?.length || !autoSignin) {
           sendResponse({
@@ -179,7 +173,7 @@ chrome.runtime.onMessage.addListener(function (
         message.type === "fetch-resource" &&
         message.subtype === "tab-signin"
       ) {
-        const signins = await getSigninsByDomain(removeSlash(sender.url));
+        const signins = await signinResource.getSigninsByDomain(sender.url);
         const autoSigninObj = signins?.find((signin) => signin.autoSignin);
         sendResponse({ data: { signins: signins ?? [], autoSigninObj } });
       }
@@ -214,7 +208,6 @@ chrome.runtime.onMessage.addListener(function (
         message.subtype === "disconnect-agent"
       ) {
         await signifyService.disconnect();
-        await userService.removePasscode();
         sendResponse({ data: { isConnected: false } });
       }
 
@@ -277,47 +270,44 @@ chrome.runtime.onMessage.addListener(function (
     }
 
     if (message.type === "create-resource" && message.subtype === "signin") {
-      const signins = (await browserStorageService.getValue(
-        "signins"
-      )) as any[];
+      const signins = await signinResource.getSignins();
       const currentUrl = await getCurrentUrl();
       const { identifier, credential } = message.data;
       let signinExists = false;
       if (identifier && identifier.prefix) {
-        signinExists = signins?.find(
-          (signin) =>
-            signin.domain === currentUrl?.origin &&
-            signin?.identifier?.prefix === identifier.prefix
+        signinExists = Boolean(
+          signins?.find(
+            (signin) =>
+              signin.domain === currentUrl?.origin &&
+              signin?.identifier?.prefix === identifier.prefix
+          )
         );
       }
 
       if (credential && credential.sad.d) {
-        signinExists = signins?.find(
-          (signin) =>
-            signin.domain === currentUrl?.origin &&
-            signin?.credential?.sad?.d === credential.sad.d
+        signinExists = Boolean(
+          signins?.find(
+            (signin) =>
+              signin.domain === currentUrl?.origin &&
+              signin?.credential?.sad?.d === credential.sad.d
+          )
         );
       }
 
       if (signinExists) {
         sendResponse({ data: { signins: signins } });
       } else {
-        const signinObj = {
+        const signinObj = signinResource.newSigninObject({
           identifier,
           credential,
-          createdAt: new Date().getTime(),
-          updatedAt: new Date().getTime(),
           domain: currentUrl!.origin,
-        };
+        });
         if (signins && signins?.length) {
-          await browserStorageService.setValue("signins", [
-            ...signins,
-            signinObj,
-          ]);
+          await signinResource.updateSignins([...signins, signinObj]);
         } else {
-          await browserStorageService.setValue("signins", [signinObj]);
+          await signinResource.updateSignins([signinObj]);
         }
-        const storageSignins = await browserStorageService.getValue("signins");
+        const storageSignins = await signinResource.getSignins();
         sendResponse({ data: { signins: storageSignins } });
       }
     }
@@ -344,10 +334,10 @@ chrome.runtime.onMessage.addListener(function (
     }
 
     if (message.type === "fetch-resource" && message.subtype === "signins") {
-      const signins = await browserStorageService.getValue("signins");
+      const signins = await signinResource.getSignins();
       sendResponse({
         data: {
-          signins: signins ?? [],
+          signins,
         },
       });
     }
@@ -356,10 +346,7 @@ chrome.runtime.onMessage.addListener(function (
       message.type === "update-resource" &&
       message.subtype === "auto-signin"
     ) {
-      const resp = await updateDomainAutoSigninByIndex(
-        message?.data?.index,
-        message?.data?.signin
-      );
+      const resp = await signinResource.updateAutoSigninByDomain(message?.data?.signin);
       sendResponse({
         data: {
           ...resp,
@@ -368,7 +355,7 @@ chrome.runtime.onMessage.addListener(function (
     }
 
     if (message.type === "delete-resource" && message.subtype === "signins") {
-      const resp = await deleteSigninByIndex(message?.data?.index);
+      const resp = await signinResource.deleteSigninById(message?.data?.id);
       sendResponse({
         data: {
           ...resp,
@@ -415,8 +402,7 @@ chrome.runtime.onMessageExternal.addListener(function (
       message.subtype === "auto-signin-signature"
     ) {
       // Validate that message comes from a page that has a signin
-      const origin = removeSlash(sender.url);
-      const signins = await getSigninsByDomain(origin);
+      const signins = await signinResource.getSigninsByDomain(sender.url);
       console.log("signins", signins);
       const autoSignin = signins?.find((signin) => signin.autoSignin);
       if (!signins?.length || !autoSignin) {
@@ -431,7 +417,7 @@ chrome.runtime.onMessageExternal.addListener(function (
         autoSignin?.identifier
           ? autoSignin?.identifier?.name
           : autoSignin?.credential?.issueeName,
-        origin
+        removeSlash(sender.url)
       );
       let jsonHeaders: { [key: string]: string } = {};
       for (const pair of signedHeaders.entries()) {