@alepha/react 0.5.0 → 0.5.1

package/dist/index.mjs

@@ -0,0 +1,477 @@
+import { t, $logger, $inject, Alepha, $hook, autoInject } from '@alepha/core';
+import { ServerProvider, $route, BadRequestError, ServerModule, ServerLinksProvider } from '@alepha/server';
+import { R as Router, $ as $page, P as PageDescriptorProvider } from './useRouterState-CvFCmaq7.mjs';
+export { N as NestedView, k as ReactBrowserProvider, j as RedirectException, a as RouterContext, f as RouterHookApi, b as RouterLayerContext, p as pageDescriptorKey, u as useActive, c as useClient, d as useInject, e as useQueryParams, g as useRouter, h as useRouterEvents, i as useRouterState } from './useRouterState-CvFCmaq7.mjs';
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { renderToString } from 'react-dom/server';
+import crypto from 'node:crypto';
+import { $cache } from '@alepha/cache';
+import { SecurityProvider } from '@alepha/security';
+import { discovery, allowInsecureRequests, refreshTokenGrant, randomPKCECodeVerifier, calculatePKCECodeChallenge, buildAuthorizationUrl, authorizationCodeGrant, buildEndSessionUrl } from 'openid-client';
+import 'react';
+import 'react-dom/client';
+import 'path-to-regexp';
+
+const envSchema$1 = t.object({
+  REACT_SERVER_DIST: t.string({ default: "client" }),
+  REACT_SERVER_PREFIX: t.string({ default: "" }),
+  REACT_SSR_ENABLED: t.boolean({ default: false }),
+  REACT_SSR_OUTLET: t.string({ default: "<!--ssr-outlet-->" })
+});
+class ReactServerProvider {
+  log = $logger();
+  alepha = $inject(Alepha);
+  router = $inject(Router);
+  server = $inject(ServerProvider);
+  env = $inject(envSchema$1);
+  configure = $hook({
+    name: "configure",
+    handler: async () => {
+      await this.configureRoutes();
+    }
+  });
+  async configureRoutes() {
+    if (this.alepha.isTest()) {
+      this.processDescriptors();
+    }
+    if (this.router.empty()) {
+      return;
+    }
+    if (process.env.VITE_ALEPHA_DEV === "true") {
+      this.log.info("SSR starting in development mode");
+      const templateUrl = `${this.server.hostname}/index.html`;
+      this.log.debug(`Fetch template from ${templateUrl}`);
+      const route2 = this.createHandler(
+        () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0)
+      );
+      await this.server.route(route2);
+      await this.server.route({
+        url: "/*",
+        // alias for "not found handler"
+        handler: route2.handler
+      });
+      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 (!root) {
+      this.log.warn("Missing static files, SSR will be disabled");
+      return;
+    }
+    await this.server.serve(this.createStaticHandler(root));
+    const template = await readFile(join(root, "index.html"), "utf-8");
+    const route = this.createHandler(async () => template);
+    await this.server.route(route);
+    await this.server.route({
+      url: "/*",
+      // alias for "not found handler"
+      handler: route.handler
+    });
+  }
+  /**
+   *
+   * @param root
+   * @protected
+   */
+  createStaticHandler(root) {
+    return {
+      root,
+      prefix: this.env.REACT_SERVER_PREFIX,
+      logLevel: "warn",
+      cacheControl: true,
+      immutable: true,
+      preCompressed: true,
+      maxAge: "30d",
+      index: false
+    };
+  }
+  /**
+   *
+   * @param templateLoader
+   * @protected
+   */
+  createHandler(templateLoader) {
+    return {
+      url: "/",
+      handler: async ({ url, user }) => {
+        const template = await templateLoader();
+        if (!template) {
+          return new Response("Not found", { status: 404 });
+        }
+        const response = this.notFoundHandler(url);
+        if (response) {
+          return response;
+        }
+        return await this.ssr(url, template, user);
+      }
+    };
+  }
+  processDescriptors() {
+    const pages = this.alepha.getDescriptorValues($page);
+    for (const { key, instance, value } of pages) {
+      instance[key].render = async (options = {}) => {
+        const name = value.options.name ?? key;
+        const page = this.router.page(name);
+        const layers = await this.router.createLayers(
+          "",
+          page,
+          options.params ?? {},
+          options.query ?? {},
+          []
+        );
+        return renderToString(
+          this.router.root({
+            layers,
+            pathname: "",
+            search: ""
+          })
+        );
+      };
+    }
+  }
+  /**
+   *
+   * @param url
+   * @protected
+   */
+  notFoundHandler(url) {
+    if (url.match(/\.\w+$/)) {
+      return new Response("Not found", { status: 404 });
+    }
+  }
+  /**
+   *
+   * @param url
+   * @param template
+   * @param user
+   */
+  async ssr(url, template = this.env.REACT_SSR_OUTLET, user) {
+    const { element, layers, redirect } = await this.router.render(url, {
+      user
+    });
+    if (redirect) {
+      return new Response("", {
+        status: 302,
+        headers: {
+          Location: redirect
+        }
+      });
+    }
+    const appHtml = renderToString(element);
+    const script = `<script>window.__ssr=${JSON.stringify({
+      layers: layers.map((it) => ({
+        ...it,
+        index: void 0,
+        path: void 0,
+        element: void 0
+      })),
+      session: {
+        user: user ? {
+          id: user.id,
+          name: user.name
+        } : void 0
+      }
+    })}<\/script>`;
+    const index = template.indexOf("</body>");
+    if (index !== -1) {
+      template = template.slice(0, index) + script + template.slice(index);
+    }
+    return new Response(template.replace(this.env.REACT_SSR_OUTLET, appHtml), {
+      headers: { "Content-Type": "text/html" }
+    });
+  }
+}
+
+const sessionUserSchema = t.object({
+  id: t.string(),
+  name: t.optional(t.string())
+});
+const sessionSchema = t.object({
+  user: t.optional(sessionUserSchema)
+});
+const envSchema = t.object({
+  REACT_OIDC_ISSUER: t.optional(t.string()),
+  REACT_OIDC_CLIENT_ID: t.optional(t.string()),
+  REACT_OIDC_CLIENT_SECRET: t.optional(t.string()),
+  REACT_OIDC_REDIRECT_URI: t.optional(t.string())
+});
+class ReactSessionProvider {
+  SSID = "ssid";
+  log = $logger();
+  env = $inject(envSchema);
+  serverProvider = $inject(ServerProvider);
+  securityProvider = $inject(SecurityProvider);
+  sessions = $cache();
+  clients = [];
+  get redirectUri() {
+    return this.env.REACT_OIDC_REDIRECT_URI ?? `${this.serverProvider.hostname}/api/callback`;
+  }
+  configure = $hook({
+    name: "configure",
+    priority: 100,
+    handler: async () => {
+      const issuer = this.env.REACT_OIDC_ISSUER;
+      const clientId = this.env.REACT_OIDC_CLIENT_ID;
+      if (!issuer || !clientId) {
+        return;
+      }
+      const client = await discovery(
+        new URL(issuer),
+        clientId,
+        {
+          client_secret: this.env.REACT_OIDC_CLIENT_SECRET
+        },
+        void 0,
+        {
+          execute: [allowInsecureRequests]
+        }
+      );
+      this.clients = [client];
+    }
+  });
+  /**
+   *
+   * @param sessionId
+   * @param session
+   * @protected
+   */
+  async setSession(sessionId, session) {
+    await this.sessions.set(sessionId, session, {
+      days: 1
+    });
+  }
+  /**
+   *
+   * @param sessionId
+   * @protected
+   */
+  async getSession(sessionId) {
+    const session = await this.sessions.get(sessionId);
+    if (!session) {
+      return;
+    }
+    const now = Date.now();
+    if (session.expires_in && session.issued_at) {
+      const expiresAt = session.issued_at + (session.expires_in - 10) * 1e3;
+      if (expiresAt < now) {
+        if (session.refresh_token) {
+          try {
+            const newTokens = await refreshTokenGrant(
+              this.clients[0],
+              session.refresh_token
+            );
+            await this.setSession(sessionId, {
+              ...newTokens,
+              issued_at: Date.now()
+            });
+            return newTokens;
+          } catch (e) {
+            this.log.error(e, "Failed to refresh token");
+          }
+        }
+        await this.sessions.invalidate(sessionId);
+        return;
+      }
+    }
+    if (!session.issued_at && session.access_token) {
+      await this.sessions.invalidate(sessionId);
+      return;
+    }
+    return session;
+  }
+  /**
+   *
+   * @protected
+   */
+  beforeRequest = $hook({
+    name: "configure:fastify",
+    priority: 100,
+    handler: async (app) => {
+      app.decorateRequest("session");
+      app.addHook("onRequest", async (req) => {
+        const sessionId = req.cookies[this.SSID];
+        if (sessionId && !isViteFile(req.url)) {
+          const session = await this.getSession(sessionId);
+          if (session) {
+            req.session = session;
+            if (session.access_token) {
+              req.headers.authorization = `Bearer ${session.access_token}`;
+            }
+          }
+        }
+      });
+    }
+  });
+  /**
+   *
+   */
+  login = $route({
+    security: false,
+    url: "/login",
+    method: "GET",
+    schema: {
+      query: t.object({
+        redirect: t.optional(t.string())
+      })
+    },
+    handler: async ({ query }) => {
+      const client = this.clients[0];
+      const codeVerifier = randomPKCECodeVerifier();
+      const codeChallenge = await calculatePKCECodeChallenge(codeVerifier);
+      const scope = "openid profile email";
+      const parameters = {
+        redirect_uri: this.redirectUri,
+        scope,
+        code_challenge: codeChallenge,
+        code_challenge_method: "S256"
+      };
+      const sessionId = crypto.randomUUID();
+      await this.setSession(sessionId, {
+        authorizationCodeGrant: {
+          codeVerifier,
+          redirectUri: query.redirect ?? "/"
+          // TODO: add nonce, max_age, state
+        }
+      });
+      return new Response("", {
+        status: 302,
+        headers: {
+          "Set-Cookie": `${this.SSID}=${sessionId}; HttpOnly; Path=/; SameSite=Lax;`,
+          Location: buildAuthorizationUrl(client, parameters).toString()
+        }
+      });
+    }
+  });
+  /**
+   *
+   */
+  callback = $route({
+    security: false,
+    url: "/callback",
+    method: "GET",
+    schema: {
+      headers: t.record(t.string(), t.string()),
+      cookies: t.object({
+        ssid: t.string()
+      })
+    },
+    handler: async ({ cookies, url }) => {
+      const sessionId = cookies.ssid;
+      const session = await this.getSession(sessionId);
+      if (!session) {
+        throw new BadRequestError("Missing session");
+      }
+      if (!session.authorizationCodeGrant) {
+        throw new BadRequestError("Invalid session - missing code verifier");
+      }
+      const [, search] = url.split("?");
+      const tokens = await authorizationCodeGrant(
+        this.clients[0],
+        new URL(`${this.redirectUri}?${search}`),
+        {
+          pkceCodeVerifier: session.authorizationCodeGrant.codeVerifier,
+          expectedNonce: session.authorizationCodeGrant.nonce,
+          expectedState: session.authorizationCodeGrant.state,
+          maxAge: session.authorizationCodeGrant.max_age
+        }
+      );
+      await this.setSession(sessionId, {
+        ...tokens,
+        issued_at: Date.now()
+      });
+      return new Response("", {
+        status: 302,
+        headers: {
+          Location: session.authorizationCodeGrant.redirectUri ?? "/"
+        }
+      });
+    }
+  });
+  logout = $route({
+    security: false,
+    url: "/logout",
+    method: "GET",
+    schema: {
+      query: t.object({
+        redirect: t.optional(t.string())
+      }),
+      cookies: t.object({
+        ssid: t.string()
+      })
+    },
+    handler: async ({ query, cookies }, { fastify }) => {
+      const session = fastify?.req.session;
+      await this.sessions.invalidate(cookies.ssid);
+      const redirect = query.redirect ?? "/";
+      const params = new URLSearchParams();
+      params.set("post_logout_redirect_uri", redirect);
+      if (session?.id_token) {
+        params.set("id_token_hint", session.id_token);
+      }
+      return new Response("", {
+        status: 302,
+        headers: {
+          "Set-Cookie": `${this.SSID}=; HttpOnly; Path=/; SameSite=Lax;`,
+          Location: buildEndSessionUrl(this.clients[0], params).toString()
+        }
+      });
+    }
+  });
+  session = $route({
+    security: false,
+    url: "/_session",
+    method: "GET",
+    schema: {
+      headers: t.object({
+        authorization: t.string()
+      }),
+      response: sessionSchema
+    },
+    handler: async ({ headers }) => {
+      try {
+        return {
+          user: await this.securityProvider.createUserFromToken(
+            headers.authorization
+          )
+        };
+      } catch (e) {
+        return {};
+      }
+    }
+  });
+}
+const isViteFile = (file) => {
+  const [pathname] = file.split("?");
+  if (pathname.startsWith("/docs")) {
+    return false;
+  }
+  if (pathname.match(/\.\w{2,5}$/)) {
+    return true;
+  }
+  if (pathname.startsWith("/@")) {
+    return true;
+  }
+  return false;
+};
+
+class ReactModule {
+  alepha = $inject(Alepha);
+  constructor() {
+    this.alepha.with(ServerModule).with(ServerLinksProvider).with(ReactServerProvider).with(ReactSessionProvider).with(PageDescriptorProvider);
+  }
+}
+autoInject($page, ReactModule);
+
+export { $page, PageDescriptorProvider, ReactModule, ReactServerProvider, ReactSessionProvider, Router, envSchema$1 as envSchema, sessionSchema, sessionUserSchema };