zudoku 0.3.1-dev.13 → 0.3.1-dev.14

package/lib/zudoku.plugin-api-keys.js

@@ -1,12 +1,12 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as p, R as f } from "./SlotletProvider-ByLSCZQa.js";
-import { u as g, a as u, I as j, S as k, b as v, c as w, d as b, e as K, f as y } from "./Input-CzXNm7xb.js";
-import { b as N, L as x, O as E } from "./index-7kcHaXD6.js";
-import { u as h, t as A, j as S } from "./ZudokuContext-BIZ8zHbZ.js";
-import { B as l, p as I } from "./Combination-DTfV-c98.js";
+import { S as p, R as f } from "./SlotletProvider-Dq80og6-.js";
+import { u as g, a as u, I as j, S as k, b as v, c as w, d as b, e as K, f as y } from "./Input-CBfi9Yjc.js";
+import { e as N, L as x, O as E } from "./index-Yjb2PyPF.js";
+import { u as h, t as A, j as S } from "./ZudokuContext-BQ45UjcB.js";
+import { B as l, p as I } from "./Combination-DruV0zX_.js";
 import { D as P } from "./DeveloperHint-BQSFXH01.js";
 import { useState as C } from "react";
-import { c as d, a as D } from "./Markdown-CEccPMI_.js";
+import { c as d, a as D } from "./Markdown-Chb9VIBv.js";
 /**
  * @license lucide-react v0.378.0 - ISC
  *

package/lib/zudoku.plugin-custom-page.js

@@ -1,5 +1,5 @@
 import { j as m } from "./jsx-runtime-B6kdoens.js";
-import { P as o } from "./Markdown-CEccPMI_.js";
+import { P as o } from "./Markdown-Chb9VIBv.js";
 const l = (s) => ({
   getRoutes: () => s.map(({ path: e, element: t }) => ({
     path: e,

package/lib/zudoku.plugin-markdown.js

@@ -6,7 +6,7 @@ const u = (t, e) => Object.entries(t).flatMap(([a, r]) => {
   return {
     path: s.at(-1) === "index" ? s.slice(0, -1).join("/") : o,
     lazy: async () => {
-      const { MdxPage: i } = await import("./MdxPage-CnqOoqvp.js"), { default: p, ...c } = await r();
+      const { MdxPage: i } = await import("./MdxPage-CIBHMwTd.js"), { default: p, ...c } = await r();
       return {
         element: /* @__PURE__ */ m.jsx(
           i,

package/lib/zudoku.plugin-openapi.js

@@ -1,14 +1,15 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as l } from "./index-B1he6g8N.js";
+import { o as s } from "./index-DHMNxrEi.js";
 import "./urql-DrBfkb92.js";
-import "./ZudokuContext-BIZ8zHbZ.js";
+import "./ZudokuContext-BQ45UjcB.js";
 import "zudoku/openapi-worker";
-import "./Combination-DTfV-c98.js";
-import "./Markdown-CEccPMI_.js";
+import "./Combination-DruV0zX_.js";
+import "./ErrorPage-PUg985n_.js";
+import "./Markdown-Chb9VIBv.js";
 import "./joinPath-B7kNnUX4.js";
 import "./router-BiRCp01d.js";
-import "./index-7kcHaXD6.js";
+import "./index-Yjb2PyPF.js";
 export {
-  l as openApiPlugin
+  s as openApiPlugin
 };
 //# sourceMappingURL=zudoku.plugin-openapi.js.map

package/lib/zudoku.plugin-openapi.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.1-dev.13",
+  "version": "0.3.1-dev.14",
   "type": "module",
   "files": [
     "dist",

package/src/lib/authentication/authentication.ts

@@ -5,6 +5,7 @@ export interface AuthenticationProvider {
   signIn(options?: { redirectTo?: string }): Promise<void>;
   signOut(): Promise<void>;
   getAccessToken(): Promise<string>;
+  pageLoad?(): void;
   getAuthenticationPlugin?(): DevPortalPlugin;
 }
 

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

@@ -0,0 +1,54 @@
+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 { SyntaxHighlight } from "../../components/SyntaxHighlight.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);
+
+  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 <p>Loading...</p>;
+}

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

@@ -1,13 +1,12 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import { NavigateFunction } from "react-router-dom";
 import { OpenIDAuthenticationConfig } from "../../../config/config.js";
-import { CommonPlugin } from "../../core/plugins.js";
 import {
   AuthenticationProvider,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, UserProfile } from "../state.js";
 
@@ -23,7 +22,7 @@ interface TokenState {
 class OpenIdAuthPlugin extends AuthenticationPlugin {
   constructor(
     private callbackUrlPath: string,
-    public initialize?: CommonPlugin["initialize"],
+    private handleCallback: () => Promise<string>,
   ) {
     super();
   }
@@ -32,7 +31,7 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
       ...super.getRoutes(),
       {
         path: this.callbackUrlPath,
-        element: <div />,
+        element: <CallbackHandler handleCallback={this.handleCallback} />,
       },
     ];
   }
@@ -279,9 +278,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     // Authorization Code Grant Request & Response
     const codeVerifier = sessionStorage.getItem(CODE_VERIFIER_KEY);
     sessionStorage.removeItem(CODE_VERIFIER_KEY);
-
     if (!codeVerifier) {
-      return "/";
+      throw new AuthorizationError("No code verifier found in state.");
     }
 
     const authServer = await this.getAuthServer();
@@ -320,7 +318,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     //   }
     //   throw new Error(); // Handle WWW-Authenticate Challenges as needed
     // }
-    const oauthResult = await oauth.processAuthorizationCodeOAuth2Response(
+    const oauthResult = await oauth.processAuthorizationCodeOpenIDResponse(
       authServer,
       this.client,
       response,
@@ -356,24 +354,22 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return sessionStorage.getItem("redirect-to") ?? "/";
   };
 
+  pageLoad(): void {
+    if (localStorage.getItem("auto-login")) {
+      localStorage.removeItem("auto-login");
+
+      // TODO: This needs to be cleaned up. We need to be able to return an
+      // error to the user if the authentication fails.
+      this.authorize({ redirectTo: window.location.pathname }).catch((err) => {
+        logger.error(err);
+      });
+    }
+  }
+
   getAuthenticationPlugin() {
-    return new OpenIdAuthPlugin(
-      this.callbackUrlPath,
-      async (_, options: { navigate: NavigateFunction }) => {
-        if (typeof window === "undefined") return;
-
-        if (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);
-          }
-        }
-      },
-    );
+    // TODO: This API is a bit messy, we need to refactor auth plugins/providers
+    // to remove the extra layers of abstraction.
+    return new OpenIdAuthPlugin(this.callbackUrlPath, this.handleCallback);
   }
 }
 

package/src/lib/components/Header.tsx

@@ -1,6 +1,5 @@
 import { MoonStarIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
-
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../authentication/hook.js";
 import { isProfileMenuPlugin, ProfileNavigationItem } from "../core/plugins.js";
@@ -98,7 +97,7 @@ export const Header = memo(function HeaderInner() {
             <div className="items-center justify-self-end text-sm hidden lg:flex gap-2">
               <Slotlet name="head-navigation-start" />
               {isAuthEnabled && !isAuthenticated ? (
-                <Button onClick={() => auth.login()} asChild>
+                <Button variant="ghost" onClick={() => auth.login()}>
                   Login
                 </Button>
               ) : (

package/src/lib/components/Layout.tsx

@@ -14,13 +14,18 @@ import { Spinner } from "./Spinner.js";
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
-  const { meta } = useZudoku();
+  const { meta, authentication } = useZudoku();
 
   useScrollToAnchor();
   useScrollToTop();
 
   const previousLocationPath = useRef(location.pathname);
 
+  useEffect(() => {
+    // Initialize the authentication plugin
+    authentication?.pageLoad ? authentication.pageLoad() : null;
+  }, [authentication]);
+
   useEffect(() => {
     // always reset on location change
     if (location.pathname !== previousLocationPath.current) {

package/src/lib/components/context/ZudokuProvider.tsx

@@ -1,6 +1,5 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
-import { useNavigate } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
 import { ZudokuReactContext } from "./ZudokuContext.js";
 
@@ -8,11 +7,9 @@ export const ZudokuProvider = ({
   children,
   context,
 }: PropsWithChildren<{ context: DevPortalContext }>) => {
-  const navigate = useNavigate();
-
   useSuspenseQuery({
     queryFn: async () => {
-      await context.initialize({ navigate });
+      await context.initialize();
       return true;
     },
     queryKey: ["zudoku-initialize"],

package/src/lib/core/DevPortalContext.ts

@@ -1,5 +1,4 @@
 import { QueryClient } from "@tanstack/react-query";
-import { NavigateFunction } from "react-router-dom";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
@@ -84,15 +83,11 @@ export class DevPortalContext {
     this.page = config.page;
   }
 
-  initialize = async ({
-    navigate,
-  }: {
-    navigate: NavigateFunction;
-  }): Promise<void> => {
+  initialize = async (): Promise<void> => {
     await Promise.all(
       this.plugins
         .filter(needsInitialization)
-        .map((plugin) => plugin.initialize?.(this, { navigate })),
+        .map((plugin) => plugin.initialize?.(this)),
     );
   };
 

package/src/lib/core/plugins.ts

@@ -1,5 +1,5 @@
 import { type ReactElement } from "react";
-import { NavigateFunction, type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router-dom";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
 import { MdxComponentsType } from "../util/MdxComponents.js";
 import { DevPortalContext, type ApiIdentity } from "./DevPortalContext.js";
@@ -40,7 +40,6 @@ export type ProfileNavigationItem = {
 export interface CommonPlugin {
   initialize?: (
     context: DevPortalContext,
-    options: { navigate: NavigateFunction },
   ) => Promise<void | boolean> | void | boolean;
   getHead?: () => ReactElement | undefined;
   getMdxComponents?: () => MdxComponentsType;