Reactive authentication

A reactive authentication library supporting Solid OIDC.

Use

Preliminaries

// 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>
Copy

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

<authorization-code-flow></authorization-code-flow>
<idp-picker></idp-picker>
Copy

then the elements provide the required lambdas:

const codeUi = document.querySelector("authorization-code-flow")
const issuerUi = document.querySelector("idp-picker")

getCode = codeUi.getCode.bind(codeUi)
getIssuer = issuerUi.getIssuer.bind(issuerUi)
Copy

Setup

import { DPoPTokenProvider, ReactiveFetchManager } from "@solid/reactive-authentication"

const provider = new DPoPTokenProvider(callbackUri, getCode, getIssuer)
const manager = new ReactiveFetchManager([provider])
Copy

Use an authenticated fetch

The ReactiveFetchManager provides a fetch function that can be used to request protected resources:

const response = await manager.fetch(requestUri)
Copy

Patch global fetch

The ReactiveFetchManager can monkey-patch global fetch to achieve the same effect:

manager.registerGlobally()
const response = await fetch(requestUri)
Copy

Run the demo

To compile,

npm install
npm run build
Copy

Then, for the demo, run a web server on the root folder, e.g.

npx http-server
Copy

then navigate to localhost:8080 (or wherever it was served).

History

The paradigm employed here originates in @langsamu's research project Solid Explorer.

It was later expanded into a robust architecture by @hellikopter and @langsamu in .NET ReactiveAuthentication.