zudoku 0.0.0-f06d326 → 0.0.0-f0b4321

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

@@ -1,58 +1,24 @@
 import type { Clerk } from "@clerk/clerk-js";
+import { LogOutIcon } from "lucide-react";
+import { type ZudokuPlugin } from "zudoku/plugins";
 import { type ClerkAuthenticationConfig } from "../../../config/config.js";
-import { type AuthenticationProviderInitializer } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { SignIn } from "../components/SignIn.js";
+import { SignOut } from "../components/SignOut.js";
+import { SignUp } from "../components/SignUp.js";
 import { useAuthState } from "../state.js";
 
-class ClerkAuthPlugin extends AuthenticationPlugin {
-  constructor(private clerk: Promise<Clerk | undefined>) {
-    super();
-  }
-  initialize = async () => {
-    const clerk = await this.clerk;
-
-    if (!clerk) {
-      return;
-    }
-
-    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:
-            verifiedEmail?.emailAddress ??
-            clerk.session.user.emailAddresses[0]?.emailAddress,
-          emailVerified: verifiedEmail !== undefined,
-          pictureUrl: clerk.session.user.imageUrl,
-        },
-        providerData: {
-          user: clerk.session.user,
-        },
-      });
-    } else {
-      useAuthState.setState({
-        isAuthenticated: false,
-        isPending: false,
-        profile: undefined,
-      });
-    }
-  };
-}
-
 const clerkAuth: AuthenticationProviderInitializer<
   ClerkAuthenticationConfig
 > = ({
   clerkPubKey,
   redirectToAfterSignOut = "/",
-  redirectToAfterSignUp = "/",
-  redirectToAfterSignIn = "/",
-}) => {
+  redirectToAfterSignUp,
+  redirectToAfterSignIn,
+}): AuthenticationPlugin & ZudokuPlugin => {
   let clerkApi: Clerk | undefined;
   const ensureLoaded = (async () => {
     if (typeof window === "undefined") return;
@@ -65,9 +31,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       const verifiedEmail = clerkApi.user.emailAddresses.find(
         (email) => email.verification.status === "verified",
       );
-      useAuthState.setState({
-        isAuthenticated: true,
-        isPending: false,
+      useAuthState.getState().setLoggedIn({
         profile: {
           sub: clerkApi.user.id,
           name: clerkApi.user.fullName ?? undefined,
@@ -111,7 +75,66 @@ const clerkAuth: AuthenticationProviderInitializer<
   }
 
   return {
-    clerk: clerkApi,
+    getRoutes: () => {
+      return [
+        {
+          path: "/signout",
+          element: <SignOut />,
+        },
+        {
+          path: "/signin",
+          element: <SignIn />,
+        },
+        {
+          path: "/signup",
+          element: <SignUp />,
+        },
+      ];
+    },
+
+    getProfileMenuItems() {
+      return [
+        {
+          label: "Logout",
+          path: "/signout",
+          category: "bottom",
+          icon: LogOutIcon,
+        } as const,
+      ];
+    },
+    initialize: async () => {
+      const clerk = await ensureLoaded;
+
+      if (!clerk) {
+        return;
+      }
+
+      if (clerk.session) {
+        const verifiedEmail = clerk.session.user.emailAddresses.find(
+          (email) => email.verification.status === "verified",
+        );
+        useAuthState.getState().setLoggedIn({
+          profile: {
+            sub: clerk.session.user.id,
+            name: clerk.session.user.fullName ?? undefined,
+            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({
+          isAuthenticated: false,
+          isPending: false,
+          profile: undefined,
+        });
+      }
+    },
     getAccessToken,
     signRequest,
     signOut: async () => {
@@ -119,34 +142,30 @@ const clerkAuth: AuthenticationProviderInitializer<
       await clerkApi?.signOut({
         redirectUrl: window.location.origin + redirectToAfterSignOut,
       });
-      useAuthState.setState({
-        isAuthenticated: false,
-        isPending: false,
-        profile: null,
-        providerData: null,
-      });
+      useAuthState.getState().setLoggedOut();
     },
-    signIn: async ({ redirectTo }: { redirectTo?: string }) => {
+    signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignIn({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    signUp: async ({ redirectTo }: { redirectTo?: string }) => {
+    signUp: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignUp({
-        signInForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignIn,
-        signUpForceRedirectUrl:
-          redirectTo ?? window.location.origin + redirectToAfterSignUp,
+        signInForceRedirectUrl: redirectToAfterSignIn
+          ? window.location.origin + redirectToAfterSignIn
+          : redirectTo,
+        signUpForceRedirectUrl: redirectToAfterSignUp
+          ? window.location.origin + redirectToAfterSignUp
+          : redirectTo,
       });
     },
-    getAuthenticationPlugin() {
-      return new ClerkAuthPlugin(ensureLoaded);
-    },
   };
 };
 

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

@@ -4,10 +4,10 @@ import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
@@ -23,43 +23,26 @@ export interface OpenIdProviderData {
   tokenType: string;
 }
 
-class OpenIdAuthPlugin extends AuthenticationPlugin {
-  constructor(
-    private callbackUrlPath: string,
-    private handleCallback: () => Promise<string>,
-  ) {
-    super();
-  }
-  getRoutes() {
-    return [
-      ...super.getRoutes(),
-      {
-        path: this.callbackUrlPath,
-        element: (
-          <ClientOnly>
-            <CallbackHandler handleCallback={this.handleCallback} />
-          </ClientOnly>
-        ),
-      },
-    ];
-  }
-}
+export const OPENID_CALLBACK_PATH = "/oauth/callback";
 
-export class OpenIDAuthenticationProvider implements AuthenticationProvider {
+export class OpenIDAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   protected client: oauth.Client;
   protected issuer: string;
-
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
   protected callbackUrlPath: string;
-  protected logoutRedirectUrlPath: string;
+
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
   ) => void;
-  private readonly redirectToAfterSignUp: string;
-  private readonly redirectToAfterSignIn: string;
-  private readonly redirectToAfterSignOut: string;
+
+  protected readonly redirectToAfterSignUp: string | undefined;
+  protected readonly redirectToAfterSignIn: string | undefined;
+  protected readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
   private readonly scopes: string[];
 
@@ -69,25 +52,24 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     clientId,
     redirectToAfterSignUp,
     redirectToAfterSignIn,
-    redirectToAfterSignOut,
+    redirectToAfterSignOut = "/",
     basePath,
     scopes,
   }: OpenIDAuthenticationConfig) {
+    super();
     this.client = {
       client_id: clientId,
       token_endpoint_auth_method: "none",
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
+    // This is the callback URL for the OAuth provider. So it needs the base path.
+    this.callbackUrlPath = joinUrl(basePath, OPENID_CALLBACK_PATH);
     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;
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
   protected async getAuthServer() {
@@ -131,25 +113,41 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
+      replace,
       isSignUp: true,
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
+      replace,
     });
   }
 
   private async authorize({
     redirectTo,
     isSignUp = false,
+    replace = false,
   }: {
     redirectTo: string;
     isSignUp?: boolean;
+    replace?: boolean;
   }): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
@@ -173,11 +171,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       authorizationServer.authorization_endpoint,
     );
 
-    const finalRedirect = redirectTo.startsWith(window.location.origin)
-      ? redirectTo.slice(window.location.origin.length)
-      : redirectTo;
-
-    sessionStorage.setItem("redirect-to", finalRedirect);
+    sessionStorage.setItem("redirect-to", redirectTo);
 
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
@@ -209,8 +203,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     sessionStorage.setItem(STATE_KEY, state);
     authorizationUrl.searchParams.set("state", state);
 
-    // now redirect the user to authorizationUrl.href
-    location.href = authorizationUrl.href;
+    if (replace) {
+      location.replace(authorizationUrl.href);
+    } else {
+      location.href = authorizationUrl.href;
+    }
   }
 
   async getAccessToken(): Promise<string> {
@@ -274,7 +271,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     const redirectUrl = new URL(
       window.location.origin + this.redirectToAfterSignOut,
     );
-    redirectUrl.pathname = this.logoutRedirectUrlPath;
+    redirectUrl.pathname = this.callbackUrlPath;
 
     let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
@@ -295,6 +292,59 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
   };
 
+  onPageLoad = async () => {
+    const { providerData } = useAuthState.getState();
+
+    if (!providerData) {
+      useAuthState.setState({ isPending: false });
+      return;
+    }
+
+    const tokenState = providerData as OpenIdProviderData;
+
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+
+      try {
+        const as = await this.getAuthServer();
+        const request = await oauth.refreshTokenGrantRequest(
+          as,
+          this.client,
+          tokenState.refreshToken,
+        );
+        const response = await oauth.processRefreshTokenResponse(
+          as,
+          this.client,
+          request,
+        );
+
+        if (!response.access_token) {
+          throw new AuthorizationError("No access token in response");
+        }
+
+        this.setTokensFromResponse(response);
+      } catch {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+    }
+
+    useAuthState.setState({ isPending: false });
+  };
+
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
@@ -385,10 +435,18 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return redirectTo;
   };
 
-  getAuthenticationPlugin() {
-    // 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);
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: OPENID_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
+      },
+    ];
   }
 }
 

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

@@ -6,16 +6,17 @@ import {
 } from "@supabase/supabase-js";
 import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { AuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
-class SupabaseAuthPlugin extends AuthenticationPlugin {}
-
-class SupabaseAuthenticationProvider implements AuthenticationProvider {
+class SupabaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   private readonly client: SupabaseClient;
   private readonly provider: Provider;
   private readonly redirectToAfterSignUp: string;
@@ -31,6 +32,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignOut,
     basePath,
   }: SupabaseAuthenticationConfig) {
+    super();
     this.provider = provider;
     this.client = createClient(supabaseUrl, supabaseKey, {
       auth: {
@@ -49,12 +51,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
       if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
         await this.updateUserState(session);
       } else if (event === "SIGNED_OUT") {
-        useAuthState.setState({
-          isAuthenticated: false,
-          isPending: false,
-          profile: undefined,
-          providerData: undefined,
-        });
+        useAuthState.getState().setLoggedOut();
       }
     });
   }
@@ -70,9 +67,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
       pictureUrl: user.user_metadata.avatar_url,
     };
 
-    useAuthState.setState({
-      isAuthenticated: true,
-      isPending: false,
+    useAuthState.getState().setLoggedIn({
       profile,
       providerData: { session },
     });
@@ -139,8 +134,6 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     });
   };
 
-  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
-
   onPageLoad = async () => {
     const { data, error } = await this.client.auth.getSession();
 

package/src/lib/authentication/state.ts

@@ -6,12 +6,15 @@ export interface AuthState<ProviderData = unknown> {
   isPending: boolean;
   profile: UserProfile | null;
   providerData: ProviderData | null;
-}
-
-export class Authentication {
-  async setLoggedIn(isLoggedIn: boolean) {}
-  async setProfile() {}
-  async setPersistentProviderData() {}
+  setAuthenticationPending: () => void;
+  setLoggedOut: () => void;
+  setLoggedIn: ({
+    profile,
+    providerData,
+  }: {
+    profile: UserProfile;
+    providerData: unknown;
+  }) => void;
 }
 
 export type StoreWithPersist<T> = Mutate<
@@ -35,11 +38,38 @@ const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
 
 export const useAuthState = create<AuthState>()(
   persist(
-    (state) => ({
+    (set) => ({
       isAuthenticated: false,
       isPending: true,
       profile: null,
       providerData: null,
+      setAuthenticationPending: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedOut: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedIn: ({
+        profile,
+        providerData,
+      }: {
+        profile: UserProfile;
+        providerData: unknown;
+      }) =>
+        set(() => ({
+          isAuthenticated: true,
+          isPending: false,
+          profile,
+          providerData,
+        })),
     }),
     {
       merge: (persistedState, currentState) => {

package/src/lib/components/Autocomplete.tsx

@@ -26,7 +26,7 @@ const AutocompletePopover = ({
   options,
   onChange,
   className,
-  placeholder = "Enter value",
+  placeholder = "Value",
   onEnterPress,
   ref,
 }: AutocompleteProps) => {
@@ -39,6 +39,7 @@ const AutocompletePopover = ({
     <Popover open={open}>
       <PopoverAnchor>
         <CommandInlineInput
+          autoComplete="off"
           ref={(el) => {
             inputRef.current = el;
             if (typeof ref === "function") {
@@ -71,7 +72,7 @@ const AutocompletePopover = ({
         onMouseEnter={() => setDontClose(true)}
         onMouseLeave={() => setDontClose(false)}
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className={cn("p-0 w-[--radix-popover-trigger-width]", {
+        className={cn("p-0 w-(--radix-popover-trigger-width)", {
           "border-0": count === 0,
         })}
         align="start"

package/src/lib/components/Banner.tsx

@@ -12,7 +12,7 @@ const COLOR_MAP = {
 } as const;
 
 export const Banner = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const [isBannerOpen, setIsBannerOpen] = useState(true);
 
   if (!page?.banner || !isBannerOpen) {
@@ -31,17 +31,16 @@ export const Banner = () => {
   return (
     <div
       className={cn(
-        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
+        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
         mappedColor,
       )}
-      data-pagefind-ignore="all"
       style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (
         <button
           type="button"
-          className="md:absolute md:right-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
+          className="md:absolute md:end-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
           onClick={() => setIsBannerOpen(false)}
         >
           <CircleXIcon size={16} />

package/src/lib/components/Bootstrap.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-router";
 import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+import { BypassProtectedRoutesContext } from "./context/BypassProtectedRoutesContext.js";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -32,11 +33,13 @@ const Bootstrap = ({
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-        <HelmetProvider>
-          <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-            <RouterProvider router={router} />
-          </StaggeredRenderContext.Provider>
-        </HelmetProvider>
+        <BypassProtectedRoutesContext value={false}>
+          <HelmetProvider>
+            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+              <RouterProvider router={router} />
+            </StaggeredRenderContext.Provider>
+          </HelmetProvider>
+        </BypassProtectedRoutesContext>
       </HydrationBoundary>
     </QueryClientProvider>
   </StrictMode>
@@ -47,16 +50,20 @@ const BootstrapStatic = ({
   context,
   queryClient,
   helmetContext,
+  bypassProtection = false,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
   queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
+  bypassProtection?: boolean;
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HelmetProvider context={helmetContext}>
-        <StaticRouterProvider router={router} context={context} />
+        <BypassProtectedRoutesContext value={bypassProtection}>
+          <StaticRouterProvider router={router} context={context} />
+        </BypassProtectedRoutesContext>
       </HelmetProvider>
     </QueryClientProvider>
   </StrictMode>