zudoku 0.0.0-f865d81 → 0.0.0-fb7d300

package/src/app/entry.server.tsx

@@ -1,3 +1,4 @@
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 import { type HelmetData } from "@zudoku/react-helmet-async";
 import type express from "express";
 import logger from "loglevel";
@@ -32,15 +33,13 @@ export const render = async ({
   const { query, dataRoutes } = createStaticHandler(routes, {
     basename: config.basePath,
   });
+  const queryClient = new QueryClient();
 
   const request =
     baseRequest instanceof Request
       ? baseRequest
       : createFetchRequest(baseRequest, response);
 
-  if (!request) {
-    throw new Error("Either fetchRequest or expressRequest must be provided");
-  }
   const context = await query(request);
   let status = 200;
 
@@ -66,65 +65,72 @@ export const render = async ({
   const router = createStaticRouter(dataRoutes, context);
   const helmetContext = {} as HelmetData["context"];
 
-  const { pipe } = renderToPipeableStream(
+  const App = (
     <BootstrapStatic
       router={router}
       context={context}
+      queryClient={queryClient}
       helmetContext={helmetContext}
-    />,
-    {
-      onShellError(error) {
-        response.status(500);
-        response.set({ "Content-Type": "text/html" });
-
-        const html = renderToStaticMarkup(<ServerError error={error} />);
-
-        response.send(html);
-      },
-      // for SSG we could use onAllReady instead of onShellReady
-      // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
-      onShellReady() {
-        response.set({ "Content-Type": "text/html" });
-        response.status(status);
-
-        const transformStream = new Transform({
-          transform(chunk, encoding, callback) {
-            response.write(chunk, encoding);
-            callback();
-          },
-        });
-
-        const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
-
-        if (!htmlStart) {
-          throw new Error("No <!--app-html--> found in template");
-        }
+    />
+  );
+
+  const { pipe } = renderToPipeableStream(App, {
+    onShellError(error) {
+      response.status(500);
+      response.set({ "Content-Type": "text/html" });
+
+      const html = renderToStaticMarkup(<ServerError error={error} />);
+
+      response.send(html);
+    },
+    // for SSG we could use onAllReady instead of onShellReady
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    onAllReady() {
+      response.set({ "Content-Type": "text/html" });
+      response.status(status);
+
+      const transformStream = new Transform({
+        transform(chunk, encoding, callback) {
+          response.write(chunk, encoding);
+          callback();
+        },
+      });
+
+      const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
+
+      if (!htmlStart) {
+        throw new Error("No <!--app-html--> found in template");
+      }
+
+      response.write(
+        htmlStart.replace(
+          "<!--app-helmet-->",
+          [
+            helmetContext.helmet.title.toString(),
+            helmetContext.helmet.meta.toString(),
+            helmetContext.helmet.link.toString(),
+            helmetContext.helmet.style.toString(),
+            helmetContext.helmet.script.toString(),
+          ].join("\n"),
+        ),
+      );
 
-        response.write(
-          htmlStart.replace(
-            "<!--app-helmet-->",
-            [
-              helmetContext.helmet.title.toString(),
-              helmetContext.helmet.meta.toString(),
-              helmetContext.helmet.link.toString(),
-              helmetContext.helmet.style.toString(),
-              helmetContext.helmet.script.toString(),
-            ].join("\n"),
+      transformStream.on("finish", () => {
+        response.end(
+          htmlEnd?.replace(
+            "</body>",
+            `<script>window.DATA = ${JSON.stringify(dehydrate(queryClient))}</script></body>`,
           ),
         );
+      });
 
-        transformStream.on("finish", () => {
-          response.end(htmlEnd);
-        });
-
-        pipe(transformStream);
-      },
-      onError(error) {
-        status = 500;
-        logger.error(error);
-      },
+      pipe(transformStream);
     },
-  );
+    onError(error) {
+      status = 500;
+      logger.error(error);
+    },
+  });
 };
 
 export function createFetchRequest(

package/src/app/main.css

@@ -187,7 +187,7 @@
   }
 
   .scrollbar:hover {
-    scrollbar-color: hsla(var(--border)) transparent;
+    scrollbar-color: var(--scrollbar-color, hsla(var(--border))) transparent;
   }
 
   .scrollbar::-webkit-scrollbar {

package/src/app/main.tsx

@@ -8,9 +8,9 @@ import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
 import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
-import { DevPortal, Layout, RouterError } from "zudoku/components";
+import { Layout, RouterError, Zudoku } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
-import type { ZudokuContextOptions } from "../lib/core/DevPortalContext.js";
+import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
 
 export const convertZudokuConfigToOptions = (
@@ -92,9 +92,9 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
   return [
     {
       element: (
-        <DevPortal {...options}>
+        <Zudoku {...options}>
           <Layout />
-        </DevPortal>
+        </Zudoku>
       ),
       children: [
         {

package/src/app/standalone.tsx

@@ -3,7 +3,6 @@ import { createBrowserRouter } from "react-router-dom";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
-import { themeToggle } from "../lib/themeToggle.js";
 import "../lib/util/logInit.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -13,8 +12,6 @@ if (!root) {
   throw new Error("No div found with attribute data-api-url");
 }
 
-themeToggle();
-
 const apiUrl = root.getAttribute("data-api-url");
 const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
 const logoUrl = root.getAttribute("data-logo-url");

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -1,3 +1,4 @@
+import { LogOutIcon } from "lucide-react";
 import {
   CommonPlugin,
   NavigationPlugin,
@@ -32,7 +33,9 @@ export class AuthenticationPlugin implements PluginInterface {
       {
         label: "Logout",
         path: "/signout",
-      },
+        category: "bottom",
+        icon: LogOutIcon,
+      } as const,
     ];
   }
 }

package/src/lib/authentication/authentication.ts

@@ -1,12 +1,12 @@
-import { DevPortalPlugin } from "../core/plugins.js";
+import { ZudokuPlugin } from "../core/plugins.js";
 
 export interface AuthenticationProvider {
   signUp(options?: { redirectTo?: string }): Promise<void>;
   signIn(options?: { redirectTo?: string }): Promise<void>;
   signOut(): Promise<void>;
   getAccessToken(): Promise<string>;
-  pageLoad?(): void;
-  getAuthenticationPlugin?(): DevPortalPlugin;
+  getAuthenticationPlugin?(): ZudokuPlugin;
+  onPageLoad?(): void;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {

package/src/lib/authentication/hook.ts

@@ -8,9 +8,7 @@ export const useAuth = () => {
 
   return {
     isAuthEnabled,
-    isPending: authState.isPending,
-    profile: authState.profile,
-    isAuthenticated: Boolean(authState.profile),
+    ...authState,
 
     login: async () => {
       if (!isAuthEnabled) {

package/src/lib/authentication/providers/auth0.tsx

@@ -18,23 +18,27 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     url: URL,
     { isSignUp }: { isSignUp: boolean },
   ) => {
+    url.searchParams.set("prompt", "login");
     if (isSignUp) {
       url.searchParams.set("screen_hint", "signup");
     }
   };
 
   signOut = async (): Promise<void> => {
+    const as = await this.getAuthServer();
+    const idToken = await this.getAccessToken();
+
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
-      profile: undefined,
+      profile: null,
+      providerData: null,
     });
-    sessionStorage.clear();
-    const as = await this.getAuthServer();
 
     const redirectUrl = new URL(
       window.location.origin + this.logoutRedirectUrlPath,
     );
+
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
@@ -42,22 +46,24 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     // Logout End Session Endpoint Discovery is enabled by default.
     // Otherwise we fallback to the old non-compliant logout
 
-    let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
     // so we use the IdP logout. Otherwise, just redirect the user to home
     if (as.end_session_endpoint) {
-      logoutUrl = new URL(as.end_session_endpoint);
-      // TODO: get id_token and set hint
-      // const { id_token } = session;
-      // if (id_token) {
-      //   logoutUrl.searchParams.set("id_token_hint", id_token);
-      // }
+      const logoutUrl = new URL(as.end_session_endpoint);
+      if (idToken) {
+        logoutUrl.searchParams.set("id_token_hint", idToken);
+      }
       logoutUrl.searchParams.set(
         "post_logout_redirect_uri",
         redirectUrl.toString(),
       );
+
+      // window.location.href = logoutUrl.toString();
     } else {
-      logoutUrl = new URL(`${this.issuer}oidc/logout`);
+      const logoutUrl = new URL(
+        `${this.issuer.replace(/\/$/, "")}/oidc/logout`,
+      );
+      // window.location.href = logoutUrl.toString();
     }
   };
 }

package/src/lib/authentication/providers/openid.tsx

@@ -107,7 +107,10 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
-    sessionStorage.setItem("token-state", JSON.stringify(tokens));
+
+    useAuthState.setState({
+      providerData: tokens,
+    });
   }
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
@@ -194,14 +197,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
-    const tokenState = sessionStorage.getItem("token-state");
-    if (!tokenState) {
+    const { providerData } = useAuthState.getState();
+    if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
+    const tokenState = providerData as TokenState;
 
-    const state = JSON.parse(tokenState) as TokenState;
-    if (state.expiresOn < new Date()) {
-      if (!state.refreshToken) {
+    if (tokenState.expiresOn < new Date()) {
+      if (!tokenState.refreshToken) {
         await this.signIn();
         return "";
       }
@@ -209,7 +212,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       const request = await oauth.refreshTokenGrantRequest(
         as,
         this.client,
-        state.refreshToken,
+        tokenState.refreshToken,
       );
       const response = await oauth.processRefreshTokenResponse(
         as,
@@ -225,7 +228,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
       return response.access_token.toString();
     } else {
-      return state.accessToken;
+      return tokenState.accessToken;
     }
   }
 
@@ -234,8 +237,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       isAuthenticated: false,
       isPending: false,
       profile: undefined,
+      providerData: undefined,
     });
-    sessionStorage.clear();
 
     const as = await this.getAuthServer();
 
@@ -342,32 +345,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
-    sessionStorage.setItem(
-      "profile-state",
-      JSON.stringify(useAuthState.getState().profile),
-    );
-
     const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
     sessionStorage.removeItem("redirect-to");
     return redirectTo;
   };
 
-  pageLoad(): void {
-    const profileState = sessionStorage.getItem("profile-state");
-    if (profileState) {
-      try {
-        const profile = JSON.parse(profileState);
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
-          profile,
-        });
-      } catch (err) {
-        logger.error("Error parsing auth state", err);
-      }
-    }
-  }
-
   getAuthenticationPlugin() {
     // TODO: This API is a bit messy, we need to refactor auth plugins/providers
     // to remove the extra layers of abstraction.

package/src/lib/authentication/state.ts

@@ -1,15 +1,56 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
+import { create, type Mutate, type StoreApi } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 
-export const useAuthState = create<AuthState>(() => ({
-  isPending: false,
-  isAuthenticated: false,
-}));
-
-export interface AuthState {
+export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
-  profile?: UserProfile;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
+}
+
+export class Authentication {
+  async setLoggedIn(isLoggedIn: boolean) {}
+  async setProfile() {}
+  async setPersistentProviderData() {}
+}
+
+export type StoreWithPersist<T> = Mutate<
+  StoreApi<T>,
+  [["zustand/persist", unknown]]
+>;
+
+export const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
+  const storageEventCallback = (e: StorageEvent) => {
+    if (e.key === store.persist.getOptions().name && e.newValue) {
+      void store.persist.rehydrate();
+    }
+  };
+
+  window.addEventListener("storage", storageEventCallback);
+
+  return () => {
+    window.removeEventListener("storage", storageEventCallback);
+  };
+};
+
+export const useAuthState = create<AuthState>()(
+  persist(
+    (state) => ({
+      isAuthenticated: false,
+      isPending: false,
+      profile: null,
+      providerData: null,
+    }),
+    {
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+      // partialize: (s) => ({ state: s }),
+    },
+  ),
+);
+
+if (typeof window !== "undefined") {
+  withStorageDOMEvents(useAuthState);
 }
 
 export interface UserProfile {

package/{LICENSE.md → src/lib/authentication/use-broadcast/LICENSE.md}

@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) Zuplo, Inc.
+Copyright (c) 2023 Romain
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: