@alepha/react 0.6.0 → 0.6.2

package/dist/index.browser.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var core = require('@alepha/core');
-var useAuth = require('./useAuth-DOVx2kqa.cjs');
+var useAuth = require('./useAuth-B9ypF48n.cjs');
 require('react/jsx-runtime');
 require('react');
 require('@alepha/server');

package/dist/index.browser.js

@@ -1,6 +1,6 @@
 import { autoInject, $inject, Alepha } from '@alepha/core';
-import { a as $page, P as PageDescriptorProvider, l as ReactBrowserProvider, A as Auth } from './useAuth-i7wbKVrt.js';
-export { $ as $auth, L as Link, N as NestedView, R as Router, 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 { a as $page, P as PageDescriptorProvider, l as ReactBrowserProvider, A as Auth } from './useAuth-Ps01oe8e.js';
+export { $ as $auth, L as Link, N as NestedView, R as Router, 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-Ps01oe8e.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@alepha/server';

package/dist/index.cjs

@@ -2,11 +2,12 @@
 
 var core = require('@alepha/core');
 var server = require('@alepha/server');
-var useAuth = require('./useAuth-DOVx2kqa.cjs');
+var useAuth = require('./useAuth-B9ypF48n.cjs');
 var openidClient = require('openid-client');
 var node_fs = require('node:fs');
 var promises = require('node:fs/promises');
 var node_path = require('node:path');
+var cheerio = require('cheerio');
 var server$1 = require('react-dom/server');
 require('react/jsx-runtime');
 require('react');
@@ -16,7 +17,7 @@ require('path-to-regexp');
 class ReactAuthProvider {
   log = core.$logger();
   alepha = core.$inject(core.Alepha);
-  fastifyCookieProvider = core.$inject(server.FastifyCookieProvider);
+  serverCookieProvider = core.$inject(server.ServerCookieProvider);
   authProviders = [];
   authorizationCode = server.$cookie({
     name: "authorizationCode",
@@ -54,23 +55,30 @@ class ReactAuthProvider {
     name: "configure",
     handler: async () => {
       const auths = this.alepha.getDescriptorValues(useAuth.$auth);
-      for (const auth of auths) {
-        const options = auth.value.options;
+      for (const { value, key, instance } of auths) {
+        const options = value.options;
         if (options.oidc) {
+          this.log.debug(
+            `Discover OIDC auth provider -> ${options.oidc.issuer}`
+          );
+          const client = await openidClient.discovery(
+            new URL(options.oidc.issuer),
+            options.oidc.clientId,
+            {
+              client_secret: options.oidc.clientSecret
+            },
+            void 0,
+            {
+              execute: [openidClient.allowInsecureRequests]
+            }
+          );
+          instance[key].jwks = () => {
+            return client.serverMetadata().jwks_uri;
+          };
           this.authProviders.push({
-            name: options.name ?? auth.key,
+            name: options.name ?? key,
             redirectUri: options.oidc.redirectUri ?? "/api/_oauth/callback",
-            client: await openidClient.discovery(
-              new URL(options.oidc.issuer),
-              options.oidc.clientId,
-              {
-                client_secret: options.oidc.clientSecret
-              },
-              void 0,
-              {
-                execute: [openidClient.allowInsecureRequests]
-              }
-            )
+            client
           });
         }
       }
@@ -79,21 +87,19 @@ class ReactAuthProvider {
   /**
    * Configure Fastify to forward Session Access Token to Header Authorization.
    */
-  configureFastify = core.$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);
-          }
+  onRequest = core.$hook({
+    name: "server:onRequest",
+    after: this.serverCookieProvider,
+    handler: async ({ request }) => {
+      if (request.cookies && !this.isViteFile(request.url.pathname) && !!this.authProviders.length) {
+        const tokens = await this.refresh(request.cookies);
+        if (tokens) {
+          request.headers.rep("authorization", `Bearer ${tokens.access_token}`);
         }
-      });
+        if (this.user.get(request.cookies) && !this.tokens.get(request.cookies)) {
+          this.user.del(request.cookies);
+        }
+      }
     }
   });
   /**
@@ -122,7 +128,9 @@ class ReactAuthProvider {
             });
             return newTokens;
           } catch (e) {
-            this.log.warn(e, "Failed to refresh token -");
+            if (e instanceof Error) {
+              this.log.warn("Failed to refresh token", e.message);
+            }
           }
         }
         this.tokens.del(cookies);
@@ -142,7 +150,7 @@ class ReactAuthProvider {
    */
   login = server.$route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/login",
     group: "auth",
     method: "GET",
@@ -153,13 +161,13 @@ class ReactAuthProvider {
       })
     },
     handler: async ({ query, cookies, url }) => {
-      const { client } = this.provider(query.provider);
+      const { client, redirectUri } = this.provider(query.provider);
       const codeVerifier = openidClient.randomPKCECodeVerifier();
       const codeChallenge = await openidClient.calculatePKCECodeChallenge(codeVerifier);
       const scope = "openid profile email";
-      let redirect_uri = this.authProviders[0].redirectUri;
+      let redirect_uri = redirectUri;
       if (redirect_uri.startsWith("/")) {
-        redirect_uri = `${url.protocol}://${url.host}${redirect_uri}`;
+        redirect_uri = `${url.protocol}//${url.host}${redirect_uri}`;
       }
       const parameters = {
         redirect_uri,
@@ -184,7 +192,7 @@ class ReactAuthProvider {
    */
   callback = server.$route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/callback",
     group: "auth",
     method: "GET",
@@ -246,7 +254,7 @@ class ReactAuthProvider {
    */
   logout = server.$route({
     security: false,
-    private: true,
+    internal: true,
     url: "/_oauth/logout",
     group: "auth",
     method: "GET",
@@ -316,13 +324,13 @@ const envSchema$1 = core.t.object({
   REACT_SERVER_DIST: core.t.string({ default: "client" }),
   REACT_SERVER_PREFIX: core.t.string({ default: "" }),
   REACT_SSR_ENABLED: core.t.boolean({ default: false }),
-  REACT_SSR_OUTLET: core.t.string({ default: "<!--ssr-outlet-->" })
+  REACT_ROOT_ID: core.t.string({ default: "root" })
 });
 class ReactServerProvider {
   log = core.$logger();
   alepha = core.$inject(core.Alepha);
   router = core.$inject(useAuth.Router);
-  server = core.$inject(server.ServerProvider);
+  serverProvider = core.$inject(server.ServerProvider);
   env = core.$inject(envSchema$1);
   configure = core.$hook({
     name: "configure",
@@ -330,7 +338,9 @@ class ReactServerProvider {
       await this.configureRoutes();
     }
   });
+  id = Math.random().toString(36).substring(2, 7);
   async configureRoutes() {
+    this.alepha.state("ReactServerProvider.ssr", false);
     if (this.alepha.isTest()) {
       this.processDescriptors();
     }
@@ -338,14 +348,15 @@ class ReactServerProvider {
       return;
     }
     if (process.env.VITE_ALEPHA_DEV === "true") {
+      const url = `http://${process.env.SERVER_HOST}:${process.env.SERVER_PORT}`;
       this.log.info("SSR (vite) OK");
-      const templateUrl = "http://127.0.0.1:5173/index.html";
-      this.log.debug(`Fetch template from ${templateUrl}`);
+      this.alepha.state("ReactServerProvider.ssr", true);
+      const templateUrl = `${url}/index.html`;
       const route2 = this.createHandler(
-        () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0).then((it) => it ? this.checkTemplate(it) : void 0)
+        () => fetch(templateUrl).then((it) => it.text()).catch(() => void 0)
       );
-      await this.server.route(route2);
-      await this.server.route({
+      await this.serverProvider.route(route2);
+      await this.serverProvider.route({
         ...route2,
         url: "*"
       });
@@ -367,37 +378,16 @@ class ReactServerProvider {
         this.log.warn("Missing static files, SSR will be disabled");
         return;
       }
-      await this.server.serve(this.createStaticHandler(root));
+      await this.serverProvider.serve(this.createStaticHandler(root));
     }
-    const template = this.checkTemplate(
-      this.alepha.state("ReactServerProvider.template") ?? await promises.readFile(node_path.join(root, "index.html"), "utf-8")
-    );
+    const template = this.alepha.state("ReactServerProvider.template") ?? await promises.readFile(node_path.join(root, "index.html"), "utf-8");
     const route = this.createHandler(async () => template);
-    await this.server.route(route);
-    await this.server.route({
+    await this.serverProvider.route(route);
+    await this.serverProvider.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;
+    this.alepha.state("ReactServerProvider.ssr", true);
   }
   /**
    *
@@ -434,13 +424,14 @@ class ReactServerProvider {
         if (response) {
           return response;
         }
-        return await this.ssr(ctx.url, template, {
-          user: ctx.user,
-          cookies: ctx.cookies
-        });
+        return await this.ssr(ctx.url, template, ctx);
       }
     };
   }
+  /**
+   *
+   * @protected
+   */
   processDescriptors() {
     const pages = this.alepha.getDescriptorValues(useAuth.$page);
     for (const { key, instance, value } of pages) {
@@ -479,13 +470,26 @@ class ReactServerProvider {
    *
    * @param url
    * @param template
-   * @param page
+   * @param args
    */
-  async ssr(url, template = this.env.REACT_SSR_OUTLET, page = {}) {
+  async ssr(url, template, args = {}) {
+    const hasAuth = this.alepha.has(ReactAuthProvider);
+    if (!args.user && args.cookies && hasAuth) {
+      const auth = this.alepha.get(ReactAuthProvider);
+      args.user = auth.user.get(args.cookies);
+      if (args.user) {
+        args.user.roles = [];
+      }
+    }
+    if (this.alepha.has(server.ServerLinksProvider) && hasAuth) {
+      const srv = this.alepha.get(server.ServerLinksProvider);
+      args.links = await srv.links();
+      this.alepha.als.set("links", args.links);
+    }
     const { element, layers, redirect, context } = await this.router.render(
       url.pathname + url.search,
       {
-        args: page
+        args
       }
     );
     if (redirect) {
@@ -496,42 +500,67 @@ class ReactServerProvider {
         }
       });
     }
-    const appHtml = server$1.renderToString(element);
+    const html = server$1.renderToString(element);
+    const $ = cheerio.load(template);
     const script = `<script>window.__ssr=${JSON.stringify({
+      links: args.links,
       layers: layers.map((it) => ({
         ...it,
+        error: it.error ? {
+          ...it.error,
+          name: it.error.name,
+          message: it.error.message,
+          stack: it.error.stack
+          // TODO: Hide stack in production ?
+        } : void 0,
         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);
+    const body = $("body");
+    const root = body.find(`#${this.env.REACT_ROOT_ID}`);
+    if (root.length) {
+      root.html(html);
+    } else {
+      body.prepend(`<div id="${this.env.REACT_ROOT_ID}">${html}</div>`);
     }
-    if (context.helmet) {
-      template = this.renderHelmetContext(template, context.helmet);
+    body.append(script);
+    if (context.head) {
+      this.renderHeadContext($, context.head);
     }
-    template = template.replace(this.env.REACT_SSR_OUTLET, appHtml);
-    return new Response(template, {
+    return new Response($.html(), {
       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>`
-        );
+  renderHeadContext($, headContext) {
+    const head = $("head");
+    if (head) {
+      if (headContext.title) {
+        head.find("title").remove();
+        head.append(`<title>${headContext.title}</title>`);
+      }
+      if (headContext.meta) {
+        for (const it of headContext.meta) {
+          const meta = head.find(`meta[name="${it.name}"]`);
+          if (meta.length) {
+            meta.attr("content", it.content);
+          } else {
+            head.append(`<meta name="${it.name}" content="${it.content}" />`);
+          }
+        }
+      }
+    }
+    if (headContext.htmlAttributes) {
+      for (const [key, value] of Object.entries(headContext.htmlAttributes)) {
+        $("html").attr(key, value);
+      }
+    }
+    if (headContext.bodyAttributes) {
+      for (const [key, value] of Object.entries(headContext.bodyAttributes)) {
+        $("body").attr(key, value);
       }
     }
-    return template;
   }
 }