@alepha/react 0.5.1 → 0.6.0

package/dist/index.js

@@ -0,0 +1,554 @@
+import { $logger, $inject, Alepha, t, $hook, autoInject } from '@alepha/core';
+import { FastifyCookieProvider, $cookie, $route, BadRequestError, ServerProvider, ServerModule, ServerLinksProvider } from '@alepha/server';
+import { $ as $auth, R as Router, a as $page, A as Auth, P as PageDescriptorProvider } from './useAuth-i7wbKVrt.js';
+export { L as Link, N as NestedView, l as ReactBrowserProvider, m as RedirectionError, b as RouterContext, d as RouterHookApi, c as RouterLayerContext, p as pageDescriptorKey, j as useActive, k as useAuth, e as useClient, u as useInject, f as useQueryParams, g as useRouter, h as useRouterEvents, i as useRouterState } from './useAuth-i7wbKVrt.js';
+import { discovery, allowInsecureRequests, refreshTokenGrant, randomPKCECodeVerifier, calculatePKCECodeChallenge, buildAuthorizationUrl, authorizationCodeGrant, buildEndSessionUrl } from 'openid-client';
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { renderToString } from 'react-dom/server';
+import 'react/jsx-runtime';
+import 'react';
+import 'react-dom/client';
+import 'path-to-regexp';
+
+class ReactAuthProvider {
+  log = $logger();
+  alepha = $inject(Alepha);
+  fastifyCookieProvider = $inject(FastifyCookieProvider);
+  authProviders = [];
+  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" }))
+    })
+  });
+  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())
+    })
+  });
+  user = $cookie({
+    name: "user",
+    ttl: { days: 1 },
+    schema: t.object({
+      id: t.string(),
+      name: t.optional(t.string()),
+      email: t.optional(t.string())
+    })
+  });
+  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
+              },
+              void 0,
+              {
+                execute: [allowInsecureRequests]
+              }
+            )
+          });
+        }
+      }
+    }
+  });
+  /**
+   * Configure Fastify to forward Session Access Token to Header Authorization.
+   */
+  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
+   */
+  async refresh(cookies) {
+    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) * 1e3;
+      if (expiresAt < now) {
+        if (tokens.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 -");
+          }
+        }
+        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;
+  }
+  /**
+   *
+   */
+  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 = {
+        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()
+        }
+      });
+    }
+  });
+  /**
+   *
+   */
+  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
+   */
+  userFromAccessToken(accessToken) {
+    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");
+    }
+  }
+  /**
+   *
+   */
+  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
+   */
+  provider(name) {
+    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
+   */
+  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;
+  }
+}
+
+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 (vite) OK");
+      const templateUrl = "http://127.0.0.1:5173/index.html";
+      this.log.debug(`Fetch template from ${templateUrl}`);
+      const route2 = this.createHandler(
+        () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0).then((it) => it ? this.checkTemplate(it) : void 0)
+      );
+      await this.server.route(route2);
+      await this.server.route({
+        ...route2,
+        url: "*"
+      });
+      return;
+    }
+    let root = "";
+    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;
+      }
+      await this.server.serve(this.createStaticHandler(root));
+    }
+    const template = this.checkTemplate(
+      this.alepha.state("ReactServerProvider.template") ?? await readFile(join(root, "index.html"), "utf-8")
+    );
+    const route = this.createHandler(async () => template);
+    await this.server.route(route);
+    await this.server.route({
+      ...route,
+      url: "*"
+    });
+  }
+  /**
+   * Check if the template contains the outlet.
+   *
+   * @param template
+   * @protected
+   */
+  checkTemplate(template) {
+    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
+   * @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 {
+      method: "GET",
+      url: "/",
+      handler: async (ctx) => {
+        const template = await templateLoader();
+        if (!template) {
+          return new Response("Not found", { status: 404 });
+        }
+        const response = this.notFoundHandler(ctx.url);
+        if (response) {
+          return response;
+        }
+        return await this.ssr(ctx.url, template, {
+          user: ctx.user,
+          cookies: ctx.cookies
+        });
+      }
+    };
+  }
+  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: "",
+            context: {}
+          })
+        );
+      };
+    }
+  }
+  /**
+   *
+   * @param url
+   * @protected
+   */
+  notFoundHandler(url) {
+    if (url.pathname.match(/\.\w+$/)) {
+      return new Response("Not found", { status: 404 });
+    }
+  }
+  /**
+   *
+   * @param url
+   * @param template
+   * @param page
+   */
+  async ssr(url, template = this.env.REACT_SSR_OUTLET, page = {}) {
+    const { element, layers, redirect, context } = await this.router.render(
+      url.pathname + url.search,
+      {
+        args: page
+      }
+    );
+    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
+      }))
+    })}<\/script>`;
+    const index = template.indexOf("</body>");
+    if (index !== -1) {
+      template = template.slice(0, index) + script + template.slice(index);
+    }
+    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" }
+    });
+  }
+  renderHelmetContext(template, helmetContext) {
+    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;
+  }
+}
+
+const envSchema = t.object({
+  REACT_AUTH_ENABLED: t.boolean({ default: false })
+});
+class ReactModule {
+  env = $inject(envSchema);
+  alepha = $inject(Alepha);
+  constructor() {
+    this.alepha.with(ServerModule).with(ServerLinksProvider).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);
+
+export { $auth, $page, Auth, PageDescriptorProvider, ReactAuthProvider, ReactModule, ReactServerProvider, Router, envSchema$1 as envSchema };