Semaphore passkey

package.json

@@ -25,6 +25,7 @@
     "@sardinefish/x509": "^1.2.1",
     "@semaphore-protocol/identity": "^4.3.0",
     "@shadcn/ui": "^0.0.4",
+    "@simplewebauthn/browser": "^11.0.0",
     "async-mutex": "^0.4.0",
     "axios": "^1.7.7",
     "buffer": "^6.0.3",

src/components/NavHeader/index.tsx

@@ -23,7 +23,7 @@
   return titles[step] || 'Pangea';
 };
 
 const handleBackClick = (path: string, navigate: any) => {
   const steps = path.split('/');
 
   // special case to handle webiste history path
@@ -78,8 +78,8 @@
   pathname: string;
   navigate: (path: string) => void;
 }) {
   const { error, isValid } = useRemoteAttestation();
   const [isExtensionEnabled, setIsExtensionEnabled] = useExtensionEnabled();
   const [extensionStatus, setExtensionStatus] = useState<boolean | null>(null);
 
   useEffect(() => {
@@ -142,6 +142,10 @@
     return 'Disabled';
   };
 
+  if (pathname === '/lock') {
+    return null;
+  }
+
   return (
     <div className="flex flex-nowrap flex-shrink-0 flex-row items-center relative gap-2 py-4 cursor-default bg-white w-full border-[#E4E6EA] border-b">
       {pathname !== '/home' ? (

src/entries/Background/rpc.ts

@@ -48,6 +48,7 @@ const charwise = require('charwise');
 
 import { BookmarkManager } from '../../reducers/bookmarks';
 import { AttestationObject } from '@eternis/tlsn-js';
+
 export enum BackgroundActiontype {
   get_requests = 'get_requests',
   clear_requests = 'clear_requests',
@@ -88,6 +89,16 @@ export enum BackgroundActiontype {
   get_logging_level = 'get_logging_level',
   prepare_notarization = 'prepare_notarization',
   get_notarization_status = 'get_notarization_status',
+  request_create_identity = 'request_create_identity',
+  request_unlock_extension = 'request_unlock_extension',
+  unlock_extension = 'unlock_extension',
+  close_auth_popup = 'close_auth_popup',
+  identity_updated = 'identity_updated',
+}
+
+export enum AuthActiontype {
+  web_authn_authenticate = 'web_authn_authenticate',
+  web_authn_register = 'web_authn_register',
 }
 
 export type BackgroundAction = {
@@ -136,6 +147,8 @@ export type RequestHistory = {
   type?: string;
 };
 
+let identitySecret: string | undefined = undefined;
+
 export const initRPC = () => {
   browser.runtime.onMessage.addListener(
     (request, sender, sendResponse): any => {
@@ -194,6 +207,15 @@ export const initRPC = () => {
           return true;
         case BackgroundActiontype.get_notarization_status:
           return handleGetNotarizationStatus(request);
+        case BackgroundActiontype.request_unlock_extension:
+          return handleRequestUnlockExtension(request);
+        case BackgroundActiontype.request_create_identity:
+          return handleRequestCreateIdentity(request);
+        case BackgroundActiontype.close_auth_popup:
+          return handleCloseAuthPopup(request);
+        case BackgroundActiontype.identity_updated:
+          return handleIdentityUpdated(request);
+        default:
           break;
       }
     },
@@ -305,6 +327,7 @@ async function handleRetryProveReqest(
       ...req,
       notaryUrl,
       websocketProxyUrl,
+      identitySecret,
     },
   });
 
@@ -358,6 +381,7 @@ export async function handleProveRequestStart(
       body,
       notaryUrl,
       websocketProxyUrl,
+      identitySecret,
     },
   });
 
@@ -410,6 +434,7 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
       body,
       notaryUrl,
       websocketProxyUrl,
+      identitySecret,
     },
   });
 }
@@ -846,6 +871,7 @@ async function handleNotarizeRequest(request: BackgroundAction) {
               body,
               notaryUrl,
               websocketProxyUrl,
+              identitySecret,
             },
           });
         } catch (e) {
@@ -1066,3 +1092,99 @@ async function handleRunPluginCSRequest(request: BackgroundAction) {
 
   return defer.promise;
 }
+
+let authWindow: number | undefined = undefined;
+const createAuthPopup = async (left: number, top: number, width: number) => {
+  const popup = await chrome.windows.create({
+    url: 'auth.html',
+    type: 'panel',
+    width,
+    height: 1,
+    left,
+    top,
+    focused: true,
+    state: 'normal',
+  });
+  authWindow = popup.id;
+};
+
+async function handleRequestUnlockExtension(request: BackgroundAction) {
+  try {
+    const { left, top, width } = request.data;
+    await createAuthPopup(left, top, width);
+    setTimeout(() => {
+      chrome.runtime.sendMessage({
+        type: AuthActiontype.web_authn_authenticate,
+      });
+    }, 300);
+  } catch (e) {
+    console.error('error', e);
+  }
+}
+
+async function handleRequestCreateIdentity(request: BackgroundAction) {
+  try {
+    const { left, top, width, username, userId } = request.data;
+    if (!username || !userId) {
+      throw new Error('username and userId are required');
+    }
+
+    await createAuthPopup(left, top, width);
+    setTimeout(() => {
+      chrome.runtime.sendMessage({
+        type: AuthActiontype.web_authn_register,
+        data: {
+          username,
+          userId,
+        },
+      });
+    }, 300);
+  } catch (e) {
+    console.error('error', e);
+  }
+}
+
+async function handleCloseAuthPopup(request: BackgroundAction) {
+  try {
+    if (authWindow) {
+      // Remove all popup windows otherwise popup.html will keep stacking up
+      // await chrome.windows.remove(authWindow);
+      const windows = await chrome.windows.getAll();
+      await Promise.all(
+        windows.map(async (window) => {
+          if (window.type === 'popup') {
+            await chrome.windows.remove(window.id!);
+          }
+        }),
+      );
+
+      // Calling open popup forces the popup to remain open as focus is lost from previous remove calls
+      await chrome.windows.create({
+        url: 'popup.html',
+        type: 'popup',
+        width: 1,
+        height: 1,
+      });
+
+      // send message unlock extension
+      if (request && request.data && request.data.userId) {
+        chrome.runtime.sendMessage({
+          type: BackgroundActiontype.unlock_extension,
+          data: {
+            userId: request.data.userId,
+          },
+        });
+      }
+
+      authWindow = undefined;
+    }
+  } catch (e) {
+    console.error('error', e);
+  }
+}
+
+async function handleIdentityUpdated(request: BackgroundAction) {
+  if (request.data.identitySecret) {
+    identitySecret = request.data.identitySecret;
+  }
+}

src/entries/Offscreen/Offscreen.tsx

@@ -13,7 +13,7 @@ import { BackgroundActiontype } from '../Background/rpc';
 import browser from 'webextension-polyfill';
 import { Proof } from '../../utils/types';
 import { Method } from '@eternis/tlsn-js/wasm/pkg';
-import { IdentityManager } from '../../reducers/identity';
+import { Identity } from '@semaphore-protocol/identity';
 
 const { init, verify_attestation, Prover, NotarizedSession, TlsProof }: any =
   Comlink.wrap(new Worker(new URL('./worker.ts', import.meta.url)));
@@ -212,6 +212,7 @@ async function createProof(options: {
   };
   body?: any;
   id: string;
+  identitySecret: string;
 }): Promise<AttestationObject> {
   const {
     url,
@@ -221,10 +222,14 @@ async function createProof(options: {
     notaryUrl,
     websocketProxyUrl,
     id,
+    identitySecret,
   } = options;
 
-  const identityManager = new IdentityManager();
-  const identity = await identityManager.getIdentity();
+  if (!identitySecret) {
+    throw new Error('IdentitySecret is required, extension is not unlocked');
+  }
+
+  const identity = new Identity(identitySecret);
 
   const hostname = urlify(url)?.hostname || '';
   const notary = NotaryServer.from(notaryUrl);

src/entries/Popup/Popup.tsx

@@ -44,11 +44,18 @@ import { getConnection } from '../Background/db';
 import NavHeader from '../../components/NavHeader';
 import Websites from '../../pages/Websites';
 import AttestationDetails from '../../pages/AttestationDetails';
+import Locked from '../../pages/Locked';
+import {
+  initIdentity,
+  setIdentity,
+  useIdentity,
+} from '../../reducers/identity';
 
 const Popup = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const location = useLocation();
+  const { loading, identity } = useIdentity();
 
   useEffect(() => {
     (async () => {
@@ -70,12 +77,18 @@ const Popup = () => {
         type: BackgroundActiontype.get_prove_requests,
         data: tab?.id,
       });
+
+      dispatch(await initIdentity());
     })();
   }, []);
 
   useEffect(() => {
-    chrome.runtime.onMessage.addListener((request) => {
+    chrome.runtime.onMessage.addListener(async (request) => {
       switch (request.type) {
+        case BackgroundActiontype.unlock_extension: {
+          dispatch(await setIdentity(request.data.userId));
+          break;
+        }
         case BackgroundActiontype.push_action: {
           if (
             request.data.tabId === store.getState().requests.activeTab?.id ||
@@ -95,6 +108,14 @@ const Popup = () => {
     });
   }, []);
 
+  if (loading) {
+    return <></>;
+  }
+
+  if (!identity) {
+    return <Locked />;
+  }
+
   return (
     <div className="flex flex-col w-full h-full overflow-hidden bg-[#F9FAFB]">
       <NavHeader pathname={location.pathname} navigate={navigate} />

src/entries/Popup/auth.html

@@ -0,0 +1,10 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Eternis Passkey Authentication</title>
+</head>
+<body>
+
+</body>
+</html>