diff --git a/example-web/my-app/src/App.js b/example-web/my-app/src/App.js index 3bae020b..56b7d2a4 100644 --- a/example-web/my-app/src/App.js +++ b/example-web/my-app/src/App.js @@ -1,10 +1,8 @@ -import { useState } from "react"; import logo from "./ACME_Corporation.png"; import Button from "@mui/material/Button"; import "./App.css"; function App() { - const [password, setPassword] = useState(""); const handleRequestIdentifier = () => { window.postMessage({ type: "init-req-identifier" }, "*"); @@ -14,47 +12,18 @@ function App() { window.postMessage({ type: "init-req-credential" }, "*"); }; - const handleLogout = () => { - localStorage.removeItem("token"); - }; - - const handleAutoAuth = () => { - localStorage.setItem("token", password); - }; - - const storageToken = localStorage.getItem("token"); - return (
logo - { - console.log(e); - setPassword(e.target.value); - }} - />
- {/* */} -
- {storageToken ? null : ( - - )} +
); diff --git a/example-web/my-app/src/index.js b/example-web/my-app/src/index.js index dec77da0..2cb1087e 100644 --- a/example-web/my-app/src/index.js +++ b/example-web/my-app/src/index.js @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; -// import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -10,8 +9,3 @@ root.render( ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -// reportWebVitals(); diff --git a/example-web/my-app/src/reportWebVitals.js b/example-web/my-app/src/reportWebVitals.js deleted file mode 100644 index 5253d3ad..00000000 --- a/example-web/my-app/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/pages/background/index.ts b/src/pages/background/index.ts index 0154ed33..8a5fec74 100644 --- a/src/pages/background/index.ts +++ b/src/pages/background/index.ts @@ -32,7 +32,7 @@ chrome.runtime.onMessage.addListener(function ( message.subtype === "check-agent-connection" ) { const isConnected = await signifyService.isConnected(); - sendResponse({ data: { isConnected, meta: { tab: sender?.tab } } }); + sendResponse({ data: { isConnected, tabUrl: sender?.tab.url } }); } if ( @@ -40,8 +40,7 @@ chrome.runtime.onMessage.addListener(function ( message.subtype === "get-signed-headers" ) { const origin = sender.tab.url!; - // TODO method and path should be passed from web page - const signedHeaders = await signifyService.signHeaders(message.data.signin.identifier.name, "GET", "/", origin); + const signedHeaders = await signifyService.signHeaders(message.data.signin.identifier.name, origin); let jsonHeaders: { [key: string]: string; } = {}; for (const pair of signedHeaders.entries()) { jsonHeaders[pair[0]] = pair[1]; @@ -66,7 +65,7 @@ chrome.runtime.onMessage.addListener(function ( message.subtype === "check-agent-connection" ) { const isConnected = await signifyService.isConnected(); - sendResponse({ data: { isConnected, meta: { tab: sender?.tab } } }); + sendResponse({ data: { isConnected } }); } if ( @@ -95,19 +94,19 @@ chrome.runtime.onMessage.addListener(function ( if (message.type === "tab" && message.subtype === "get-tab-state") { const currentDomain = await getCurrentDomain(); - const appData = await webappService.getAppData(currentDomain?.origin); + const appData = await webappService.getAppData(currentDomain!.origin); sendResponse({ data: appData }); } if (message.type === "tab" && message.subtype === "set-app-state") { const currentDomain = await getCurrentDomain(); - await webappService.setAppData(currentDomain.origin, message.data); - const appData = await webappService.getAppData(currentDomain.origin); + await webappService.setAppData(currentDomain!.origin, message.data); + const appData = await webappService.getAppData(currentDomain!.origin); sendResponse({ data: appData }); } if (message.type === "create-resource" && message.subtype === "signin") { - const signins = await browserStorageService.getValue("signins"); + const signins = await browserStorageService.getValue("signins") as any[]; const currentDomain = await getCurrentDomain(); const { identifier, credential } = message.data; @@ -116,7 +115,7 @@ chrome.runtime.onMessage.addListener(function ( credential, createdAt: new Date().getTime(), updatedAt: new Date().getTime(), - domain: currentDomain.origin, + domain: currentDomain!.origin, }; if (signins && signins?.length) { await browserStorageService.setValue("signins", [ diff --git a/src/pages/background/services/signify.ts b/src/pages/background/services/signify.ts index fe6bb514..212417ad 100644 --- a/src/pages/background/services/signify.ts +++ b/src/pages/background/services/signify.ts @@ -54,7 +54,7 @@ const Signify = () => { await userService.removePasscode(); }; - const signHeaders = async (aidName: string, method:string, path:string, origin: string) => { + const signHeaders = async (aidName: string, origin: string) => { const hab = await _client?.identifiers().get(aidName); const keeper = _client?.manager!.get(hab); @@ -72,8 +72,8 @@ const Signify = () => { headers.set('Origin', origin); const fields = [ - '@method', - '@path', + // '@method', + // '@path', 'signify-resource', 'signify-timestamp', 'origin' @@ -81,8 +81,8 @@ const Signify = () => { const signed_headers = authenticator.sign( headers, - method, - path, + "", + "", fields ); diff --git a/src/pages/background/utils.ts b/src/pages/background/utils.ts index e267b457..0aac359c 100644 --- a/src/pages/background/utils.ts +++ b/src/pages/background/utils.ts @@ -13,7 +13,7 @@ export const isValidUrl = (str: string) => { } }; -export const getCurrentTab = () => { +export const getCurrentTab = (): Promise => { return new Promise((resolve) => { chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { resolve(tabs[0]); @@ -23,7 +23,7 @@ export const getCurrentTab = () => { export const getCurrentDomain = async () => { const currentTab = await getCurrentTab(); - return currentTab ? new URL(currentTab?.url) : null; + return currentTab ? new URL(currentTab.url!) : null; }; export const obfuscateString = (inputString: string) => { diff --git a/src/pages/content/index.tsx b/src/pages/content/index.tsx index 0737052e..8a9f7b6d 100644 --- a/src/pages/content/index.tsx +++ b/src/pages/content/index.tsx @@ -16,27 +16,22 @@ window.addEventListener( switch (event.data.type) { case "init-req-identifier": case "init-req-credential": - // const manifest = chrome.runtime.getManifest(); - const loginBtn = document.getElementById("login-btn"); const { data } = await chrome.runtime.sendMessage>({ type: "authentication", subtype: "check-agent-connection", }); - if (loginBtn) { - const tabSigninResp = await chrome.runtime.sendMessage< - IMessage - >({ - type: "fetch-resource", - subtype: "tab-signin", - }); - insertDialog({ - ...data, - signins: tabSigninResp?.data?.signins, - eventType: event.data.type, - }); - } else { - removeDialog(); - } + const tabSigninResp = await chrome.runtime.sendMessage< + IMessage + >({ + type: "fetch-resource", + subtype: "tab-signin", + }); + insertDialog( + data.isConnected, + data.tabUrl, + tabSigninResp?.data?.signins, + "init-req-identifier" + ); break; } } @@ -67,17 +62,17 @@ chrome.runtime.onMessage.addListener(async function ( type: "fetch-resource", subtype: "tab-signin", }); - insertDialog({ - ...data, - signins: tabSigninResp?.data?.signins, - eventType: "init-req-identifier", - }); + insertDialog( + data.isConnected, + data.tabUrl, + tabSigninResp?.data?.signins, + "init-req-identifier" + ); } } }); -function insertDialog(data: any) { - console.log("inserting dialog"); +function insertDialog(isConnected: boolean, tabUrl: string, signins: any, eventType: string) { const div = document.createElement("div"); div.id = "__root"; document.body.appendChild(div); @@ -86,10 +81,10 @@ function insertDialog(data: any) { const root = createRoot(rootContainer!); root.render( ); } diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx index 740145fc..492a29fc 100644 --- a/src/pages/dialog/Dialog.tsx +++ b/src/pages/dialog/Dialog.tsx @@ -4,10 +4,10 @@ import { PopupPrompt } from "./popupPrompt"; import { SigninItem } from "./signin"; export default function Dialog({ - isConnected, - tab, - signins, - eventType, + isConnected = false, + tabUrl = "", + signins = [], + eventType = "", }): JSX.Element { const logo = chrome.runtime.getURL("src/assets/img/128_keri_logo.png"); const [showPopupPrompt, setShowPopupPrompt] = useState(false); @@ -65,14 +65,14 @@ export default function Dialog({ logo

Sign in with KERI

- {!signins?.length && isConnected ? ( + {!signins.length || !isConnected ? (

- {tab?.url} is requesting an{" "} - {eventType === "init-req-identifier" ? "ID" : "credential"} + {tabUrl} requests authentication with{" "} + {eventType === "init-req-identifier" ? "AID" : "credential"}

) : null} - {signins?.length && isConnected ? ( + {signins.length && isConnected ? ( <> {signins?.map((signin) => ( diff --git a/src/pages/dialog/signin.tsx b/src/pages/dialog/signin.tsx index 5de98d98..2868c146 100644 --- a/src/pages/dialog/signin.tsx +++ b/src/pages/dialog/signin.tsx @@ -1,7 +1,6 @@ -import { APP_STATE } from "@pages/popup/constants"; -import { sign } from "crypto"; -export const SigninItem = ({ signin }): JSX.Element => { +// TODO do not pass the full signins stored object (only AID name, schema name, web url) +export const SigninItem = ({ signin }: { signin: any }): JSX.Element => { const handleClick = async () => { const headers = await chrome.runtime.sendMessage({ type: "authentication",