zudoku 0.0.0-f90a252 → 0.0.0-f9211eb

package/src/app/entry.server.tsx

@@ -8,31 +8,34 @@ import {
   createStaticHandler,
   createStaticRouter,
   isRouteErrorResponse,
+  type RouteObject,
 } from "react-router";
 import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";
-import type { ZudokuConfig } from "../config/config.js";
-import type { FileWritingResponse } from "../vite/prerender/FileWritingResponse.js";
+import { NO_DEHYDRATE } from "../lib/components/cache.js";
+import type { PrerenderResponse } from "../vite/prerender/PrerenderResponse.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
-
 export { getRoutesByConfig };
 
 export const render = async ({
   template,
   request: baseRequest,
   response,
-  config,
+  routes,
+  basePath,
+  bypassProtection,
 }: {
   template: string;
   request: express.Request | Request;
-  response: express.Response | FileWritingResponse;
-  config: ZudokuConfig;
+  response: express.Response | PrerenderResponse;
+  routes: RouteObject[];
+  basePath?: string;
+  bypassProtection?: boolean;
 }) => {
-  const routes = getRoutesByConfig(config);
   const { query, dataRoutes } = createStaticHandler(routes, {
-    basename: config.basePath,
+    basename: basePath,
   });
   const queryClient = new QueryClient();
 
@@ -47,7 +50,7 @@ export const render = async ({
   if (context instanceof Response) {
     if ([301, 302, 303, 307, 308].includes(context.status)) {
       return response.redirect(
-        context.status,
+        import.meta.env.PROD ? context.status : 307,
         context.headers.get("Location")!,
       );
     }
@@ -72,6 +75,7 @@ export const render = async ({
       context={context}
       queryClient={queryClient}
       helmetContext={helmetContext}
+      bypassProtection={bypassProtection}
     />
   );
 
@@ -84,8 +88,6 @@ export const render = async ({
 
       response.send(html);
     },
-    // for SSG we could use onAllReady instead of onShellReady
-    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
     onAllReady() {
       response.set({ "Content-Type": "text/html" });
       response.status(status);
@@ -117,10 +119,15 @@ export const render = async ({
       );
 
       transformStream.on("finish", () => {
+        const dehydrated = dehydrate(queryClient, {
+          shouldDehydrateQuery: (query) =>
+            !query.queryKey.includes(NO_DEHYDRATE),
+        });
+
         response.end(
           htmlEnd?.replace(
             "</body>",
-            `<script>window.DATA = ${JSON.stringify(dehydrate(queryClient))}</script></body>`,
+            `<script>window.DATA=${JSON.stringify(dehydrated)}</script></body>`,
           ),
         );
       });
@@ -129,6 +136,9 @@ export const render = async ({
     },
     onError(error) {
       status = 500;
+      if (import.meta.env.PROD) {
+        throw error;
+      }
       logger.error(error);
     },
   });
@@ -136,7 +146,7 @@ export const render = async ({
 
 export function createFetchRequest(
   req: express.Request,
-  res: express.Response | FileWritingResponse,
+  res: express.Response | PrerenderResponse,
 ): Request {
   const origin = `${req.protocol}://${req.get("host")}`;
   // Note: This had to take originalUrl into account for presumably vite's proxying

package/src/app/main.css

@@ -82,10 +82,11 @@
     --top-nav-height: 50px;
     --banner-height: 40px;
     --header-height: calc(
-      var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
+      var(--top-header-height) + var(--top-nav-height) + var(--banner-height) -
+        /* borders */ 2px
     );
     --scroll-padding: calc(var(--header-height) + 10px);
-    --side-nav-width: theme("spacing.80");
+    --side-nav-width: theme("spacing.72");
     --padding-content-top: theme("spacing.6");
     --padding-content-bottom: theme("spacing.12");
     --padding-nav-item: theme("spacing[2.5]");
@@ -108,8 +109,9 @@
   }
 
   #root {
-    @apply min-h-screen w-full;
+    @apply min-h-screen w-full grid grid-rows-[auto_1fr];
   }
+
   * {
     @apply border-border;
   }
@@ -121,6 +123,10 @@
       "calt" 1;
   }
 
+  ::selection {
+    @apply bg-primary/100 text-primary-foreground;
+  }
+
   .dark {
     color-scheme: dark;
   }
@@ -239,61 +245,96 @@
   }
 
   /* Theme */
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 95%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.75rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 240 10% 3.9%;
-      --card: 0 0% 100%;
-      --card-foreground: 240 10% 3.9%;
-      --popover: 0 0% 100%;
-      --popover-foreground: 240 10% 3.9%;
-      --primary: 240 5.9% 10%;
-      --primary-foreground: 0 0% 98%;
-      --secondary: 240 4.8% 95.9%;
-      --secondary-foreground: 240 5.9% 10%;
-      --muted: 240 4.8% 95.9%;
-      --muted-foreground: 240 3.8% 46.1%;
-      --accent: 240 4.8% 95.9%;
-      --accent-foreground: 240 5.9% 10%;
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 0 0% 98%;
-      --border: 240 5.9% 95%;
-      --input: 240 5.9% 90%;
-      --ring: 240 5.9% 10%;
-      --radius: 0.75rem;
-      --chart-1: 12 76% 61%;
-      --chart-2: 173 58% 39%;
-      --chart-3: 197 37% 24%;
-      --chart-4: 43 74% 66%;
-      --chart-5: 27 87% 67%;
-    }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
 
-    .dark {
-      --background: 240 10% 3.9%;
-      --foreground: 0 0% 98%;
-      --card: 240 10% 3.9%;
-      --card-foreground: 0 0% 98%;
-      --popover: 240 10% 3.9%;
-      --popover-foreground: 0 0% 98%;
-      --primary: 0 0% 98%;
-      --primary-foreground: 240 5.9% 10%;
-      --secondary: 240 3.7% 15.9%;
-      --secondary-foreground: 0 0% 98%;
-      --muted: 240 3.7% 15.9%;
-      --muted-foreground: 240 5% 64.9%;
-      --accent: 240 3.7% 15.9%;
-      --accent-foreground: 0 0% 98%;
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 0 0% 98%;
-      --border: 240 3.7% 15.9%;
-      --input: 240 3.7% 15.9%;
-      --ring: 240 4.9% 83.9%;
-      --chart-1: 220 70% 50%;
-      --chart-2: 160 60% 45%;
-      --chart-3: 30 80% 55%;
-      --chart-4: 280 65% 60%;
-      --chart-5: 340 75% 55%;
-    }
+@layer components {
+  .stepper > ol {
+    --bullet-size: 1.75rem;
+    --line-spacing: 0.25rem;
+    @apply flex flex-col list-none p-0 m-0;
+    counter-reset: step-counter;
+  }
+
+  .stepper > ol > li {
+    @apply relative ps-12 pb-6 my-0;
+    counter-increment: step-counter;
+  }
+
+  .stepper > ol > li:last-child {
+    @apply pb-0;
+  }
+
+  /* Bullet with number */
+  .stepper > ol > li::before {
+    @apply absolute left-0 flex items-center justify-center size-[--bullet-size];
+    @apply bg-muted/80 border border-border text-muted-foreground text-[calc(var(--bullet-size)/2)] font-semibold rounded-full;
+    content: counter(step-counter);
+  }
+
+  /* Vertical line */
+  .stepper > ol > li::after {
+    @apply absolute content-[''] w-[2px] bg-border -translate-x-1/2;
+    left: calc(var(--bullet-size) / 2);
+    top: calc(var(--bullet-size) + var(--line-spacing));
+    height: calc(100% - var(--bullet-size) - (2 * var(--line-spacing)));
+  }
+
+  .stepper > ol > li > :first-child {
+    @apply mt-0 pt-0;
+    transform: translateY(calc((var(--bullet-size) - 1lh) / 2));
   }
 }

package/src/app/main.tsx

@@ -38,6 +38,8 @@ export const convertZudokuConfigToOptions = (
     !config.page?.logo?.src?.dark;
 
   return {
+    basePath: config.basePath,
+    canonicalUrlOrigin: config.canonicalUrlOrigin,
     protectedRoutes: config.protectedRoutes,
     page: {
       ...config.page,
@@ -81,7 +83,7 @@ export const getRoutesByOptions = (
   enableStatusPages = false,
 ) => {
   const allPlugins = [
-    ...(options.plugins ? options.plugins : []),
+    ...(options.plugins ?? []),
     ...(options.authentication?.getAuthenticationPlugin
       ? [options.authentication.getAuthenticationPlugin()]
       : []),

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/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/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,
     });
   }
 

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";
 
@@ -31,6 +31,9 @@ class ClerkAuthPlugin extends AuthenticationPlugin {
           emailVerified: verifiedEmail !== undefined,
           pictureUrl: clerk.session.user.imageUrl,
         },
+        providerData: {
+          user: clerk.session.user,
+        },
       });
     } else {
       useAuthState.setState({
@@ -74,6 +77,15 @@ const clerkAuth: AuthenticationProviderInitializer<
           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,
+          },
+        },
       });
     }
 
@@ -92,8 +104,16 @@ 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({
@@ -106,18 +126,22 @@ const clerkAuth: AuthenticationProviderInitializer<
         providerData: null,
       });
     },
-    signIn: async () => {
+    signIn: async ({ redirectTo }: { redirectTo?: string }) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignIn({
-        signInForceRedirectUrl: window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl: window.location.origin + redirectToAfterSignUp,
+        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,
+        signInForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignIn,
+        signUpForceRedirectUrl:
+          redirectTo ?? window.location.origin + redirectToAfterSignUp,
       });
     },
     getAuthenticationPlugin() {

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

@@ -1,18 +1,19 @@
 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";
 
 export interface OpenIdProviderData {
   accessToken: string;
@@ -60,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,
@@ -69,6 +71,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignIn,
     redirectToAfterSignOut,
     basePath,
+    scopes,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -77,6 +80,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     this.audience = audience;
     this.issuer = issuer;
     this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+    this.scopes = scopes ?? ["openid", "profile", "email"];
 
     const root = joinUrl(basePath, "/");
 
@@ -169,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;
@@ -178,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",
@@ -194,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;
@@ -251,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,
@@ -288,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