zudoku 0.0.0-f01b653 → 0.0.0-f06d326

package/src/app/main.tsx

@@ -11,7 +11,13 @@ 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 { Layout, RouterError, Zudoku } from "zudoku/components";
+import {
+  Layout,
+  RouteGuard,
+  RouterError,
+  StatusPage,
+  Zudoku,
+} from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
 import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
@@ -32,6 +38,9 @@ export const convertZudokuConfigToOptions = (
     !config.page?.logo?.src?.dark;
 
   return {
+    basePath: config.basePath,
+    canonicalUrlOrigin: config.canonicalUrlOrigin,
+    protectedRoutes: config.protectedRoutes,
     page: {
       ...config.page,
       logo: {
@@ -69,9 +78,12 @@ export const convertZudokuConfigToOptions = (
   };
 };
 
-export const getRoutesByOptions = (options: ZudokuContextOptions) => {
+export const getRoutesByOptions = (
+  options: ZudokuContextOptions,
+  enableStatusPages = false,
+) => {
   const allPlugins = [
-    ...(options.plugins ? options.plugins : []),
+    ...(options.plugins ?? []),
     ...(options.authentication?.getAuthenticationPlugin
       ? [options.authentication.getAuthenticationPlugin()]
       : []),
@@ -79,19 +91,31 @@ export const getRoutesByOptions = (options: ZudokuContextOptions) => {
 
   const routes = allPlugins
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
-    .concat({
-      path: "*",
-      loader: () => {
-        throw new Response("Not Found", { status: 404 });
+    .concat(
+      enableStatusPages
+        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
+            (statusCode) => ({
+              path: `/.static/${statusCode}`,
+              element: <StatusPage statusCode={statusCode} />,
+            }),
+          )
+        : [],
+    )
+    .concat([
+      {
+        path: "*",
+        loader: () => {
+          throw new Response("Not Found", { status: 404 });
+        },
       },
-    });
+    ]);
 
   return routes;
 };
 
 export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
   const options = convertZudokuConfigToOptions(config);
-  const routes = getRoutesByOptions(options);
+  const routes = getRoutesByOptions(options, config.enableStatusPages);
 
   return [
     {
@@ -102,6 +126,7 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
       ),
       children: [
         {
+          element: <RouteGuard />,
           errorElement: <RouterError />,
           children: routes,
         },

package/src/app/standalone.tsx

@@ -43,7 +43,6 @@ const config = {
       type: "url",
       input: apiUrl!,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

package/src/app/tailwind.ts

@@ -28,6 +28,20 @@ const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
     content,
     theme: {
       extend: {
+        keyframes: {
+          "bounce-x-start": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(-25%)" },
+          },
+          "bounce-x-end": {
+            "0%, 100%": { transform: "translateX(0)" },
+            "50%": { transform: "translateX(25%)" },
+          },
+        },
+        animation: {
+          "bounce-x-start": "bounce-x-start 1s infinite",
+          "bounce-x-end": "bounce-x-end 1s infinite",
+        },
         fontFamily: {
           sans,
           mono,
@@ -74,6 +88,12 @@ const config = (zudokuConfig?: LoadedConfig): Omit<Config, "content"> => {
             foreground: "hsl(var(--card-foreground))",
           },
         },
+        borderRadius: {
+          xl: "calc(var(--radius) + 4px)",
+          lg: `var(--radius)`,
+          md: `calc(var(--radius) - 2px)`,
+          sm: "calc(var(--radius) - 4px)",
+        },
       },
     },
     plugins: [typographyPlugin],

package/src/lib/MissingIcon.tsx

@@ -0,0 +1,22 @@
+import { CircleDashed, LucideProps } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./ui/Tooltip.js";
+
+export const MissingIcon = (props: LucideProps) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="text-red-500">
+          <CircleDashed {...props} />
+        </TooltipTrigger>
+        <TooltipContent>
+          Icon not found, see: https://lucide.dev/icons/
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

package/src/lib/authentication/authentication.ts

@@ -4,9 +4,11 @@ export interface AuthenticationProvider {
   signUp(options?: { redirectTo?: string }): Promise<void>;
   signIn(options?: { redirectTo?: string }): Promise<void>;
   signOut(): Promise<void>;
+  // @deprecated use signRequest instead
   getAccessToken(): Promise<string>;
   getAuthenticationPlugin?(): ZudokuPlugin;
   onPageLoad?(): void;
+  signRequest(request: Request): Promise<Request>;
 }
 
 export interface AuthenticationProviderInitializer<TConfig> {

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

@@ -5,9 +5,10 @@ import { useZudoku } from "../../components/context/ZudokuContext.js";
 export const SignOut = () => {
   const context = useZudoku();
   const navigate = useNavigate();
+
   useEffect(() => {
     void context.authentication?.signOut().then(() => navigate("/"));
-  }, [navigate, context.authentication]);
+  }, []);
 
   return null;
 };

package/src/lib/authentication/hook.ts

@@ -15,7 +15,9 @@ export const useAuth = () => {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.signIn();
+      await authentication.signIn({
+        redirectTo: window.location.href,
+      });
     },
 
     logout: async () => {
@@ -28,5 +30,14 @@ export const useAuth = () => {
       // Redirect to home
       window.location.href = "/";
     },
+
+    signup: async () => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+      await authentication.signUp({
+        redirectTo: window.location.href,
+      });
+    },
   };
 };

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

@@ -1,5 +1,5 @@
-import { Auth0AuthenticationConfig } from "../../../config/config.js";
-import { AuthenticationProviderInitializer } from "../authentication.js";
+import { type Auth0AuthenticationConfig } from "../../../config/config.js";
+import { type AuthenticationProviderInitializer } from "../authentication.js";
 import { useAuthState } from "../state.js";
 import { OpenIDAuthenticationProvider } from "./openid.js";
 
@@ -11,6 +11,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
       issuer: `https://${config.domain}`,
       clientId: config.clientId,
       audience: config.audience,
+      scopes: config.scopes,
     });
   }
 
@@ -35,10 +36,7 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
       providerData: null,
     });
 
-    const redirectUrl = new URL(
-      window.location.origin + this.logoutRedirectUrlPath,
-    );
-
+    const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0

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

@@ -1,6 +1,6 @@
 import type { Clerk } from "@clerk/clerk-js";
-import { ClerkAuthenticationConfig } from "../../../config/config.js";
-import { AuthenticationProviderInitializer } from "../authentication.js";
+import { type ClerkAuthenticationConfig } from "../../../config/config.js";
+import { type AuthenticationProviderInitializer } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { useAuthState } from "../state.js";
 
@@ -16,16 +16,24 @@ class ClerkAuthPlugin extends AuthenticationPlugin {
     }
 
     if (clerk.session) {
+      const verifiedEmail = clerk.session.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
       useAuthState.setState({
         isAuthenticated: true,
         isPending: false,
         profile: {
           sub: clerk.session.user.id,
           name: clerk.session.user.fullName ?? undefined,
-          email: clerk.session.user.emailAddresses[0]?.emailAddress,
-          emailVerified: false, // TODO: Check this
+          email:
+            verifiedEmail?.emailAddress ??
+            clerk.session.user.emailAddresses[0]?.emailAddress,
+          emailVerified: verifiedEmail !== undefined,
           pictureUrl: clerk.session.user.imageUrl,
         },
+        providerData: {
+          user: clerk.session.user,
+        },
       });
     } else {
       useAuthState.setState({
@@ -45,19 +53,48 @@ const clerkAuth: AuthenticationProviderInitializer<
   redirectToAfterSignUp = "/",
   redirectToAfterSignIn = "/",
 }) => {
-  let clerkApi: Clerk;
+  let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
     const { Clerk } = await import("@clerk/clerk-js");
     clerkApi = new Clerk(clerkPubKey);
 
     await clerkApi.load();
+
+    if (clerkApi.user) {
+      const verifiedEmail = clerkApi.user.emailAddresses.find(
+        (email) => email.verification.status === "verified",
+      );
+      useAuthState.setState({
+        isAuthenticated: true,
+        isPending: false,
+        profile: {
+          sub: clerkApi.user.id,
+          name: clerkApi.user.fullName ?? undefined,
+          email:
+            verifiedEmail?.emailAddress ??
+            clerkApi.user.emailAddresses[0]?.emailAddress,
+          emailVerified: verifiedEmail !== undefined,
+          pictureUrl: clerkApi.user.imageUrl,
+        },
+        providerData: {
+          user: {
+            publicMetadata: clerkApi.user.publicMetadata,
+            id: clerkApi.user.id,
+            emailAddresses: clerkApi.user.emailAddresses,
+            imageUrl: clerkApi.user.imageUrl,
+            fullName: clerkApi.user.fullName,
+          },
+        },
+      });
+    }
+
     return clerkApi;
   })();
 
   async function getAccessToken() {
     await ensureLoaded;
-    if (!clerkApi.session) {
+    if (!clerkApi?.session) {
       throw new Error("No session available");
     }
     const response = await clerkApi.session.getToken();
@@ -67,26 +104,44 @@ const clerkAuth: AuthenticationProviderInitializer<
     return response;
   }
 
+  async function signRequest(request: Request): Promise<Request> {
+    const response = await getAccessToken();
+    request.headers.set("Authorization", `Bearer ${response}`);
+    return request;
+  }
+
   return {
+    clerk: clerkApi,
     getAccessToken,
+    signRequest,
     signOut: async () => {
       await ensureLoaded;
-      await clerkApi.signOut({
+      await clerkApi?.signOut({
         redirectUrl: window.location.origin + redirectToAfterSignOut,
       });
+      useAuthState.setState({
+        isAuthenticated: false,
+        isPending: false,
+        profile: null,
+        providerData: null,
+      });
     },
-    signIn: async () => {
+    signIn: async ({ redirectTo }: { redirectTo?: string }) => {
       await ensureLoaded;
-      await clerkApi.redirectToSignIn({
-        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+      await clerkApi?.redirectToSignIn({
+        signInForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignUp,
       });
     },
-    signUp: async () => {
+    signUp: async ({ redirectTo }: { redirectTo?: string }) => {
       await ensureLoaded;
-      await clerkApi.redirectToSignUp({
-        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+      await clerkApi?.redirectToSignUp({
+        signInForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignUp,
       });
     },
     getAuthenticationPlugin() {

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

@@ -1,19 +1,23 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
 import {
-  AuthenticationProvider,
-  AuthenticationProviderInitializer,
+  type AuthenticationProvider,
+  type 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";
+import { useAuthState, type UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
+const STATE_KEY = "oauth-state";
 
-interface TokenState {
+export interface OpenIdProviderData {
   accessToken: string;
+  idToken?: string;
   refreshToken?: string;
   expiresOn: Date;
   tokenType: string;
@@ -31,7 +35,11 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
       ...super.getRoutes(),
       {
         path: this.callbackUrlPath,
-        element: <CallbackHandler handleCallback={this.handleCallback} />,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
       },
     ];
   }
@@ -43,8 +51,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
-  protected callbackUrlPath = "/oauth/callback";
-  protected logoutRedirectUrlPath = "/";
+  protected callbackUrlPath: string;
+  protected logoutRedirectUrlPath: string;
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
@@ -53,6 +61,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   private readonly redirectToAfterSignIn: string;
   private readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
+  private readonly scopes: string[];
 
   constructor({
     issuer,
@@ -61,6 +70,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignUp,
     redirectToAfterSignIn,
     redirectToAfterSignOut,
+    basePath,
+    scopes,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -68,9 +79,15 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? "/";
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? "/";
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? "/";
+    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+    this.scopes = scopes ?? ["openid", "profile", "email"];
+
+    const root = joinUrl(basePath, "/");
+
+    this.logoutRedirectUrlPath = root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
   }
 
   protected async getAuthServer() {
@@ -101,9 +118,10 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       throw new AuthorizationError("No expires_in in response");
     }
 
-    const tokens: TokenState = {
+    const tokens: OpenIdProviderData = {
       accessToken: response.access_token,
       refreshToken: response.refresh_token,
+      idToken: response.id_token,
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
@@ -155,7 +173,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       authorizationServer.authorization_endpoint,
     );
 
-    sessionStorage.setItem("redirect-to", redirectTo);
+    const finalRedirect = redirectTo.startsWith(window.location.origin)
+      ? redirectTo.slice(window.location.origin.length)
+      : redirectTo;
+
+    sessionStorage.setItem("redirect-to", finalRedirect);
 
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
@@ -164,7 +186,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     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("scope", this.scopes.join(" "));
     authorizationUrl.searchParams.set("code_challenge", codeChallenge);
     authorizationUrl.searchParams.set(
       "code_challenge_method",
@@ -180,16 +202,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
 
     /**
-     * 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.
+     * The state parameter is used to prevent CSRF attacks and should be used in all authorization requests.
+     * It is independent of PKCE and should be used regardless of PKCE support.
      */
-    if (
-      authorizationServer.code_challenge_methods_supported?.includes("S256") !==
-      true
-    ) {
-      const state = oauth.generateRandomState();
-      authorizationUrl.searchParams.set("state", state);
-    }
+    const state = oauth.generateRandomState();
+    sessionStorage.setItem(STATE_KEY, state);
+    authorizationUrl.searchParams.set("state", state);
 
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
@@ -201,7 +219,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
-    const tokenState = providerData as TokenState;
+    const tokenState = providerData as OpenIdProviderData;
 
     if (new Date(tokenState.expiresOn) < new Date()) {
       if (!tokenState.refreshToken) {
@@ -237,6 +255,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
   }
 
+  signRequest = async (request: Request): Promise<Request> => {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  };
+
   signOut = async () => {
     useAuthState.setState({
       isAuthenticated: false,
@@ -274,6 +298,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
+    const storedState = sessionStorage.getItem(STATE_KEY);
+    sessionStorage.removeItem(STATE_KEY);
+
+    if (state !== storedState) {
+      throw new AuthorizationError("Invalid state parameter");
+    }
 
     // one eternity later, the user lands back on the redirect_uri
     // Authorization Code Grant Request & Response
@@ -300,7 +330,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.redirectToAfterSignIn;
+    redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
     const response = await oauth.authorizationCodeGrantRequest(