zudoku 0.0.0-fcb84d6 → 0.0.0-fd8f8ad

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,10 +12,8 @@ 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 pageTitle = document.getElementsByTagName("title")[0]!.innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
 // IMPORTANT: This component must not contain tailwind classes

package/src/lib/authentication/authentication.ts

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

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,59 +1,28 @@
-import logger from "loglevel";
-import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { DeveloperHint } from "../../components/DeveloperHint.js";
-import { ErrorPage } from "../../components/ErrorPage.js";
-import { Spinner } from "../../components/Spinner.js";
-import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Navigate } from "react-router-dom";
+import { ZudokuError } from "../../util/invariant.js";
 
 export function CallbackHandler({
   handleCallback,
 }: {
   handleCallback: () => Promise<string>;
 }) {
-  const [error, setError] = useState<Error | null>(null);
-  const navigate = useNavigate();
-  // Deal with double mount in dev mode which will break
-  // the OAuth flow because you can only use the code once
-  const didInitialize = useRef(false);
+  const executeCallback = useSuspenseQuery({
+    retry: false,
+    queryKey: ["oauth-callback"],
+    queryFn: async () => {
+      try {
+        return await handleCallback();
+      } catch (error) {
+        throw new ZudokuError("Could not validate user", {
+          cause: error,
+          title: "Authentication Error",
+          developerHint:
+            "Check the configuration of your authorization provider and ensure all settings such as the callback URL are configured correctly.",
+        });
+      }
+    },
+  });
 
-  useEffect(() => {
-    if (didInitialize.current) {
-      return;
-    }
-    didInitialize.current = true;
-    handleCallback()
-      .then((redirect) => {
-        navigate(redirect);
-      })
-      .catch((err) => {
-        logger.error(err);
-        setError(err);
-      });
-  }, [navigate, handleCallback]);
-
-  if (error) {
-    return (
-      <ErrorPage
-        category="Error"
-        title="Authentication Error"
-        message={
-          <>
-            <DeveloperHint className="mb-4">
-              Check the configuration of your authorization provider and ensure
-              all settings such as the callback URL are configured correctly.
-            </DeveloperHint>
-            An error occurred while authorizing the user.
-            <SyntaxHighlight code={error.toString()} language="plain" />
-          </>
-        }
-      />
-    );
-  }
-
-  return (
-    <div className="grid h-full place-items-center">
-      <Spinner />
-    </div>
-  );
+  return <Navigate to={executeCallback.data} />;
 }

package/src/lib/authentication/hook.ts

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

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

@@ -18,23 +18,26 @@ 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,
     });
     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 +45,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/state.ts

@@ -1,10 +1,6 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-
-export const useAuthState = create<AuthState>(() => ({
-  isPending: false,
-  isAuthenticated: false,
-}));
+import { shared } from "./use-broadcast/shared.js";
 
 export interface AuthState {
   isAuthenticated: boolean;
@@ -12,6 +8,17 @@ export interface AuthState {
   profile?: UserProfile;
 }
 
+export const useAuthState = create<AuthState>(
+  shared(
+    (_) => ({
+      isAuthenticated: false,
+      isPending: false,
+      profile: undefined,
+    }),
+    { name: "auth-state" },
+  ),
+);
+
 export interface UserProfile {
   sub: string;
   email: string | undefined;

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:
 

package/src/lib/authentication/use-broadcast/shared.ts

@@ -0,0 +1,372 @@
+// https://github.com/Romainlg29/use-broadcast/
+
+import { StateCreator, StoreMutatorIdentifier } from "zustand";
+
+export type SharedOptions = {
+  /**
+   * The name of the broadcast channel
+   * It must be unique
+   */
+  name?: string;
+
+  /**
+   * Main timeout
+   * If the main tab / window doesn't respond in this time, this tab / window will become the main
+   * @default 100 ms
+   */
+  mainTimeout?: number;
+
+  /**
+   * If true, the store will only synchronize once with the main tab. After that, the store will be unsynchronized.
+   * @default false
+   */
+  unsync?: boolean;
+
+  /**
+   * Callback when this tab / window becomes the main tab / window
+   * Triggered only in the main tab / window
+   */
+  onBecomeMain?: (id: number) => void;
+
+  /**
+   * Callback when a new tab is opened / closed
+   * Triggered only in the main tab / window
+   */
+  onTabsChange?: (ids: number[]) => void;
+};
+
+/**
+ * The Shared type
+ */
+export type Shared = <
+  T,
+  Mps extends [StoreMutatorIdentifier, unknown][] = [],
+  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
+>(
+  f: StateCreator<T, Mps, Mcs>,
+  options?: SharedOptions,
+) => StateCreator<T, Mps, Mcs>;
+
+/**
+ * Type implementation of the Shared function
+ */
+type SharedImpl = <T>(
+  f: StateCreator<T, [], []>,
+  options?: SharedOptions,
+) => StateCreator<T, [], []>;
+
+/**
+ * Shared implementation
+ * @param f Zustand state creator
+ * @param options The options
+ */
+const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
+  /**
+   * The broadcast channel is not supported in SSR
+   */
+  if (
+    typeof window === "undefined" &&
+    !(
+      typeof WorkerGlobalScope !== "undefined" &&
+      self instanceof WorkerGlobalScope
+    )
+  ) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "BroadcastChannel is not supported in this environment. The store will not be shared.",
+    );
+    return f(set, get, store);
+  }
+
+  /**
+   * If BroadcastChannel is not supported, return the basic store
+   */
+  if (typeof BroadcastChannel === "undefined") {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "BroadcastChannel is not supported in this browser. The store will not be shared.",
+    );
+    return f(set, get, store);
+  }
+
+  /**
+   * Types
+   */
+  type Item = { [key: string]: unknown };
+  type Message =
+    | {
+        action: "sync";
+      }
+    | {
+        action: "change";
+        state: Item;
+      }
+    | {
+        action: "add_new_tab";
+        id: number;
+      }
+    | {
+        action: "close";
+        id: number;
+      }
+    | {
+        action: "change_main";
+        id: number;
+        tabs: number[];
+      };
+
+  /**
+   * Is the store synced with the other tabs
+   */
+  let isSynced = get() !== undefined;
+
+  /**
+   * Is this tab / window the main tab / window
+   * When a new tab / window is opened, it will be synced with the main
+   */
+  let isMain = false;
+
+  /**
+   * The broadcast channel name
+   */
+  const name = options?.name ?? f.toString();
+
+  /**
+   * The id of the tab / window
+   */
+  let id = 0;
+
+  /**
+   * Store a list of all the tabs / windows
+   * Only for the main tab / window
+   */
+  const tabs: number[] = [0];
+
+  /**
+   * Create the broadcast channel
+   */
+  const channel = new BroadcastChannel(name);
+
+  /**
+   * Handle the Zustand set function
+   * Trigger a postMessage to all the other tabs
+   */
+  const onSet: typeof set = (...args) => {
+    /**
+     * Get the previous states
+     */
+    const previous = get() as Item;
+
+    /**
+     * Update the states
+     */
+    set(...(args as Parameters<typeof set>));
+
+    /**
+     * If the stores should not be synced, return.
+     */
+    if (options?.unsync) {
+      return;
+    }
+
+    /**
+     * Get the fresh states
+     */
+    const updated = get() as Item;
+
+    /**
+     * Get the states that changed
+     */
+    const state = Object.entries(updated).reduce((obj, [key, val]) => {
+      if (previous[key] !== val) {
+        obj = { ...obj, [key]: val };
+      }
+      return obj;
+    }, {} as Item);
+
+    /**
+     * Send the states to all the other tabs
+     */
+    channel.postMessage({ action: "change", state } as Message);
+  };
+
+  /**
+   * Subscribe to the broadcast channel
+   */
+  channel.onmessage = (e) => {
+    if ((e.data as Message).action === "sync") {
+      /**
+       * If this tab / window is not the main, return
+       */
+      if (!isMain) {
+        return;
+      }
+
+      /**
+       * Remove all the functions and symbols from the store
+       */
+      const state = Object.entries(get() as Item).reduce((obj, [key, val]) => {
+        if (typeof val !== "function" && typeof val !== "symbol") {
+          obj = { ...obj, [key]: val };
+        }
+        return obj;
+      }, {});
+
+      /**
+       * Send the state to the other tabs
+       */
+      channel.postMessage({ action: "change", state } as Message);
+
+      /**
+       * Set the new tab / window id
+       */
+      const new_id = tabs[tabs.length - 1]! + 1;
+      tabs.push(new_id);
+
+      options?.onTabsChange?.(tabs);
+
+      channel.postMessage({ action: "add_new_tab", id: new_id } as Message);
+
+      return;
+    }
+
+    /**
+     * Set an id for the tab / window if it doesn't have one
+     */
+    if ((e.data as Message).action === "add_new_tab" && !isMain && id === 0) {
+      id = e.data.id;
+      return;
+    }
+
+    /**
+     * On receiving a new state, update the state
+     */
+    if ((e.data as Message).action === "change") {
+      /**
+       * Update the state
+       */
+      set(e.data.state);
+
+      /**
+       * Set the synced attribute
+       */
+      isSynced = true;
+    }
+
+    /**
+     * On receiving a close message, remove the tab / window id from the list
+     */
+    if ((e.data as Message).action === "close") {
+      if (!isMain) {
+        return;
+      }
+
+      const index = tabs.indexOf(e.data.id);
+      if (index !== -1) {
+        tabs.splice(index, 1);
+
+        options?.onTabsChange?.(tabs);
+      }
+    }
+
+    /**
+     * On receiving a change_main message, change the main tab / window
+     */
+    if ((e.data as Message).action === "change_main") {
+      if (e.data.id === id) {
+        isMain = true;
+        tabs.splice(0, tabs.length, ...e.data.tabs);
+
+        options?.onBecomeMain?.(id);
+      }
+    }
+  };
+
+  /**
+   * Synchronize with the main tab
+   */
+  const synchronize = (): void => {
+    channel.postMessage({ action: "sync" } as Message);
+
+    /**
+     * If isSynced is false after 100ms, this tab is the main tab
+     */
+    setTimeout(() => {
+      if (!isSynced) {
+        isMain = true;
+        isSynced = true;
+
+        options?.onBecomeMain?.(id);
+      }
+    }, options?.mainTimeout ?? 100);
+  };
+
+  /**
+   * Handle case when the tab / window is closed
+   */
+  const onClose = (): void => {
+    channel.postMessage({ action: "close", id } as Message);
+
+    /**
+     * If we're closing the main, make the second the new main
+     */
+    if (isMain) {
+      /**
+       * If there is only one tab left, close the channel and return
+       */
+      if (tabs.length === 1) {
+        /**
+         * Clean up
+         */
+        channel.close();
+        return;
+      }
+
+      const remaining_tabs = tabs.filter((tab) => tab !== id);
+      channel.postMessage({
+        action: "change_main",
+        id: remaining_tabs[0],
+        tabs: remaining_tabs,
+      } as Message);
+
+      return;
+    }
+  };
+
+  /**
+   * Add close event listener
+   */
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", onClose);
+  }
+
+  /**
+   * Synchronize with the main tab
+   */
+  if (!isSynced) {
+    synchronize();
+  }
+
+  /**
+   * Modify and return the Zustand store
+   */
+  store.setState = onSet;
+
+  return f(onSet, get, store);
+};
+
+/**
+ * Shared middleware
+ *
+ * @example
+ * import { create } from 'zustand';
+ * import { shared } from 'use-broadcast-ts';
+ *
+ * const useStore = create(
+ *      shared(
+ *          (set) => ({ count: 0 }),
+ *          { name: 'my-store' }
+ *      )
+ * );
+ */
+export const shared = sharedImpl as Shared;