@alepha/react 0.5.1 → 0.6.0

package/src/providers/ReactBrowserProvider.ts

@@ -1,4 +1,5 @@
 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";
@@ -8,7 +9,8 @@ import type {
 	RouterState,
 } from "../services/Router";
 import { Router } from "../services/Router";
-import type { ReactSessionProvider, Session } from "./ReactSessionProvider";
+import type { RouterRenderHelmetContext } from "../services/Router";
+import type { ReactHydrationState } from "./ReactAuthProvider";
 
 export class ReactBrowserProvider {
 	protected readonly log = $logger();
@@ -20,7 +22,12 @@ export class ReactBrowserProvider {
 		to: string;
 	};
 
-	public state: RouterState = { layers: [], pathname: "", search: "" };
+	public state: RouterState = {
+		layers: [],
+		pathname: "",
+		search: "",
+		context: {},
+	};
 
 	/**
 	 *
@@ -125,23 +132,21 @@ export class ReactBrowserProvider {
 		return { url };
 	}
 
+	protected renderHelmetContext(ctx: RouterRenderHelmetContext) {
+		if (ctx.title) {
+			this.document.title = ctx.title;
+		}
+	}
+
 	/**
 	 * Get embedded layers from the server.
 	 *
 	 * @protected
 	 */
-	protected getEmbeddedCache():
-		| {
-				session?: Session;
-				layers?: PreviousLayerData[];
-		  }
-		| undefined {
+	protected getHydrationState(): ReactHydrationState | undefined {
 		try {
 			if ("__ssr" in window && typeof window.__ssr === "object") {
-				return window.__ssr as {
-					session?: Session;
-					layers?: PreviousLayerData[];
-				};
+				return window.__ssr as ReactHydrationState;
 			}
 		} catch (error) {
 			console.error(error);
@@ -166,6 +171,20 @@ export class ReactBrowserProvider {
 		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;
+	}
+
 	// -------------------------------------------------------------------------------------------------------------------
 
 	/**
@@ -175,17 +194,14 @@ export class ReactBrowserProvider {
 	protected ready = $hook({
 		name: "ready",
 		handler: async () => {
-			const cache = this.getEmbeddedCache();
+			const cache = this.getHydrationState();
 			const previous = cache?.layers ?? [];
 
-			// if session
-			const session =
-				cache?.session ??
-				(await this.client.of<ReactSessionProvider>().session());
-
 			await this.render({ previous });
 
-			const element = this.router.root(this.state, session);
+			const element = this.router.root(this.state, {
+				user: cache?.user ?? this.getUserFromCookies(),
+			});
 
 			if (previous.length > 0) {
 				this.root = hydrateRoot(this.getRootElement(), element);
@@ -199,6 +215,12 @@ export class ReactBrowserProvider {
 			window.addEventListener("popstate", () => {
 				this.render();
 			});
+
+			this.router.on("end", ({ context }) => {
+				if (context.helmet) {
+					this.renderHelmetContext(context.helmet);
+				}
+			});
 		},
 	});
 

package/src/providers/ReactServerProvider.ts

@@ -3,15 +3,14 @@ import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { $logger, Alepha, type Static } from "@alepha/core";
 import { $hook, $inject, t } from "@alepha/core";
-import type { UserAccountInfo } from "@alepha/security";
 import {
-	type RouteObject,
+	type CreateRoute,
 	type ServeDescriptorOptions,
 	ServerProvider,
 } from "@alepha/server";
 import { renderToString } from "react-dom/server";
-import { $page } from "../descriptors/$page";
-import { Router } from "../services/Router";
+import { $page, type PageContext } from "../descriptors/$page";
+import { Router, type RouterRenderHelmetContext } from "../services/Router";
 
 export const envSchema = t.object({
 	REACT_SERVER_DIST: t.string({ default: "client" }),
@@ -22,6 +21,9 @@ export const envSchema = t.object({
 
 declare module "@alepha/core" {
 	interface Env extends Partial<Static<typeof envSchema>> {}
+	interface State {
+		"ReactServerProvider.template"?: string;
+	}
 }
 
 export class ReactServerProvider {
@@ -48,49 +50,55 @@ export class ReactServerProvider {
 		}
 
 		if (process.env.VITE_ALEPHA_DEV === "true") {
-			this.log.info("SSR starting in development mode");
-			const templateUrl = `${this.server.hostname}/index.html`;
+			this.log.info("SSR (vite) OK");
+			const templateUrl = "http://127.0.0.1:5173/index.html"; // TODO: use env variable from vite
 			this.log.debug(`Fetch template from ${templateUrl}`);
 
 			const route = this.createHandler(() =>
 				fetch(templateUrl)
 					.then((it) => it.text())
-					.catch(() => undefined),
+					.catch(() => undefined)
+					.then((it) => (it ? this.checkTemplate(it) : undefined)),
 			);
 
 			await this.server.route(route);
 
 			// fallback for static files
 			await this.server.route({
-				url: "/*", // alias for "not found handler"
-				handler: route.handler,
+				...route,
+				url: "*",
 			});
 
 			return;
 		}
 
-		const maybe = [
-			join(process.cwd(), this.env.REACT_SERVER_DIST),
-			join(process.cwd(), "..", this.env.REACT_SERVER_DIST),
-			join(process.cwd(), "dist", this.env.REACT_SERVER_DIST),
-		];
-
 		let root = "";
-		for (const it of maybe) {
-			if (existsSync(it)) {
-				root = it;
-				break;
+
+		if (!this.alepha.isServerless()) {
+			const maybe = [
+				join(process.cwd(), this.env.REACT_SERVER_DIST),
+				join(process.cwd(), "..", this.env.REACT_SERVER_DIST),
+			];
+
+			for (const it of maybe) {
+				if (existsSync(it)) {
+					root = it;
+					break;
+				}
 			}
-		}
 
-		if (!root) {
-			this.log.warn("Missing static files, SSR will be disabled");
-			return;
-		}
+			if (!root) {
+				this.log.warn("Missing static files, SSR will be disabled");
+				return;
+			}
 
-		await this.server.serve(this.createStaticHandler(root));
+			await this.server.serve(this.createStaticHandler(root));
+		}
 
-		const template = await readFile(join(root, "index.html"), "utf-8");
+		const template = this.checkTemplate(
+			this.alepha.state("ReactServerProvider.template") ??
+				(await readFile(join(root, "index.html"), "utf-8")),
+		);
 
 		const route = this.createHandler(async () => template);
 
@@ -98,11 +106,34 @@ export class ReactServerProvider {
 
 		// fallback for static files
 		await this.server.route({
-			url: "/*", // alias for "not found handler"
-			handler: route.handler,
+			...route,
+			url: "*",
 		});
 	}
 
+	/**
+	 * Check if the template contains the outlet.
+	 *
+	 * @param template
+	 * @protected
+	 */
+	protected checkTemplate(template: string) {
+		if (!template.includes(this.env.REACT_SSR_OUTLET)) {
+			if (!template.includes('<div id="root"></div>')) {
+				throw new Error(
+					`Missing React SSR outlet in index.html, please add ${this.env.REACT_SSR_OUTLET} to the index.html file`,
+				);
+			}
+
+			return template.replace(
+				`<div id="root"></div>`,
+				`<div id="root">${this.env.REACT_SSR_OUTLET}</div>`,
+			);
+		}
+
+		return template;
+	}
+
 	/**
 	 *
 	 * @param root
@@ -128,22 +159,26 @@ export class ReactServerProvider {
 	 */
 	protected createHandler(
 		templateLoader: () => Promise<string | undefined>,
-	): RouteObject {
+	): CreateRoute {
 		return {
+			method: "GET",
 			url: "/",
-			handler: async ({ url, user }) => {
+			handler: async (ctx) => {
 				const template = await templateLoader();
 				if (!template) {
 					return new Response("Not found", { status: 404 });
 				}
 
-				const response = this.notFoundHandler(url);
+				const response = this.notFoundHandler(ctx.url);
 				if (response) {
 					// not found handler for static files (favicon, css, js, etc)
 					return response;
 				}
 
-				return await this.ssr(url, template, user);
+				return await this.ssr(ctx.url, template, {
+					user: ctx.user,
+					cookies: ctx.cookies,
+				});
 			},
 		};
 	}
@@ -172,6 +207,7 @@ export class ReactServerProvider {
 						layers,
 						pathname: "",
 						search: "",
+						context: {},
 					}),
 				);
 			};
@@ -183,8 +219,8 @@ export class ReactServerProvider {
 	 * @param url
 	 * @protected
 	 */
-	protected notFoundHandler(url: string) {
-		if (url.match(/\.\w+$/)) {
+	protected notFoundHandler(url: URL) {
+		if (url.pathname.match(/\.\w+$/)) {
 			return new Response("Not found", { status: 404 });
 		}
 	}
@@ -193,16 +229,19 @@ export class ReactServerProvider {
 	 *
 	 * @param url
 	 * @param template
-	 * @param user
+	 * @param page
 	 */
 	public async ssr(
-		url: string,
+		url: URL,
 		template: string = this.env.REACT_SSR_OUTLET,
-		user?: UserAccountInfo,
+		page: PageContext = {},
 	): Promise<Response> {
-		const { element, layers, redirect } = await this.router.render(url, {
-			user,
-		});
+		const { element, layers, redirect, context } = await this.router.render(
+			url.pathname + url.search,
+			{
+				args: page,
+			},
+		);
 
 		if (redirect) {
 			return new Response("", {
@@ -222,14 +261,6 @@ export class ReactServerProvider {
 				path: undefined,
 				element: undefined,
 			})),
-			session: {
-				user: user
-					? {
-							id: user.id,
-							name: user.name,
-						}
-					: undefined,
-			},
 		})}</script>`;
 
 		const index = template.indexOf("</body>");
@@ -237,8 +268,34 @@ export class ReactServerProvider {
 			template = template.slice(0, index) + script + template.slice(index);
 		}
 
-		return new Response(template.replace(this.env.REACT_SSR_OUTLET, appHtml), {
+		if (context.helmet) {
+			template = this.renderHelmetContext(template, context.helmet);
+		}
+
+		template = template.replace(this.env.REACT_SSR_OUTLET, appHtml);
+
+		return new Response(template, {
 			headers: { "Content-Type": "text/html" },
 		});
 	}
+
+	protected renderHelmetContext(
+		template: string,
+		helmetContext: RouterRenderHelmetContext,
+	) {
+		if (helmetContext.title) {
+			if (template.includes("<title>")) {
+				template = template.replace(
+					/<title>.*<\/title>/,
+					`<title>${helmetContext.title}</title>`,
+				);
+			} else {
+				template = template.replace(
+					"</head>",
+					`<title>${helmetContext.title}</title></head>`,
+				);
+			}
+		}
+		return template;
+	}
 }

package/src/services/Auth.ts

@@ -0,0 +1,45 @@
+import { $hook, $inject, $logger, Alepha } from "@alepha/core";
+import { HttpClient } from "@alepha/server";
+import { RedirectionError } from "../errors/RedirectionError";
+import { ReactBrowserProvider } from "../providers/ReactBrowserProvider";
+
+export class Auth {
+	alepha = $inject(Alepha);
+	log = $logger();
+	client = $inject(HttpClient);
+	api = "/api/_oauth/login";
+
+	start = $hook({
+		name: "start",
+		handler: async () => {
+			this.client.on("onError", (err) => {
+				if (err.statusCode === 401) {
+					this.login();
+				}
+			});
+		},
+	});
+
+	login = (provider?: string) => {
+		if (this.alepha.isBrowser()) {
+			const browser = this.alepha.get(ReactBrowserProvider);
+			const redirect = browser.transitioning
+				? window.location.origin + browser.transitioning.to
+				: window.location.href;
+
+			window.location.href = `${this.api}?redirect=${redirect}`;
+
+			if (browser.transitioning) {
+				throw new RedirectionError(browser.state.pathname);
+			}
+
+			return;
+		}
+
+		throw new RedirectionError(this.api);
+	};
+
+	logout = () => {
+		window.location.href = `/api/_oauth/logout?redirect=${encodeURIComponent(window.location.origin)}`;
+	};
+}