OIDC login + extra features

.eslintrc.json

@@ -0,0 +1,13 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

README.md

@@ -1,28 +1,39 @@
 # Solid Authentication Extension
 
 This FireFox extension replaces unauthenticated requests with authenticated Solid requests.
-This extension only works with WebIDs that use 
-the [Community Solid Server](https://github.com/CommunitySolidServer/CommunitySolidServer) (>= v4.0.0)
-as identity provider.
+You are able to log in with [OIDC](#oidc) or
+[Client Credentials](#client-credentials).
+
+You can create a Solid pod for testing via the [SolidLab Playground](https://pod.playground.solidlab.be/).
+
+## OIDC
+
+You are able to log in with [OIDC](https://solidproject.org/TR/oidc) 
+via the following steps:
+
+1. Install the extension.
+2. Click on the Solid icon in the toolbar and a popup will open.
+3. Provide your identity provider in the corresponding field.
+4. Click on the "Log in" button and new a tab will open.
+5. Log in to your identity provider in the new tab.
+6. The tab will close once you are logged in.
+7. Your requests are now authenticated.
 
 ## Client Credentials
 
-Requests are authenticated using the 
-[Client Credentials API](https://communitysolidserver.github.io/CommunitySolidServer/5.x/usage/client-credentials/).
-You need at least v4.0.0 of the Community Solid Server for this to work.
+You can only use [Client Credentials](https://communitysolidserver.github.io/CommunitySolidServer/5.x/usage/client-credentials/)
+if your identify provider is the [Community Solid Server](https://github.com/CommunitySolidServer/CommunitySolidServer) (>= v4.0.0).
 
-The extension uses temporary access tokens that are created using either 
-the client's email and password used on the server or 
+The extension uses temporary access tokens that are created using either
+the client's email and password used on the server or
 a previously created id and secret linked to the user's WebID on the server.
 
-You can create a Solid pod for testing via the [SolidLab Playground](https://pod.playground.solidlab.be/).
-
 ## Development environment
 
 - [Node.js](https://nodejs.org/en) v18.12.1
 - npm v8.19.2
 
-You find instructions on how to install Node.js and npm 
+You find instructions on how to install Node.js and npm
 [here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-installer-to-install-nodejs-and-npm).
 
 Tested on macOS 13.1.
@@ -31,25 +42,14 @@ Tested on macOS 13.1.
 
 You can develop and test the by doing the following steps:
 
-1. Install dependencies via 
+1. Install dependencies via
    ```shell
    npm i
    ```
-2. Build the extension using webpack via
+2. Run the start command to fire up hot reload
    ```shell
-   npm run build
+   npm run build:dev
    ```
-   This places all the necessary bundled files in the newly created `dist` directory .
-3. Install the [Firefox Browser Developer Edition](https://www.mozilla.org/en-US/firefox/developer/).
-4. Navigate to `about:debugging#/runtime/this-firefox`.
-5. Select `Load Temporary Add-on` at the top of the page.
-6. When a file explorer appears, navigate tot the aforementioned `dist` directory and select the `manifest.json` file withing this directory.
-Do NOT select the manifest in the working directory itself, this will cause the extension to not work.
-7. The extension should now be running, both it's browser popup and the background process. 
-
-If you can't find the extension icon which opens the popup window, 
-it's most likely unpinned and hidden away in the extension menu which can be opened by 
-clicking the jigsaw icon on the top right of the browser window.
 
 ## Package
 
@@ -69,7 +69,7 @@ You can package the extension for distribution and signing via the following ste
 
 If you want to use the extension with the standard edition of FireFox,
 you need to use the signed version of the extension.
-You find this version in assets of 
+You find this version in assets of
 the [releases](https://github.com/KNowledgeOnWebScale/solid-authentication-browser-extension/releases).
 The file ends with `.xpi`.
 
@@ -78,32 +78,47 @@ You find more information about how to add an extension to FireFox from a file
 
 ## Session
 
-The extension will remember your credentials (ID & Secret combination) in your browser storage.
+The following only applies to Client Credentials.
 
+The extension will remember your credentials (ID & Secret combination) in your browser storage.
 This will allow the extension to restore and reuse your previously generated id and secret after you press 
 `reload`  in the aforementioned debugging menu until you log out manually.
 
-Because the extension is not [signed](https://support.mozilla.org/en-US/kb/add-on-signing-in-firefox) during development, 
+Because the extension is not [signed](https://support.mozilla.org/en-US/kb/add-on-signing-in-firefox) during development,
 it's [add-on id](https://extensionworkshop.com/documentation/develop/extensions-and-the-add-on-id/)
-is not static. 
-Because of this, 
-if you remove and reload the extension or restart your browser and reload the extension, 
+is not static.
+Because of this,
+if you remove and reload the extension or restart your browser and reload the extension,
 the extension won't find it's previously saved credentials in the browser storage and you will have to log in again.
 
-## GET requests only
+## GET and PUT requests only
 
-At this time, the extension will only add authentication to GET requests.
-POST requests will not be blocked, but won't have any authentication either.
+At this time, the extension will only add authentication to GET and PUT requests.
+POST and HEAD requests will not be blocked, but won't have any authentication either.
 
 This is because, the (blocking) web request listener that catches any outgoing request from the browser user,
 will catch any outgoing requests from the extension background script as well,
 specifically POST request [requesting the token url](https://github.com/KNowledgeOnWebScale/solid-authentication-browser-extension/blob/8211dab9b7a42fa98eeef37158084788e62d251a/src/js/solid.js#L51-L60)
 and [requesting access tokens from said url](https://github.com/KNowledgeOnWebScale/solid-authentication-browser-extension/blob/8211dab9b7a42fa98eeef37158084788e62d251a/src/js/solid.js#L30-L44).
 
-To prevent an infinite loop of blocking web request listeners catching each other, any POST request that is caught, 
-[will be passed](https://github.com/KNowledgeOnWebScale/solid-authentication-browser-extension/blob/8211dab9b7a42fa98eeef37158084788e62d251a/src/js/background.js#L48-L50) 
-before any token url or access token is requested, and consequently any authentication is added.  
+To prevent an infinite loop of blocking web request listeners catching each other, any POST request that is caught,
+[will be passed](https://github.com/KNowledgeOnWebScale/solid-authentication-browser-extension/blob/8211dab9b7a42fa98eeef37158084788e62d251a/src/js/background.js#L48-L50)
+before any token url or access token is requested, and consequently any authentication is added.
 
 ## Screencast
 
-You find a screencast of the extension [here](https://cloud.ilabt.imec.be/index.php/s/QbabTcHkX2J8GHG).
+You find a screencast of the extension [here](https://cloud.ilabt.imec.be/index.php/s/QbabTcHkX2J8GHG).
+
+## Tested servers with OIDC login
+
+| IDP | Resource | Works? | Comments                                             |                                                      
+|-----|----------|--------|------------------------------------------------------|
+| CSS | CSS      | Yes    |                                                      |
+| ESS | ESS      | Yes    |                                                      |
+| NSS | NSS      | No     | Something weird with status codes received from NSS. |
+| NSS | CSS      | Yes    |                                                      |
+
+## License
+
+This code is copyrighted by [Ghent University – imec](http://idlab.ugent.be/) and 
+released under the [MIT license](http://opensource.org/licenses/MIT).

examples/status-website/.gitignore

@@ -0,0 +1 @@
+node_modules

examples/status-website/README.md

@@ -0,0 +1,61 @@
+# Solid Authentication extension status website
+
+This website shows the status of the Solid Authentication browser extension.
+It shows if the extension is authenticated and what the WebID is of the logged-in agent.
+
+## Requirements
+
+You have this [commit](https://github.com/KNowledgeOnWebScale/solid-authentication-browser-extension/commit/56e1f4badd20eeb9af9f4a53feb2571339f69dfc) 
+of the browser extension installed.
+
+## Host website locally
+
+1. Install dependencies via `npm i`.
+2. Run HTTP server via `npm start`.
+3. Browse to `http://localhost:8080`.
+
+## How it works
+
+The extension adds the property `solid` to `window` which the script of a Web page can access.
+This property has two methods: `getStatus(callback)` and `onStatusChange(callback)`.
+
+### `getStatus(callback)`
+This method gets the status from the extension
+and passes it **stringified** to the provided callback.
+The status is an object that looks like when you are logged in:
+
+```json
+{
+  "authenticated": true,
+  "webId": "https://pod.playground.solidlab.be/ash/profile/card#me"
+}
+```
+
+When you are not logged in the object is:
+
+```json
+{
+  "authenticated": false
+}
+```
+
+In the page script you do something like:
+
+```javascript
+window.solid.getStatus(status => {
+  status = JSON.parse(status);
+  console.log(status);
+});
+```
+
+### `onStatusChange(callback)`
+This method registers a callback that is called everytime the status changes.
+It passes the same **stringified** object as for `getStatus` to the callback.
+In the page script you do something like:
+
+```javascript
+window.solid.onStatusChange(status => {
+  status = JSON.parse(status);
+  console.log(status);
+  });
+```

examples/status-website/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Extension status website</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div>
+  This page shows the status of the Solid Authentication browser extension.<br/>
+  The values below change automatically when you log in or out with the extension.
+</div>
+
+<div id="error" class="hidden">
+    <code>window.solid</code> is undefined. Did you install the extension? <br/>
+    Once you do, refresh this page.
+</div>
+<div>
+  <ul>
+    <li>Logged in: <span id="logged-in"></span></li>
+    <li>WebID: <span id=webId></span></li>
+  </ul>
+</div>
+
+<script type="application/javascript" src="script.js"></script>
+</body>
+</html>