@alepha/react 0.6.0 → 0.6.1

package/src/providers/ReactAuthProvider.ts

@@ -1,410 +0,0 @@
-import { $hook, $inject, $logger, Alepha, t } from "@alepha/core";
-import {
-	$cookie,
-	$route,
-	BadRequestError,
-	type CookieManager,
-	FastifyCookieProvider,
-} from "@alepha/server";
-import {
-	type Configuration,
-	allowInsecureRequests,
-	authorizationCodeGrant,
-	buildAuthorizationUrl,
-	buildEndSessionUrl,
-	calculatePKCECodeChallenge,
-	discovery,
-	randomPKCECodeVerifier,
-	refreshTokenGrant,
-} from "openid-client";
-import { $auth } from "../descriptors/$auth";
-import type { PreviousLayerData } from "../services/Router";
-
-export class ReactAuthProvider {
-	protected readonly log = $logger();
-	protected readonly alepha = $inject(Alepha);
-	protected readonly fastifyCookieProvider = $inject(FastifyCookieProvider);
-	protected authProviders: AuthProvider[] = [];
-
-	protected readonly authorizationCode = $cookie({
-		name: "authorizationCode",
-		ttl: { minutes: 15 },
-		httpOnly: true,
-		schema: t.object({
-			codeVerifier: t.optional(t.string({ size: "long" })),
-			redirectUri: t.optional(t.string({ size: "long" })),
-		}),
-	});
-
-	protected readonly tokens = $cookie({
-		name: "tokens",
-		ttl: { days: 1 },
-		httpOnly: true,
-		compress: true,
-		schema: t.object({
-			access_token: t.optional(t.string({ size: "rich" })),
-			expires_in: t.optional(t.number()),
-			refresh_token: t.optional(t.string({ size: "rich" })),
-			id_token: t.optional(t.string({ size: "rich" })),
-			scope: t.optional(t.string()),
-			issued_at: t.optional(t.number()),
-		}),
-	});
-
-	protected readonly user = $cookie({
-		name: "user",
-		ttl: { days: 1 },
-		schema: t.object({
-			id: t.string(),
-			name: t.optional(t.string()),
-			email: t.optional(t.string()),
-		}),
-	});
-
-	protected readonly configure = $hook({
-		name: "configure",
-		handler: async () => {
-			const auths = this.alepha.getDescriptorValues($auth);
-			for (const auth of auths) {
-				const options = auth.value.options;
-				if (options.oidc) {
-					this.authProviders.push({
-						name: options.name ?? auth.key,
-						redirectUri: options.oidc.redirectUri ?? "/api/_oauth/callback",
-						client: await discovery(
-							new URL(options.oidc.issuer),
-							options.oidc.clientId,
-							{
-								client_secret: options.oidc.clientSecret,
-							},
-							undefined,
-							{
-								execute: [allowInsecureRequests],
-							},
-						),
-					});
-				}
-			}
-		},
-	});
-
-	/**
-	 * Configure Fastify to forward Session Access Token to Header Authorization.
-	 */
-	protected readonly configureFastify = $hook({
-		name: "configure:fastify",
-		after: this.fastifyCookieProvider,
-		handler: async (app) => {
-			app.addHook("onRequest", async (req) => {
-				if (
-					req.cookies &&
-					!this.isViteFile(req.url) &&
-					!!this.authProviders.length
-				) {
-					const tokens = await this.refresh(req.cookies);
-					if (tokens) {
-						req.headers.authorization = `Bearer ${tokens.access_token}`;
-					}
-
-					if (this.user.get(req.cookies) && !this.tokens.get(req.cookies)) {
-						this.user.del(req.cookies);
-					}
-				}
-			});
-		},
-	});
-
-	/**
-	 *
-	 * @param cookies
-	 * @protected
-	 */
-	protected async refresh(
-		cookies: CookieManager,
-	): Promise<SessionTokens | undefined> {
-		const now = Date.now();
-		const tokens = this.tokens.get(cookies);
-		if (!tokens) {
-			return;
-		}
-
-		if (tokens.expires_in && tokens.issued_at) {
-			const expiresAt = tokens.issued_at + (tokens.expires_in - 10) * 1000;
-			if (expiresAt < now) {
-				// is expired
-				if (tokens.refresh_token) {
-					// but has refresh token
-					try {
-						const newTokens = await refreshTokenGrant(
-							this.authProviders[0].client,
-							tokens.refresh_token,
-						);
-
-						this.tokens.set(cookies, {
-							...newTokens,
-							issued_at: Date.now(),
-						});
-
-						return newTokens;
-					} catch (e) {
-						this.log.warn(e, "Failed to refresh token -");
-					}
-				}
-
-				// session expired and no (valid) refresh token
-				this.tokens.del(cookies);
-				this.user.del(cookies);
-				return;
-			}
-		}
-
-		if (!tokens.issued_at && tokens.access_token) {
-			this.tokens.del(cookies);
-			this.user.del(cookies);
-			return;
-		}
-
-		return tokens;
-	}
-
-	/**
-	 *
-	 */
-	public readonly login = $route({
-		security: false,
-		private: true,
-		url: "/_oauth/login",
-		group: "auth",
-		method: "GET",
-		schema: {
-			query: t.object({
-				redirect: t.optional(t.string()),
-				provider: t.optional(t.string()),
-			}),
-		},
-		handler: async ({ query, cookies, url }) => {
-			const { client } = this.provider(query.provider);
-
-			const codeVerifier = randomPKCECodeVerifier();
-			const codeChallenge = await calculatePKCECodeChallenge(codeVerifier);
-			const scope = "openid profile email";
-
-			let redirect_uri = this.authProviders[0].redirectUri;
-			if (redirect_uri.startsWith("/")) {
-				redirect_uri = `${url.protocol}://${url.host}${redirect_uri}`;
-			}
-
-			const parameters: Record<string, string> = {
-				redirect_uri,
-				scope,
-				code_challenge: codeChallenge,
-				code_challenge_method: "S256",
-			};
-
-			this.authorizationCode.set(cookies, {
-				codeVerifier,
-				redirectUri: query.redirect ?? "/",
-			});
-
-			return new Response("", {
-				status: 302,
-				headers: {
-					Location: buildAuthorizationUrl(client, parameters).toString(),
-				},
-			});
-		},
-	});
-
-	/**
-	 *
-	 */
-	public readonly callback = $route({
-		security: false,
-		private: true,
-		url: "/_oauth/callback",
-		group: "auth",
-		method: "GET",
-		schema: {
-			query: t.object({
-				provider: t.optional(t.string()),
-			}),
-		},
-		handler: async ({ url, cookies, query }) => {
-			const { client } = this.provider(query.provider);
-
-			const authorizationCode = this.authorizationCode.get(cookies);
-			if (!authorizationCode) {
-				throw new BadRequestError("Missing code verifier");
-			}
-
-			const tokens = await authorizationCodeGrant(client, url, {
-				pkceCodeVerifier: authorizationCode.codeVerifier,
-			});
-
-			this.authorizationCode.del(cookies);
-
-			this.tokens.set(cookies, {
-				...tokens,
-				issued_at: Date.now(),
-			});
-
-			const user = this.userFromAccessToken(tokens.access_token);
-			if (user) {
-				this.user.set(cookies, user);
-			}
-
-			return Response.redirect(authorizationCode.redirectUri ?? "/");
-		},
-	});
-
-	/**
-	 *
-	 * @param accessToken
-	 * @protected
-	 */
-	protected userFromAccessToken(accessToken: string) {
-		try {
-			const parts = accessToken.split(".");
-			if (parts.length !== 3) {
-				return;
-			}
-
-			const payload = parts[1];
-			const decoded = JSON.parse(atob(payload));
-			if (!decoded.sub) {
-				return;
-			}
-
-			return {
-				id: decoded.sub,
-				name: decoded.name,
-				email: decoded.email,
-				// organization
-				// ...
-			};
-		} catch (e) {
-			this.log.warn(e, "Failed to decode access token");
-		}
-	}
-
-	/**
-	 *
-	 */
-	public readonly logout = $route({
-		security: false,
-		private: true,
-		url: "/_oauth/logout",
-		group: "auth",
-		method: "GET",
-		schema: {
-			query: t.object({
-				redirect: t.optional(t.string()),
-				provider: t.optional(t.string()),
-			}),
-		},
-		handler: async ({ query, cookies }) => {
-			const { client } = this.provider(query.provider);
-			const tokens = this.tokens.get(cookies);
-			const idToken = tokens?.id_token;
-
-			const redirect = query.redirect ?? "/";
-			const params = new URLSearchParams();
-
-			params.set("post_logout_redirect_uri", redirect);
-			if (idToken) {
-				params.set("id_token_hint", idToken);
-			}
-
-			this.tokens.del(cookies);
-			this.user.del(cookies);
-
-			return Response.redirect(buildEndSessionUrl(client, params).toString());
-		},
-	});
-
-	/**
-	 *
-	 * @param name
-	 * @protected
-	 */
-	protected provider(name?: string) {
-		if (!name) {
-			const client = this.authProviders[0];
-			if (!client) {
-				throw new BadRequestError("Client name is required");
-			}
-			return client;
-		}
-
-		const authProvider = this.authProviders.find(
-			(provider) => provider.name === name,
-		);
-		if (!authProvider) {
-			throw new BadRequestError(`Client ${name} not found`);
-		}
-
-		return authProvider;
-	}
-
-	/**
-	 *
-	 * @param file
-	 * @protected
-	 */
-	protected isViteFile(file: string) {
-		const [pathname] = file.split("?");
-
-		// swagger
-		if (pathname.startsWith("/docs")) {
-			return false;
-		}
-
-		// static assets
-		if (pathname.match(/\.\w{2,5}$/)) {
-			return true;
-		}
-
-		// vite internal files
-		if (pathname.startsWith("/@")) {
-			return true;
-		}
-
-		// our backend files
-		return false;
-	}
-}
-
-export interface SessionTokens {
-	access_token?: string;
-	expires_in?: number;
-	refresh_token?: string;
-	id_token?: string;
-	scope?: string;
-	issued_at?: number;
-}
-
-export interface SessionAuthorizationCode {
-	codeVerifier?: string;
-	redirectUri?: string;
-	nonce?: string;
-	max_age?: number;
-	state?: string;
-}
-
-export interface AuthProvider {
-	name: string;
-	redirectUri: string;
-	client: Configuration;
-}
-
-export interface ReactUser {
-	id: string;
-	name?: string;
-	email?: string;
-}
-
-export interface ReactHydrationState {
-	user?: ReactUser;
-	auth?: "server" | "client";
-	layers?: PreviousLayerData[];
-}

package/src/providers/ReactBrowserProvider.ts

@@ -1,250 +0,0 @@
-import { $hook, $inject, $logger } from "@alepha/core";
-import type { UserAccountToken } from "@alepha/security";
-import { HttpClient } from "@alepha/server";
-import type { Root } from "react-dom/client";
-import { createRoot, hydrateRoot } from "react-dom/client";
-import type {
-	PreviousLayerData,
-	RouterMatchOptions,
-	RouterState,
-} from "../services/Router";
-import { Router } from "../services/Router";
-import type { RouterRenderHelmetContext } from "../services/Router";
-import type { ReactHydrationState } from "./ReactAuthProvider";
-
-export class ReactBrowserProvider {
-	protected readonly log = $logger();
-	protected readonly client = $inject(HttpClient);
-	protected readonly router = $inject(Router);
-	protected root!: Root;
-
-	public transitioning?: {
-		to: string;
-	};
-
-	public state: RouterState = {
-		layers: [],
-		pathname: "",
-		search: "",
-		context: {},
-	};
-
-	/**
-	 *
-	 */
-	public get document() {
-		return window.document;
-	}
-
-	/**
-	 *
-	 */
-	public get history() {
-		return window.history;
-	}
-
-	/**
-	 *
-	 */
-	public get url(): string {
-		return window.location.pathname + window.location.search;
-	}
-
-	/**
-	 *
-	 * @param props
-	 */
-	public async invalidate(props?: Record<string, any>) {
-		const previous: PreviousLayerData[] = [];
-
-		if (props) {
-			const [key] = Object.keys(props);
-			const value = props[key];
-
-			for (const layer of this.state.layers) {
-				if (layer.props?.[key]) {
-					previous.push({
-						...layer,
-						props: {
-							...layer.props,
-							[key]: value,
-						},
-					});
-					break;
-				}
-				previous.push(layer);
-			}
-		}
-
-		await this.render({ previous });
-	}
-
-	/**
-	 *
-	 * @param url
-	 * @param options
-	 */
-	public async go(url: string, options: RouterGoOptions = {}): Promise<void> {
-		const result = await this.render({
-			url,
-		});
-
-		if (result.url !== url) {
-			this.history.replaceState({}, "", result.url);
-			return;
-		}
-
-		if (options.replace) {
-			this.history.replaceState({}, "", url);
-			return;
-		}
-
-		this.history.pushState({}, "", url);
-	}
-
-	/**
-	 *
-	 * @param options
-	 * @protected
-	 */
-	protected async render(
-		options: {
-			url?: string;
-			previous?: PreviousLayerData[];
-		} = {},
-	): Promise<{ url: string }> {
-		const previous = options.previous ?? this.state.layers;
-		const url = options.url ?? this.url;
-
-		this.transitioning = { to: url };
-
-		const result = await this.router.render(url, {
-			previous,
-			state: this.state,
-		});
-
-		if (result.redirect) {
-			return await this.render({ url: result.redirect });
-		}
-
-		this.transitioning = undefined;
-
-		return { url };
-	}
-
-	protected renderHelmetContext(ctx: RouterRenderHelmetContext) {
-		if (ctx.title) {
-			this.document.title = ctx.title;
-		}
-	}
-
-	/**
-	 * Get embedded layers from the server.
-	 *
-	 * @protected
-	 */
-	protected getHydrationState(): ReactHydrationState | undefined {
-		try {
-			if ("__ssr" in window && typeof window.__ssr === "object") {
-				return window.__ssr as ReactHydrationState;
-			}
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
-	/**
-	 *
-	 * @protected
-	 */
-	protected getRootElement() {
-		const root = this.document.getElementById("root");
-		if (root) {
-			return root;
-		}
-
-		const div = this.document.createElement("div");
-		div.id = "root";
-
-		this.document.body.appendChild(div);
-
-		return div;
-	}
-
-	protected getUserFromCookies(): UserAccountToken | undefined {
-		const cookies = this.document.cookie.split("; ");
-		const userCookie = cookies.find((cookie) => cookie.startsWith("user="));
-		try {
-			if (userCookie) {
-				return JSON.parse(decodeURIComponent(userCookie.split("=")[1]));
-			}
-		} catch (error) {
-			this.log.warn(error, "Failed to parse user cookie");
-		}
-
-		return undefined;
-	}
-
-	// -------------------------------------------------------------------------------------------------------------------
-
-	/**
-	 *
-	 * @protected
-	 */
-	protected ready = $hook({
-		name: "ready",
-		handler: async () => {
-			const cache = this.getHydrationState();
-			const previous = cache?.layers ?? [];
-
-			await this.render({ previous });
-
-			const element = this.router.root(this.state, {
-				user: cache?.user ?? this.getUserFromCookies(),
-			});
-
-			if (previous.length > 0) {
-				this.root = hydrateRoot(this.getRootElement(), element);
-				this.log.info("Hydrated root element");
-			} else {
-				this.root = createRoot(this.getRootElement());
-				this.root.render(element);
-				this.log.info("Created root element");
-			}
-
-			window.addEventListener("popstate", () => {
-				this.render();
-			});
-
-			this.router.on("end", ({ context }) => {
-				if (context.helmet) {
-					this.renderHelmetContext(context.helmet);
-				}
-			});
-		},
-	});
-
-	/**
-	 *
-	 * @protected
-	 */
-	protected stop = $hook({
-		name: "stop",
-		handler: async () => {
-			if (this.root) {
-				this.root.unmount();
-				this.log.info("Unmounted root element");
-			}
-		},
-	});
-}
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-/**
- *
- */
-export interface RouterGoOptions {
-	replace?: boolean;
-	match?: RouterMatchOptions;
-}