zudoku 0.3.0-dev.8 → 0.3.0-dev.81

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

@@ -1,12 +1,13 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
+import { NavigateFunction } from "react-router-dom";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
-import { RouteObject } from "../../core/router.js";
+import { CommonPlugin } from "../../core/plugins.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { Callback } from "../Callback.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, UserProfile } from "../state.js";
 
@@ -19,6 +20,24 @@ interface TokenState {
   tokenType: string;
 }
 
+class OpenIdAuthPlugin extends AuthenticationPlugin {
+  constructor(
+    private callbackUrlPath: string,
+    public initialize?: CommonPlugin["initialize"],
+  ) {
+    super();
+  }
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: this.callbackUrlPath,
+        element: <div />,
+      },
+    ];
+  }
+}
+
 export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   protected client: oauth.Client;
   protected issuer: string;
@@ -30,20 +49,36 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected callbackUrlPath = "/oauth/callback";
   protected logoutRedirectUrlPath = "/";
+  protected onAuthorizationUrl?: (
+    authorizationUrl: URL,
+    options: { isSignIn: boolean; isSignUp: boolean },
+  ) => void;
+  private readonly redirectToAfterSignUp: string;
+  private readonly redirectToAfterSignIn: string;
+  private readonly redirectToAfterSignOut: string;
+  private readonly audience?: string;
 
   constructor({
     issuer,
+    audience,
     authorizationEndpoint,
     tokenEndpoint,
     clientId,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
       token_endpoint_auth_method: "none",
     };
+    this.audience = audience;
     this.issuer = issuer;
     this.authorizationEndpoint = authorizationEndpoint;
     this.tokenEndpoint = tokenEndpoint;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
   }
 
   protected async getAuthServer() {
@@ -89,13 +124,29 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
+    sessionStorage.setItem("openid-token", JSON.stringify(this.tokens));
   }
 
-  async initialize() {
-    // No init needed
+  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+    return this.authorize({
+      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      isSignUp: true,
+    });
+  }
+
+  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+    return this.authorize({
+      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+    });
   }
 
-  async login(): Promise<void> {
+  private async authorize({
+    redirectTo,
+    isSignUp = false,
+  }: {
+    redirectTo: string;
+    isSignUp?: boolean;
+  }): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
 
@@ -111,14 +162,16 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     const codeVerifier = oauth.generateRandomCodeVerifier();
     const codeChallenge = await oauth.calculatePKCECodeChallenge(codeVerifier);
 
-    localStorage.setItem(CODE_VERIFIER_KEY, codeVerifier);
+    sessionStorage.setItem(CODE_VERIFIER_KEY, codeVerifier);
 
     // redirect user to as.authorization_endpoint
     const authorizationUrl = new URL(
       authorizationServer.authorization_endpoint,
     );
 
-    const redirectUrl = new URL(window.location.href);
+    sessionStorage.setItem("redirect-to", redirectTo);
+
+    const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
@@ -131,6 +184,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       "code_challenge_method",
       code_challenge_method,
     );
+    if (this.audience) {
+      authorizationUrl.searchParams.set("audience", this.audience);
+    }
+
+    this.onAuthorizationUrl?.(authorizationUrl, {
+      isSignIn: !isSignUp,
+      isSignUp,
+    });
 
     /**
      * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
@@ -147,6 +208,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
   }
+
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
     if (!this.tokens) {
@@ -154,10 +216,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
     if (this.tokens.expiresOn < new Date()) {
       if (!this.tokens.refreshToken) {
-        // TODO: Log user bac in
-        throw new AuthorizationError(
-          "Token expired and no refresh token available",
-        );
+        await this.signIn();
+        return "";
       }
 
       const request = await oauth.refreshTokenGrantRequest(
@@ -177,16 +237,19 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return this.tokens.accessToken;
   }
 
-  async logout(): Promise<void> {
+  signOut = async () => {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
       profile: undefined,
     });
+    localStorage.removeItem("auto-login");
 
     const as = await this.getAuthServer();
 
-    const redirectUrl = new URL(window.location.href);
+    const redirectUrl = new URL(
+      window.location.origin + this.redirectToAfterSignOut,
+    );
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     let logoutUrl: URL;
@@ -206,29 +269,19 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     } else {
       logoutUrl = redirectUrl;
     }
-  }
-  getRoutes(): RouteObject[] {
-    return [
-      {
-        path: this.callbackUrlPath,
-        element: <Callback handleCallback={this.handleCallback} />,
-      },
-    ];
-  }
+  };
 
-  handleCallback = async (): Promise<void> => {
+  handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
 
     // one eternity later, the user lands back on the redirect_uri
     // Authorization Code Grant Request & Response
-    const codeVerifier = localStorage.getItem(CODE_VERIFIER_KEY);
-    // localStorage.removeItem(CODE_VERIFIER_KEY);
+    const codeVerifier = sessionStorage.getItem(CODE_VERIFIER_KEY);
+    sessionStorage.removeItem(CODE_VERIFIER_KEY);
 
     if (!codeVerifier) {
-      throw new AuthorizationError(
-        "Code verifier not found. Invalid auth state.",
-      );
+      return "/";
     }
 
     const authServer = await this.getAuthServer();
@@ -248,7 +301,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.callbackUrlPath;
+    redirectUrl.pathname = this.redirectToAfterSignIn;
     redirectUrl.search = "";
 
     const response = await oauth.authorizationCodeGrantRequest(
@@ -298,13 +351,31 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
-    // // Remove the query strings so react query doesn't keep retrying
-    // // to make the token request
-    // history.replaceState({}, "", window.location.pathname);
+    localStorage.setItem("auto-login", "1");
 
-    // Returning true because we are using react query
-    // return true;
+    return sessionStorage.getItem("redirect-to") ?? "/";
   };
+
+  getAuthenticationPlugin() {
+    return new OpenIdAuthPlugin(
+      this.callbackUrlPath,
+      async (_, options: { navigate: NavigateFunction }) => {
+        if (
+          typeof localStorage !== "undefined" &&
+          localStorage.getItem("auto-login")
+        ) {
+          localStorage.removeItem("auto-login");
+
+          await this.authorize({ redirectTo: window.location.pathname });
+        } else if (window.location.pathname === "/oauth/callback") {
+          const redirect = await this.handleCallback();
+          if (redirect) {
+            options.navigate(redirect);
+          }
+        }
+      },
+    );
+  }
 }
 
 const openIDAuth: AuthenticationProviderInitializer<

package/src/lib/authentication/state.ts

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 
 export const useAuthState = create<AuthState>(() => ({
-  isPending: true,
+  isPending: false,
   isAuthenticated: false,
 }));
 

package/src/lib/components/Bootstrap.tsx

@@ -0,0 +1,44 @@
+import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
+import { StrictMode } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import {
+  type StaticHandlerContext,
+  StaticRouterProvider,
+} from "react-router-dom/server.js";
+import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+
+const Bootstrap = ({
+  router,
+  hydrate = false,
+}: {
+  hydrate?: boolean;
+  router: ReturnType<typeof createBrowserRouter>;
+}) => {
+  return (
+    <StrictMode>
+      <HelmetProvider>
+        <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+          <RouterProvider router={router} />
+        </StaggeredRenderContext.Provider>
+      </HelmetProvider>
+    </StrictMode>
+  );
+};
+
+const BootstrapStatic = ({
+  router,
+  context,
+  helmetContext,
+}: {
+  helmetContext: HelmetData["context"];
+  context: StaticHandlerContext;
+  router: ReturnType<typeof createBrowserRouter>;
+}) => (
+  <StrictMode>
+    <HelmetProvider context={helmetContext}>
+      <StaticRouterProvider router={router} context={context} />
+    </HelmetProvider>
+  </StrictMode>
+);
+
+export { Bootstrap, BootstrapStatic };

package/src/lib/components/DevPortal.tsx

@@ -1,28 +1,36 @@
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { memo, Suspense, useEffect, useMemo } from "react";
+import { Helmet } from "@zudoku/react-helmet-async";
+import {
+  Fragment,
+  memo,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Outlet, useNavigate, useNavigation } from "react-router-dom";
 import {
   DevPortalContext,
   queryClient,
-  type NavigationItem,
+  ZudokuContextOptions,
 } from "../core/DevPortalContext.js";
-import { HelmetProvider } from "../core/helmet.js";
-import { type DevPortalPlugin } from "../core/plugins.js";
-
-import { AuthenticationProvider } from "../authentication/authentication.js";
-import {
-  MdxComponents,
-  type MdxComponentsType,
-} from "../util/MdxComponents.js";
+import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
+import { TopLevelError } from "../errors/TopLevelError.js";
+import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+import { MdxComponents } from "../util/MdxComponents.js";
+import "../util/requestIdleCallbackPolyfill.js";
 import {
   ComponentsProvider,
   DEFAULT_COMPONENTS,
-  type ComponentsContextType,
 } from "./context/ComponentsContext.js";
 import { DevPortalProvider } from "./context/DevPortalProvider.js";
 import { ThemeProvider } from "./context/ThemeContext.js";
 import { ViewportAnchorProvider } from "./context/ViewportAnchorContext.js";
-import { Router } from "./Router.js";
+import { SlotletProvider } from "./SlotletProvider.js";
 
 export const DevPortalSystemPaths = {
   Settings: "/settings",
@@ -32,71 +40,98 @@ export type DevPortalPath =
   | string
   | (typeof DevPortalSystemPaths)[keyof typeof DevPortalSystemPaths];
 
-export type DevPortalProps = {
-  meta?: Partial<{
-    headerTitle: string;
-    pageTitle: string;
-    description: string;
-    logo: string;
-    favicon: string;
-  }>;
-  authentication?: AuthenticationProvider;
-  navigation: NavigationItem[];
-  plugins?: DevPortalPlugin[];
-  mdxComponents?: MdxComponentsType;
-  overrides?: ComponentsContextType;
-};
-
-const DevPortalInner = (props: DevPortalProps) => {
+const DevPortalInner = ({
+  children,
+  ...props
+}: PropsWithChildren<ZudokuContextOptions>) => {
   const components = useMemo(
     () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
     [props.overrides],
   );
 
-  const mdxComponents = useMemo(
-    () => ({ ...MdxComponents, ...props.mdxComponents }),
-    [props.mdxComponents],
+  const mdxComponents = useMemo(() => {
+    const componentsFromPlugins = (props.plugins ?? [])
+      .filter(isMdxProviderPlugin)
+      .flatMap((plugin) =>
+        plugin.getMdxComponents ? [plugin.getMdxComponents()] : [],
+      );
+
+    return {
+      ...componentsFromPlugins.reduce((acc, curr) => ({ ...acc, ...curr }), {}),
+      ...MdxComponents,
+      ...props.mdx?.components,
+    };
+  }, [props.mdx?.components, props.plugins]);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const { stagger } = useContext(StaggeredRenderContext);
+  const [didNavigate, setDidNavigate] = useState(false);
+  const navigate = useNavigate();
+  const initRef = useRef<"idle" | "pending" | "done">("idle");
+  const staggeredValue = useMemo(
+    () => (didNavigate ? { stagger: true } : { stagger }),
+    [stagger, didNavigate],
   );
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    if (didNavigate) {
+      return;
+    }
+    setDidNavigate(true);
+  }, [didNavigate, navigation.location]);
 
-  const devPortalContext = useMemo(() => new DevPortalContext(props), [props]);
+  const [devPortalContext] = useState(() => new DevPortalContext(props));
 
+  // TODO could be handled more elegantly
   useEffect(() => {
-    void devPortalContext.initialize();
-  }, [devPortalContext]);
+    if (initRef.current === "pending") return;
+    initRef.current = "pending";
+    void devPortalContext.initialize({ navigate }).then(() => {
+      initRef.current = "done";
+      setIsInitialized(true);
+    });
+  }, [devPortalContext, navigate]);
+
+  const heads = props.plugins
+    ?.filter(hasHead)
+    // eslint-disable-next-line react/no-array-index-key
+    .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
+
+  if (!isInitialized) {
+    return null;
+  }
 
   return (
     <QueryClientProvider client={queryClient}>
-      <HelmetProvider>
+      <Helmet>{heads}</Helmet>
+      <StaggeredRenderContext.Provider value={staggeredValue}>
         <DevPortalProvider value={devPortalContext}>
           <MDXProvider components={mdxComponents}>
             <ThemeProvider>
               <ComponentsProvider value={components}>
-                <ViewportAnchorProvider>
-                  <Suspense
-                    fallback={
-                      <div className="grid place-items-center h-full">
-                        Loading...
-                      </div>
-                    }
-                  >
-                    <Router
-                      plugins={[
-                        ...(props.plugins ?? []),
-                        ...(props.authentication ? [props.authentication] : []),
-                      ]}
-                    />
-                  </Suspense>
-                </ViewportAnchorProvider>
+                <SlotletProvider slotlets={props.slotlets}>
+                  <ViewportAnchorProvider>
+                    {children ?? <Outlet />}
+                  </ViewportAnchorProvider>
+                </SlotletProvider>
               </ComponentsProvider>
             </ThemeProvider>
           </MDXProvider>
         </DevPortalProvider>
-      </HelmetProvider>
+      </StaggeredRenderContext.Provider>
     </QueryClientProvider>
   );
 };
 
-const DevPortal = memo(DevPortalInner);
+const Inner = memo(DevPortalInner);
+
+const DevPortal = (props: ZudokuContextOptions) => {
+  return (
+    <ErrorBoundary FallbackComponent={TopLevelError}>
+      <Inner {...props} />
+    </ErrorBoundary>
+  );
+};
 DevPortal.displayName = "DevPortal";
 
 export { DevPortal };

package/src/lib/components/DeveloperHint.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { Callout } from "../ui/Callout.js";
+
+export const DeveloperHint = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  // TODO: figure out a way to do that in consumer dev mode not "internal"
+  //  so this doesn't get stripped out in the build
+  if (!import.meta.env.DEV) return;
+
+  return (
+    <Callout type="caution" title="Developer hint" className={className}>
+      <div className="flex flex-col gap-2">
+        <div>{children}</div>
+        <small className="italic">
+          Note: This hint is only shown in development mode.
+        </small>
+      </div>
+    </Callout>
+  );
+};

package/src/lib/components/ErrorPage.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { CategoryHeading } from "./CategoryHeading.js";
+import { Heading } from "./Heading.js";
+import { ProseClasses } from "./Markdown.js";
+
+export const ErrorPage = ({
+  title = "An error occurred",
+  message,
+  category,
+}: {
+  title?: ReactNode;
+  message?: ReactNode;
+  category?: ReactNode;
+}) => {
+  return (
+    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+      {category && <CategoryHeading>{category}</CategoryHeading>}
+      {title && (
+        <Heading level={1} className="flex gap-3.5 items-center">
+          {title}
+        </Heading>
+      )}
+      <p>{message}</p>
+      <Link to="/">Go back home</Link>
+    </div>
+  );
+};