handle authentication through request headers, fixes #2

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack"
+    "build": "webpack"
   },
   "devDependencies": {
     "@inrupt/solid-client-authn-core": "^1.12.2",

src/js/background.js

@@ -1,30 +1,50 @@
-import {getAccessToken, makeAuthenticadedRequest} from "./solid.js";
+import {getAccessToken} from "./solid.js";
+import {createDpopHeader} from '@inrupt/solid-client-authn-core';
 
-const id = "extension-token_0c617d74-fa1f-43a5-a703-43cbf4ebe712";
-const secret = "0cddf4822aa158bb6679be5c02d14c6237263ee964b396f456c485ea33ecb48335c9e19b68c0bc260cb3f8778f4749729d0870cbfc735b9c6cd27ddc81bcb3aa"
 
-console.log("Solid auth extension service worker running")
+const id = "extension-token_9fa32a63-1aaf-4aa8-9250-f8efab7e5235";
+const secret = "1cfccf127a545c599564d2e9196e470212ba2d1b701b6881620e66aed693850a06224b7b67942ac0714979f3b04caff8263eedc5e371529a05e6264af21f7219"
+
+// TODO: pull authorization endpoint from ".well-known/openid-configuration" path
+const tokenUrl = "https://pod.playground.solidlab.be/.oidc/token";
+
+
+const isChrome = (navigator.userAgent.toLowerCase().includes("chrome"));
+console.log("Solid auth extension background script running")
+console.log("is chrome? : " + isChrome)
 
 chrome.webNavigation.onCompleted.addListener(async function (details) {
 
-    console.log("current request url: ", details.url)
+})
+
+async function rewriteRequestHeaders(details) {
 
-    const {access_token, dpopkey} = await getAccessToken(id, secret);
+    // TODO: find a more elegant way to catch the access token creation request called from getAccessToken()
+    if (details.method === "POST") {
+        return
+    }
 
-    const response = await makeAuthenticadedRequest(details.url, access_token, dpopkey)
+    const {accessToken, dpopKey} = await getAccessToken(id, secret, tokenUrl);
 
-    const content = await response.text()
+    const dpopHeader = await createDpopHeader(details.url, "GET", dpopKey);
 
-    console.log("token: ", access_token)
-    console.log("dpopkey: ", await dpopkey.publicKey)
-    console.log(content)
-})
+    details.requestHeaders.push({
+        name: "authorization",
+        value: "DPoP " + accessToken
+    })
+
+    details.requestHeaders.push({
+        name: "dpop",
+        value: dpopHeader
+    })
+
+    return {requestHeaders: details.requestHeaders}
+}
 
 chrome.webRequest.onBeforeSendHeaders.addListener(
-    // Added headers should look like this
-    //
-    // {
-    // authorization: "DPoP <access token>",
-    // dpop: "<dpop key that is outputted from await createDpopHeader(...) in getAccessToken>"
-    // }
-)
+    rewriteRequestHeaders,
+    {
+        urls: ["<all_urls>"]
+    },
+    ["blocking", "requestHeaders"]
+)

src/js/solid.js

@@ -1,6 +1,5 @@
-//import fetch from 'node-fetch';
-const fetch = require('node-fetch').default
-import {buildAuthenticatedFetch, createDpopHeader, generateDpopKeyPair} from '@inrupt/solid-client-authn-core';
+import fetch from 'node-fetch';
+import {createDpopHeader, generateDpopKeyPair} from '@inrupt/solid-client-authn-core';
 
 
 /**
@@ -24,12 +23,12 @@ export async function getToken(email, password) {
  * Generate a temporary access token to make authenticated requests
  * @param {String} id - User id linked to the users WebID
  * @param {String} secret - User secret linked to the users WebID
- * @returns {String} - Temporary Access Token
+ * @param {String} tokenUrl - Url from which an access token can be requested from the server
+ * @returns {String, KeyPair} - Temporary Access Token and it's corresponding keypair
  */
-export async function getAccessToken(id, secret) {
+export async function getAccessToken(id, secret, tokenUrl) {
     const dpopKey = await generateDpopKeyPair();
     const authString = `${encodeURIComponent(id)}:${encodeURIComponent(secret)}`;
-    const tokenUrl = 'https://pod.playground.solidlab.be/.oidc/token';
     const receive = await fetch(tokenUrl, {
         method: 'POST',
         headers: {
@@ -40,17 +39,5 @@ export async function getAccessToken(id, secret) {
         body: 'grant_type=client_credentials&scope=webid',
     });
     const {access_token: accessToken} = await receive.json();
-    return {access_token: accessToken, dpopkey: dpopKey};
-}
-
-/**
- * Make an authenticated request on a url using a temporary access token
- * @param {String} url - Url of a resource that needs authentication
- * @param {String} accessToken - User access token
- * @param {KeyPair} dpopKey - dpopKey
- * @returns {Promise<Response>} - Authenticated response on url
- */
-export async function makeAuthenticadedRequest(url, accessToken, dpopKey) {
-    const authFetch = await buildAuthenticatedFetch(fetch, accessToken, {dpopKey});
-    return await authFetch(url);
+    return {accessToken, dpopKey};
 }

src/manifest.json

@@ -1,5 +1,5 @@
 {
-  "manifest_version": 3,
+  "manifest_version": 2,
   "name": "Solid Authentication",
   "version": "1.0",
 
@@ -10,26 +10,23 @@
   },
 
   "permissions": [
-    "tabs",
+    "<all_urls>",
     "activeTab",
     "storage",
-    "webNavigation"
+    "tabs",
+    "webNavigation",
+    "webRequest",
+    "webRequestBlocking"
   ],
 
-  "action": {
+  "browser_action": {
     "default_popup": "popup.html",
     "default_title": "Solid Auth"
   },
 
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["content.js"]
-    }
-  ],
-
   "background": {
-    "service_worker": "background.js",
-    "type": "module"
+    "scripts":[
+      "background.js"
+    ]
   }
 }

webpack.config.js

@@ -6,7 +6,6 @@ const path = require('path')
 module.exports = {
     entry: {
         background: './src/js/background.js',
-        content: './src/js/content.js'
     },
     output: {
         path: path.join(__dirname, '/dist'),