From be015515b561e163c69a17d4670eb5219ef608d1 Mon Sep 17 00:00:00 2001
From: Samu Lang <langsamu@hotmail.com>
Date: Wed, 10 Jun 2026 12:32:26 +0100
Subject: [PATCH] Initial usage documentation

---
 README.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a0eb8aa..c22a9a6 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,73 @@
 
 A reactive authentication library supporting Solid OIDC.
 
+## Use
 
-## Run
+### Preliminaries
+
+```ts
+// The address of the protected resource to be requested
+let requestUri: string
+
+// The address of a page that users return to after Authoentication Code flow
+let callbackUri: string
+
+// A function that initiates Authorization Code flow and returns an Authorization Code
+let getCode: (authorizationUri: URL, signal: AbortSignal) => Promise<string>
+
+// A function that provides an Authorization Server URI based on the original request
+let getIssuer: (request: Request) => Promise<URL>
+```
+
+### Wiring up UI
+
+`getCode` and `getIssuer` above can implemented arbitrarily.
+
+But they can also be hooked up to UI elements provided by this library.
+
+If the DOM contains
+```html
+<authorization-code-flow></authorization-code-flow>
+<idp-picker></idp-picker>
+```
+
+then the elements provide the required lambdas:
+
+```js
+const codeUi = document.querySelector("authorization-code-flow")
+const issuerUi = document.querySelector("idp-picker")
+
+getCode = codeUi.getCode.bind(codeUi)
+getIssuer = issuerUi.getIssuer.bind(issuerUi)
+```
+
+### Setup
+
+```js
+import { DPoPTokenProvider, ReactiveFetchManager } from "@solid/reactive-authentication"
+
+const provider = new DPoPTokenProvider(callbackUri, getCode, getIssuer)
+const manager = new ReactiveFetchManager([provider])
+```
+
+### Use an authenticated `fetch`
+
+The `ReactiveFetchManager` provides a `fetch` function that can be used to request protected resources:
+
+```js
+const response = await manager.fetch(requestUri)
+```
+
+### Patch global `fetch`
+
+The `ReactiveFetchManager` can monkey-patch global `fetch` to achieve the same effect:
+
+```js
+manager.registerGlobally()
+const response = await fetch(requestUri)
+```
+
+## Run the demo
 
 To compile,
 ```batch