feat: implement webauthn to encrypt the private keys

package.json

@@ -144,7 +144,7 @@
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",
-    "react-icons": "^4.7.1",
+    "react-icons": "^5.2.1",
     "react-loader-spinner": "^5.3.4",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.2",

src/common/types/IAuthenticationExtensionsClientOutputs.ts

@@ -0,0 +1,9 @@
+// types
+import IPRFExtensionOutput from './IPRFExtensionOutput';
+
+interface IAuthenticationExtensionsClientOutputs
+  extends AuthenticationExtensionsClientOutputs {
+  prf?: IPRFExtensionOutput;
+}
+
+export default IAuthenticationExtensionsClientOutputs;

src/common/types/IPRFExtensionOutput.ts

@@ -0,0 +1,9 @@
+// types
+import IPRFExtensionResults from './IPRFExtensionResults';
+
+interface IPRFExtensionOutput {
+  enabled?: boolean;
+  results?: IPRFExtensionResults;
+}
+
+export default IPRFExtensionOutput;

src/common/types/IPRFExtensionResults.ts

@@ -0,0 +1,5 @@
+interface IPRFExtensionResults {
+  first: ArrayBuffer;
+}
+
+export default IPRFExtensionResults;

src/common/types/index.ts

@@ -1,7 +1,10 @@
+export type { default as IAuthenticationExtensionsClientOutputs } from './IAuthenticationExtensionsClientOutputs';
 export type { default as IBaseOptions } from './IBaseOptions';
 export type { default as IClientInformation } from './IClientInformation';
 export type { default as IClientRequestMessage } from './IClientRequestMessage';
 export type { default as IClientResponseMessage } from './IClientResponseMessage';
 export type { default as ILogger } from './ILogger';
 export type { default as ILogLevel } from './ILogLevel';
+export type { default as IPRFExtensionOutput } from './IPRFExtensionOutput';
+export type { default as IPRFExtensionResults } from './IPRFExtensionResults';
 export type { default as TProviderMessages } from './TProviderMessages';

src/extension/apps/background/App.tsx

@@ -14,6 +14,7 @@ import { reducer as eventsReducer } from '@extension/features/events';
 import { reducer as layoutReducer } from '@extension/features/layout';
 import { reducer as messagesReducer } from '@extension/features/messages';
 import { reducer as networksReducer } from '@extension/features/networks';
+import { reducer as passkeysReducer } from '@extension/features/passkeys';
 import { reducer as passwordLockReducer } from '@extension/features/password-lock';
 import { reducer as sessionsReducer } from '@extension/features/sessions';
 import { reducer as settingsReducer } from '@extension/features/settings';
@@ -35,6 +36,7 @@ const App: FC<IAppProps> = ({ i18next, initialColorMode }: IAppProps) => {
       layout: layoutReducer,
       messages: messagesReducer,
       networks: networksReducer,
+      passkeys: passkeysReducer,
       passwordLock: passwordLockReducer,
       sessions: sessionsReducer,
       settings: settingsReducer,

src/extension/apps/background/Root.tsx

@@ -8,6 +8,7 @@ import LoadingPage from '@extension/components/LoadingPage';
 import { fetchAccountsFromStorageThunk } from '@extension/features/accounts';
 import { handleNewEventByIdThunk } from '@extension/features/events';
 import { closeCurrentWindowThunk } from '@extension/features/layout';
+import { fetchFromStorageThunk as fetchPasskeyCredentialFromStorageThunk } from '@extension/features/passkeys';
 import { fetchSessionsThunk } from '@extension/features/sessions';
 import { fetchSettingsFromStorageThunk } from '@extension/features/settings';
 import { fetchStandardAssetsFromStorageThunk } from '@extension/features/standard-assets';
@@ -47,6 +48,7 @@ const Root: FC = () => {
       return;
     }
 
+    dispatch(fetchPasskeyCredentialFromStorageThunk());
     dispatch(fetchSystemInfoFromStorageThunk());
     dispatch(fetchSettingsFromStorageThunk());
     dispatch(fetchSessionsThunk());

src/extension/apps/main/App.tsx

@@ -38,6 +38,7 @@ import { reducer as messagesReducer } from '@extension/features/messages';
 import { reducer as networksReducer } from '@extension/features/networks';
 import { reducer as newsReducer } from '@extension/features/news';
 import { reducer as notificationsReducer } from '@extension/features/notifications';
+import { reducer as passkeysReducer } from '@extension/features/passkeys';
 import { reducer as passwordLockReducer } from '@extension/features/password-lock';
 import { reducer as reKeyAccountReducer } from '@extension/features/re-key-account';
 import { reducer as removeAssetsReducer } from '@extension/features/remove-assets';
@@ -68,6 +69,7 @@ import type {
   IAppThunkDispatch,
   IMainRootState,
   ISettings,
+  TEncryptionCredentials,
 } from '@extension/types';
 
 // utils
@@ -143,17 +145,17 @@ const createRouter = ({ dispatch, getState }: Store<IMainRootState>) => {
           ],
           element: <Root />,
           loader: async () => {
-            let password: string | null;
+            let credentials: TEncryptionCredentials | null;
             let settings: ISettings;
 
             try {
               settings = await (dispatch as IAppThunkDispatch)(
                 fetchSettingsFromStorageThunk()
               ).unwrap(); // fetch the settings from storage
-              password = getState().passwordLock.password;
+              credentials = getState().passwordLock.credentials;
 
-              // if the password lock is on, we need the password
-              if (settings.security.enablePasswordLock && !password) {
+              // if the password lock is on, we need the passkey/password
+              if (settings.security.enablePasswordLock && !credentials) {
                 return redirect(PASSWORD_LOCK_ROUTE);
               }
             } catch (error) {
@@ -187,6 +189,7 @@ const App: FC<IAppProps> = ({ i18next, initialColorMode }: IAppProps) => {
       networks: networksReducer,
       news: newsReducer,
       notifications: notificationsReducer,
+      passkeys: passkeysReducer,
       passwordLock: passwordLockReducer,
       reKeyAccount: reKeyAccountReducer,
       removeAssets: removeAssetsReducer,

src/extension/apps/main/Root.tsx

@@ -27,6 +27,7 @@
 } from '@extension/features/networks';
 import { fetchFromStorageThunk as fetchNewsFromStorageThunk } from '@extension/features/news';
 import { setShowingConfetti } from '@extension/features/notifications';
+import { fetchFromStorageThunk as fetchPasskeyCredentialFromStorageThunk } from '@extension/features/passkeys';
 import { reset as resetReKeyAccount } from '@extension/features/re-key-account';
 import { reset as resetRemoveAssets } from '@extension/features/remove-assets';
 import { reset as resetSendAsset } from '@extension/features/send-assets';
@@ -50,6 +51,7 @@
 import AddAssetsModal, {
   AddAssetsForWatchAccountModal,
 } from '@extension/modals/AddAssetsModal';
+import AddPasskeyModal from '@extension/modals/AddPasskeyModal';
 import ARC0300KeyRegistrationTransactionSendEventModal from '@extension/modals/ARC0300KeyRegistrationTransactionSendEventModal';
 import ConfirmModal from '@extension/modals/ConfirmModal';
 import EnableModal from '@extension/modals/EnableModal';
@@ -65,7 +67,7 @@
 // selectors
 import {
   useSelectAccounts,
-  useSelectPasswordLockPassword,
+  useSelectPasswordLockCredentials,
   useSelectNotificationsShowingConfetti,
   useSelectSelectedNetwork,
   useSelectSettings,
@@ -79,7 +81,7 @@
   const navigate = useNavigate();
   // selectors
   const accounts = useSelectAccounts();
-  const passwordLockPassword = useSelectPasswordLockPassword();
+  const passwordLockPassword = useSelectPasswordLockCredentials();
   const selectedNetwork = useSelectSelectedNetwork();
   const settings = useSelectSettings();
   const showingConfetti = useSelectNotificationsShowingConfetti();
@@ -98,6 +100,7 @@
   useEffect(() => {
     dispatch(fetchSystemInfoFromStorageThunk());
     dispatch(fetchSettingsFromStorageThunk());
+    dispatch(fetchPasskeyCredentialFromStorageThunk());
     dispatch(fetchSessionsThunk());
     dispatch(fetchStandardAssetsFromStorageThunk());
     dispatch(fetchARC0072AssetsFromStorageThunk());

src/extension/components/ARC0300AccountImportWithAddressModalContent/ARC0300AccountImportWithAddressModalContent.tsx

@@ -22,6 +22,7 @@ import ModalSkeletonItem from '@extension/components/ModalSkeletonItem';
 import ModalItem from '@extension/components/ModalItem';
 import ModalTextItem from '@extension/components/ModalTextItem';
 import ModalSubHeading from '@extension/components/ModalSubHeading';
+import WatchAccountBadge from '@extension/components/WatchAccountBadge';
 
 // constants
 import {
@@ -56,7 +57,7 @@ import {
 } from '@extension/selectors';
 
 // services
-import AccountService from '@extension/services/AccountService';
+import PrivateKeyService from '@extension/services/PrivateKeyService';
 import QuestsService from '@extension/services/QuestsService';
 
 // theme
@@ -72,8 +73,8 @@ import type {
 } from '@extension/types';
 
 // utils
+import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import ellipseAddress from '@extension/utils/ellipseAddress';
-import WatchAccountBadge from '@extension/components/WatchAccountBadge';
 
 const ARC0300AccountImportWithAddressModalContent: FC<
   IARC0300ModalContentProps<
@@ -158,8 +159,8 @@ const ARC0300AccountImportWithAddressModalContent: FC<
           ephemeral: true,
           description: t<string>('captions.addedAccount', {
             address: ellipseAddress(
-              AccountService.convertPublicKeyToAlgorandAddress(
-                account.publicKey
+              convertPublicKeyToAVMAddress(
+                PrivateKeyService.decode(account.publicKey)
               )
             ),
           }),
@@ -174,7 +175,9 @@ const ARC0300AccountImportWithAddressModalContent: FC<
 
       // track the action
       await questsService.importAccountViaQRCodeQuest(
-        AccountService.convertPublicKeyToAlgorandAddress(account.publicKey)
+        convertPublicKeyToAVMAddress(
+          PrivateKeyService.decode(account.publicKey)
+        )
       );
 
       // go to the account and the assets tab