@alepha/react 0.5.1 → 0.6.0

package/src/descriptors/$page.ts

@@ -1,8 +1,11 @@
 import type { Async, Static, TSchema } from "@alepha/core";
 import { KIND, NotImplementedError, __descriptor } from "@alepha/core";
 import type { UserAccountToken } from "@alepha/security";
+import type { CookieManager } from "@alepha/server";
 import type { FC } from "react";
 import type { RouterHookApi } from "../hooks/RouterHookApi";
+import {} from "../services/Router";
+import type { RouterRenderHelmetContext } from "../services/Router";
 
 export const pageDescriptorKey = "PAGE";
 
@@ -18,22 +21,73 @@ export interface PageDescriptorOptions<
 	TProps extends object = TPropsDefault,
 	TPropsParent extends object = TPropsParentDefault,
 > {
-	parent?: { options: PageDescriptorOptions<any, TPropsParent> };
+	/**
+	 *
+	 */
 	name?: string;
+
+	/**
+	 *
+	 */
 	path?: string;
+
+	/**
+	 *
+	 */
 	schema?: TConfig;
-	abstract?: boolean;
+
+	/**
+	 * Function to call when the page is loaded.
+	 */
 	resolve?: (
 		config: PageDescriptorConfigValue<TConfig> &
-			TPropsParent & { user?: UserAccountToken },
+			TPropsParent & { context: PageContext },
+		context: PageContext,
 	) => Async<TProps>;
+
+	/**
+	 * Component to render when the page is loaded.
+	 */
 	component?: FC<TProps & TPropsParent>;
+
+	/**
+	 * Component to render when the page is loaded. (like .component)
+	 */
 	lazy?: () => Promise<{ default: FC<TProps & TPropsParent> }>;
+
+	/**
+	 *
+	 */
 	children?: () => Array<{ options: PageDescriptorOptions }>;
+
+	/**
+	 *
+	 */
+	parent?: { options: PageDescriptorOptions<any, TPropsParent> };
+
+	/**
+	 *
+	 */
+	helmet?:
+		| RouterRenderHelmetContext
+		| ((props: TProps) => RouterRenderHelmetContext);
+
+	/**
+	 *
+	 */
 	notFoundHandler?: FC<{ error: Error }>;
+
+	/**
+	 *
+	 */
 	errorHandler?: FC<{ error: Error; url: string }>;
 }
 
+export interface PageContext {
+	user?: UserAccountToken;
+	cookies?: CookieManager;
+}
+
 export interface PageDescriptorConfigValue<
 	TConfig extends PageDescriptorConfigSchema = PageDescriptorConfigSchema,
 > {

package/src/errors/RedirectionError.ts

@@ -0,0 +1,7 @@
+import type { HrefLike } from "../hooks/RouterHookApi";
+
+export class RedirectionError extends Error {
+	constructor(public readonly page: HrefLike) {
+		super("Redirection");
+	}
+}

package/src/hooks/useAuth.ts

@@ -0,0 +1,29 @@
+import type { UserAccountToken } from "@alepha/security";
+import { useContext } from "react";
+import { RouterContext } from "../contexts/RouterContext";
+import { Auth } from "../services/Auth";
+
+export const useAuth = (): AuthHook => {
+	const ctx = useContext(RouterContext);
+	if (!ctx) {
+		throw new Error("useAuth must be used within a RouterContext");
+	}
+
+	const args = ctx.args ?? {};
+
+	return {
+		user: args.user,
+		logout: () => {
+			ctx.alepha.get(Auth).logout();
+		},
+		login: (provider?: string) => {
+			ctx.alepha.get(Auth).login();
+		},
+	};
+};
+
+export interface AuthHook {
+	user?: UserAccountToken;
+	logout: () => void;
+	login: (provider?: string) => void;
+}

package/src/hooks/useInject.ts

@@ -1,12 +1,12 @@
-import type { ClassEntry } from "@alepha/core";
+import type { Class } from "@alepha/core";
 import { useContext } from "react";
 import { RouterContext } from "../contexts/RouterContext";
 
-export const useInject = <T extends object>(classEntry: ClassEntry<T>): T => {
+export const useInject = <T extends object>(clazz: Class<T>): T => {
 	const ctx = useContext(RouterContext);
 	if (!ctx) {
 		throw new Error("useRouter must be used within a <RouterProvider>");
 	}
 
-	return ctx.alepha.get(classEntry);
+	return ctx.alepha.get(clazz);
 };

package/src/index.browser.ts

@@ -2,6 +2,7 @@ import { $inject, Alepha, autoInject } from "@alepha/core";
 import { $page } from "./descriptors/$page";
 import { PageDescriptorProvider } from "./providers/PageDescriptorProvider";
 import { ReactBrowserProvider } from "./providers/ReactBrowserProvider";
+import { Auth } from "./services/Auth";
 
 export * from "./index.shared";
 export * from "./providers/ReactBrowserProvider";
@@ -12,7 +13,8 @@ export class ReactModule {
 	constructor() {
 		this.alepha //
 			.with(PageDescriptorProvider)
-			.with(ReactBrowserProvider);
+			.with(ReactBrowserProvider)
+			.with(Auth);
 	}
 }
 

package/src/index.shared.ts

@@ -1,17 +1,28 @@
 export { default as NestedView } from "./components/NestedView";
+export { default as Link } from "./components/Link";
 
 export * from "./contexts/RouterContext";
 export * from "./contexts/RouterLayerContext";
 
+export * from "./services/Auth";
+
 export * from "./descriptors/$page";
+export * from "./descriptors/$auth";
 
-export * from "./hooks/useActive";
-export * from "./hooks/useClient";
+export * from "./hooks/RouterHookApi";
+
+// --- Hooks
+// - core
 export * from "./hooks/useInject";
+// - http
+export * from "./hooks/useClient";
+// - router
 export * from "./hooks/useQueryParams";
-export * from "./hooks/RouterHookApi";
 export * from "./hooks/useRouter";
 export * from "./hooks/useRouterEvents";
 export * from "./hooks/useRouterState";
+export * from "./hooks/useActive";
+// - auth
+export * from "./hooks/useAuth";
 
 export * from "./services/Router";

package/src/index.ts

@@ -1,29 +1,46 @@
-import { $inject, Alepha, autoInject } from "@alepha/core";
+import { $inject, Alepha, type Static, autoInject, t } from "@alepha/core";
 import { ServerLinksProvider, ServerModule } from "@alepha/server";
+import { $auth } from "./descriptors/$auth";
 import { $page } from "./descriptors/$page";
 import { PageDescriptorProvider } from "./providers/PageDescriptorProvider";
+import { ReactAuthProvider } from "./providers/ReactAuthProvider";
 import { ReactServerProvider } from "./providers/ReactServerProvider";
-import { ReactSessionProvider } from "./providers/ReactSessionProvider";
+import { Auth } from "./services/Auth";
 export { default as NestedView } from "./components/NestedView";
 
 export * from "./index.shared";
 export * from "./providers/PageDescriptorProvider";
 export * from "./providers/ReactBrowserProvider";
 export * from "./providers/ReactServerProvider";
-export * from "./providers/ReactSessionProvider";
+export * from "./providers/ReactAuthProvider";
 export * from "./services/Router";
+export * from "./errors/RedirectionError";
+
+const envSchema = t.object({
+	REACT_AUTH_ENABLED: t.boolean({ default: false }),
+});
+
+declare module "@alepha/core" {
+	interface Env extends Partial<Static<typeof envSchema>> {}
+}
 
 export class ReactModule {
+	protected readonly env = $inject(envSchema);
 	protected readonly alepha = $inject(Alepha);
 
 	constructor() {
 		this.alepha //
 			.with(ServerModule)
 			.with(ServerLinksProvider)
-			.with(ReactServerProvider)
-			.with(ReactSessionProvider)
-			.with(PageDescriptorProvider);
+			.with(PageDescriptorProvider)
+			.with(ReactServerProvider);
+
+		if (this.env.REACT_AUTH_ENABLED) {
+			this.alepha.with(ReactAuthProvider);
+			this.alepha.with(Auth);
+		}
 	}
 }
 
 autoInject($page, ReactModule);
+autoInject($auth, ReactAuthProvider, Auth);

package/src/providers/ReactAuthProvider.ts

@@ -0,0 +1,410 @@
+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[];
+}