zudoku 0.1.1-dev.9 → 0.3.0-dev.3

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

@@ -0,0 +1,312 @@
+import logger from "loglevel";
+import * as oauth from "oauth4webapi";
+import { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { RouteObject } from "../../core/router.js";
+import {
+  AuthenticationProvider,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { Callback } from "../Callback.js";
+import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
+import { useAuthState, UserProfile } from "../state.js";
+
+const CODE_VERIFIER_KEY = "code-verifier";
+
+interface TokenState {
+  accessToken: string;
+  refreshToken?: string;
+  expiresOn: Date;
+  tokenType: string;
+}
+
+export class OpenIDAuthenticationProvider implements AuthenticationProvider {
+  protected client: oauth.Client;
+  protected issuer: string;
+  protected authorizationEndpoint: string | undefined;
+  protected tokenEndpoint: string | undefined;
+
+  protected authorizationServer: oauth.AuthorizationServer | undefined;
+  protected tokens: TokenState | undefined;
+
+  protected callbackUrlPath = "/oauth/callback";
+  protected logoutRedirectUrlPath = "/";
+
+  constructor({
+    issuer,
+    authorizationEndpoint,
+    tokenEndpoint,
+    clientId,
+  }: OpenIDAuthenticationConfig) {
+    this.client = {
+      client_id: clientId,
+      token_endpoint_auth_method: "none",
+    };
+    this.issuer = issuer;
+    this.authorizationEndpoint = authorizationEndpoint;
+    this.tokenEndpoint = tokenEndpoint;
+  }
+
+  protected async getAuthServer() {
+    if (!this.authorizationServer) {
+      if (this.tokenEndpoint && this.authorizationEndpoint) {
+        this.authorizationServer = {
+          issuer: new URL(this.authorizationEndpoint!).origin,
+          authorization_endpoint: this.authorizationEndpoint,
+          token_endpoint: this.tokenEndpoint,
+          code_challenge_methods_supported: [],
+        };
+      } else {
+        const issuerUrl = new URL(this.issuer);
+        const response = await oauth.discoveryRequest(issuerUrl);
+        this.authorizationServer = await oauth.processDiscoveryResponse(
+          issuerUrl,
+          response,
+        );
+      }
+    }
+    return this.authorizationServer;
+  }
+
+  /**
+   * Sets the tokens from various OAuth responses
+   * @param response
+   */
+  protected setTokensFromResponse(
+    response: oauth.TokenEndpointResponse | oauth.OAuth2Error,
+  ) {
+    if (oauth.isOAuth2Error(response)) {
+      logger.error("Bad Token Response", response);
+      throw new OAuthAuthorizationError("Bad Token Response", response);
+    }
+
+    if (!response.expires_in) {
+      throw new AuthorizationError("No expires_in in response");
+    }
+
+    this.tokens = {
+      accessToken: response.access_token,
+      refreshToken: response.refresh_token,
+      expiresOn: new Date(Date.now() + response.expires_in * 1000),
+      tokenType: response.token_type,
+    };
+  }
+
+  async initialize() {
+    // No init needed
+  }
+
+  async login(): Promise<void> {
+    const code_challenge_method = "S256";
+    const authorizationServer = await this.getAuthServer();
+
+    if (!authorizationServer.authorization_endpoint) {
+      throw new AuthorizationError("No authorization endpoint");
+    }
+
+    /**
+     * The following MUST be generated for every redirect to the authorization_endpoint. You must store
+     * the codeVerifier and nonce in the end-user session such that it can be recovered as the user
+     * gets redirected from the authorization server back to your application.
+     */
+    const codeVerifier = oauth.generateRandomCodeVerifier();
+    const codeChallenge = await oauth.calculatePKCECodeChallenge(codeVerifier);
+
+    localStorage.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);
+    redirectUrl.pathname = this.callbackUrlPath;
+    redirectUrl.search = "";
+
+    authorizationUrl.searchParams.set("client_id", this.client.client_id);
+    authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
+    authorizationUrl.searchParams.set("response_type", "code");
+    authorizationUrl.searchParams.set("scope", "openid+profile+email");
+    authorizationUrl.searchParams.set("code_challenge", codeChallenge);
+    authorizationUrl.searchParams.set(
+      "code_challenge_method",
+      code_challenge_method,
+    );
+
+    /**
+     * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
+     * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
+     */
+    if (
+      authorizationServer.code_challenge_methods_supported?.includes("S256") !==
+      true
+    ) {
+      const state = oauth.generateRandomState();
+      authorizationUrl.searchParams.set("state", state);
+    }
+
+    // now redirect the user to authorizationUrl.href
+    location.href = authorizationUrl.href;
+  }
+  async getAccessToken(): Promise<string> {
+    const as = await this.getAuthServer();
+    if (!this.tokens) {
+      throw new AuthorizationError("User is not authenticated");
+    }
+    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",
+        );
+      }
+
+      const request = await oauth.refreshTokenGrantRequest(
+        as,
+        this.client,
+        this.tokens.refreshToken,
+      );
+      const response = await oauth.processRefreshTokenResponse(
+        as,
+        this.client,
+        request,
+      );
+
+      this.setTokensFromResponse(response);
+    }
+
+    return this.tokens.accessToken;
+  }
+
+  async logout(): Promise<void> {
+    useAuthState.setState({
+      isAuthenticated: false,
+      profile: undefined,
+    });
+
+    const as = await this.getAuthServer();
+
+    const redirectUrl = new URL(window.location.href);
+    redirectUrl.pathname = this.logoutRedirectUrlPath;
+
+    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);
+      // }
+      logoutUrl.searchParams.set(
+        "post_logout_redirect_uri",
+        redirectUrl.toString(),
+      );
+    } else {
+      logoutUrl = redirectUrl;
+    }
+  }
+  getRoutes(): RouteObject[] {
+    return [
+      {
+        path: this.callbackUrlPath,
+        element: <Callback handleCallback={this.handleCallback} />,
+      },
+    ];
+  }
+
+  handleCallback = async (): Promise<void> => {
+    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);
+
+    if (!codeVerifier) {
+      throw new AuthorizationError(
+        "Code verifier not found. Invalid auth state.",
+      );
+    }
+
+    const authServer = await this.getAuthServer();
+
+    const params = oauth.validateAuthResponse(
+      authServer,
+      this.client,
+      url.searchParams,
+      state ?? undefined,
+    );
+    if (oauth.isOAuth2Error(params)) {
+      logger.error("Error validating OAuth response", params);
+      throw new OAuthAuthorizationError(
+        "Error validating OAuth response",
+        params,
+      );
+    }
+
+    const redirectUrl = new URL(url);
+    redirectUrl.pathname = this.callbackUrlPath;
+    redirectUrl.search = "";
+
+    const response = await oauth.authorizationCodeGrantRequest(
+      authServer,
+      this.client,
+      params,
+      redirectUrl.toString(),
+      codeVerifier,
+    );
+
+    // TODO: do we need to do these
+    // const challenges = oauth.parseWwwAuthenticateChallenges(response);
+    // if (challenges) {
+    //   for (const challenge of challenges) {
+    //     console.error("WWW-Authenticate Challenge", challenge);
+    //   }
+    //   throw new Error(); // Handle WWW-Authenticate Challenges as needed
+    // }
+    const oauthResult = await oauth.processAuthorizationCodeOAuth2Response(
+      authServer,
+      this.client,
+      response,
+    );
+
+    this.setTokensFromResponse(oauthResult);
+
+    const accessToken = await this.getAccessToken();
+
+    const userInfoResponse = await oauth.userInfoRequest(
+      authServer,
+      this.client,
+      accessToken,
+    );
+    const userInfo = await userInfoResponse.json();
+
+    const profile: UserProfile = {
+      sub: userInfo.sub,
+      email: userInfo.email,
+      name: userInfo.name,
+      emailVerified: userInfo.email_verified ?? false,
+      pictureUrl: userInfo.picture,
+    };
+
+    useAuthState.setState({
+      isAuthenticated: true,
+      profile,
+    });
+
+    // // Remove the query strings so react query doesn't keep retrying
+    // // to make the token request
+    // history.replaceState({}, "", window.location.pathname);
+
+    // Returning true because we are using react query
+    // return true;
+  };
+}
+
+const openIDAuth: AuthenticationProviderInitializer<
+  OpenIDAuthenticationConfig
+> = (options) => new OpenIDAuthenticationProvider(options);
+
+export default openIDAuth;

package/src/lib/authentication/state.ts

@@ -0,0 +1,19 @@
+import { create } from "zustand";
+
+export const useAuthState = create<AuthState>(() => ({
+  isAuthenticated: false,
+}));
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  profile?: UserProfile;
+}
+
+export interface UserProfile {
+  sub: string;
+  email: string | undefined;
+  emailVerified: boolean;
+  name: string | undefined;
+  pictureUrl: string | undefined;
+  [key: string]: string | boolean | undefined;
+}

package/src/{app → lib/components}/DevPortal.tsx

@@ -1,25 +1,29 @@
+/* eslint-disable react/destructuring-assignment */
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { memo, Suspense, useEffect, useMemo } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { type AuthProvider } from "./authentication/authentication.js";
-import {
-  ComponentsProvider,
-  DEFAULT_COMPONENTS,
-  type ComponentsContextType,
-} from "./components/context/ComponentsContext.js";
-import { DevPortalProvider } from "./components/context/DevPortalProvider.js";
-import { ThemeProvider } from "./components/context/ThemeContext.js";
-import { ViewportAnchorProvider } from "./components/context/ViewportAnchorContext.js";
-import { Layout } from "./components/Layout.js";
 import {
   DevPortalContext,
   queryClient,
   type NavigationItem,
-} from "./core/DevPortalContext.js";
-import { HelmetProvider } from "./core/helmet.js";
-import { isNavigationPlugin, type DevPortalPlugin } from "./core/plugins.js";
-import { MdxComponents, type MdxComponentsType } from "./util/MdxComponents.js";
+} 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 {
+  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";
 
 export const DevPortalSystemPaths = {
   Settings: "/settings",
@@ -37,35 +41,14 @@ export type DevPortalProps = {
     logo: string;
     favicon: string;
   }>;
-  authentication?: AuthProvider;
+  authentication?: AuthenticationProvider;
   navigation: NavigationItem[];
   plugins?: DevPortalPlugin[];
   mdxComponents?: MdxComponentsType;
   overrides?: ComponentsContextType;
 };
 
-const DevPortal = (props: DevPortalProps) => {
-  const router = useMemo(() => {
-    const routes = (props.plugins ?? []).flatMap((plugin) =>
-      isNavigationPlugin(plugin) ? plugin.getRoutes() : [],
-    );
-
-    return createBrowserRouter([
-      {
-        path: "/",
-        element: <Layout />,
-        errorElement: (
-          <Layout>
-            <div className="h-[75vh] flex items-center justify-center">
-              Error, look at the console
-            </div>
-          </Layout>
-        ),
-        children: routes,
-      },
-    ]);
-  }, [props.plugins]);
-
+const DevPortalInner = (props: DevPortalProps) => {
   const components = useMemo(
     () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
     [props.overrides],
@@ -97,7 +80,12 @@ const DevPortal = (props: DevPortalProps) => {
                       </div>
                     }
                   >
-                    <RouterProvider router={router} />
+                    <Router
+                      plugins={[
+                        ...(props.plugins ?? []),
+                        ...(props.authentication ? [props.authentication] : []),
+                      ]}
+                    />
                   </Suspense>
                 </ViewportAnchorProvider>
               </ComponentsProvider>
@@ -109,7 +97,7 @@ const DevPortal = (props: DevPortalProps) => {
   );
 };
 
-const MemoDevPortal = memo(DevPortal);
-MemoDevPortal.displayName = "DevPortal";
+const DevPortal = memo(DevPortalInner);
+DevPortal.displayName = "DevPortal";
 
-export default MemoDevPortal;
+export { DevPortal };

package/src/{app → lib}/components/Dialog.tsx

@@ -1,15 +1,15 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
 import { cn } from "../util/cn.js";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -19,12 +19,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -35,8 +35,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg border-border",
+        className,
       )}
       {...props}
     >
@@ -47,36 +47,36 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
-                        className,
-                        ...props
-                      }: React.HTMLAttributes<HTMLDivElement>) => (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -86,12 +86,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -102,18 +102,18 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
-}
+  DialogTrigger,
+};

package/src/{app → lib}/components/Header.tsx

@@ -1,14 +1,15 @@
 import { MoonStarIcon, SearchIcon, SunIcon } from "lucide-react";
 import { memo } from "react";
-import { useDevPortalState } from "../core/DevPortalContext.js";
+
+import { useAuth } from "../authentication/hook.js";
 import { TopNavigation } from "./TopNavigation.js";
 import { useDevPortal } from "./context/DevPortalProvider.js";
 import { useTheme } from "./context/ThemeContext.js";
 
-export const Header = memo(() => {
+export const Header = memo(function HeaderInner() {
   const [isDark, toggleTheme] = useTheme();
-  const { isLoggedIn, email } = useDevPortalState();
-  const { login, logout, meta } = useDevPortal();
+  const { isAuthenticated, profile, isAuthEnabled, login, logout } = useAuth();
+  const { meta } = useDevPortal();
 
   const ThemeIcon = isDark ? MoonStarIcon : SunIcon;
 
@@ -25,7 +26,7 @@ export const Header = memo(() => {
             </span>
           </div>
           <div className="grid grid-cols-[--sidecar-grid-cols] items-center gap-8">
-            <div className="w-full max-w-prose mx-auto">
+            <div className="w-full max-w-prose">
               <button className="flex items-center border border-input hover:bg-accent hover:text-accent-foreground p-4 relative h-8 justify-start rounded-lg bg-background text-sm text-muted-foreground shadow-none w-40 sm:w-72">
                 <div className="flex items-center gap-2 flex-grow">
                   <SearchIcon size={14} />
@@ -36,23 +37,27 @@ export const Header = memo(() => {
                 </kbd>
               </button>
             </div>
+
             <div className="items-center justify-self-end text-sm hidden lg:flex">
-              {!isLoggedIn ? (
-                <button
-                  className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
-                  onClick={logout}
-                >
-                  Logout {email ? `(${email})` : null}
-                </button>
-              ) : (
-                <button
-                  className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
-                  onClick={login}
-                >
-                  Login
-                </button>
+              {isAuthEnabled && (
+                <>
+                  {isAuthenticated ? (
+                    <button
+                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded text-nowrap"
+                      onClick={logout}
+                    >
+                      Logout {profile?.email ? `(${profile.email})` : null}
+                    </button>
+                  ) : (
+                    <button
+                      className="cursor-pointer hover:bg-secondary p-1 px-2 mx-2 rounded"
+                      onClick={login}
+                    >
+                      Login
+                    </button>
+                  )}
+                </>
               )}
-
               <button
                 className="cursor-pointer hover:bg-secondary p-2.5 -m-2.5 rounded-full"
                 onClick={toggleTheme}

package/src/{app → lib/components}/Heading.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import { useRegisterAnchorElement } from "./components/context/ViewportAnchorContext.js";
-import { cn } from "./util/cn.js";
+import { cn } from "../util/cn.js";
+import { useRegisterAnchorElement } from "./context/ViewportAnchorContext.js";
 
 const getComponent = (level: number) => {
   switch (level) {