zudoku 0.63.0 → 0.64.0

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

@@ -1,14 +1,15 @@
 import { useEffect } from "react";
-import { useNavigate } from "react-router";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
 
 export const SignOut = () => {
-  const context = useZudoku();
-  const navigate = useNavigate();
+  const auth = useAuth();
+
+  const logout = useLatest(auth.logout);
 
   useEffect(() => {
-    void context.authentication?.signOut().then(() => navigate("/"));
-  }, [context.authentication, navigate]);
+    void logout.current();
+  }, [logout]);
 
   return null;
 };

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

@@ -7,14 +7,14 @@ import {
   CardHeader,
   CardTitle,
 } from "zudoku/ui/Card.js";
-import { useZudoku } from "../../components/context/ZudokuContext.js";
+import { useAuth } from "../hook.js";
 
 export const SignUp = () => {
-  const context = useZudoku();
+  const auth = useAuth();
 
   useEffect(() => {
-    void (context.authentication?.signUp() ?? context.authentication?.signIn());
-  }, [context.authentication]);
+    void auth.signup();
+  }, [auth]);
 
   return (
     <div className="flex items-center justify-center mt-8">
@@ -28,10 +28,7 @@ export const SignUp = () => {
         </CardHeader>
         <CardContent>
           <div className="flex flex-col gap-2 justify-center">
-            <Button
-              onClick={() => context.authentication?.signIn()}
-              variant="default"
-            >
+            <Button onClick={() => auth.signup()} variant="default">
               Register
             </Button>
             <Button variant="link" className="text-muted-foreground" asChild>

package/src/lib/authentication/hook.ts

@@ -1,4 +1,6 @@
+import { useNavigate } from "react-router";
 import { useZudoku } from "../components/context/ZudokuContext.js";
+import type { AuthActionOptions } from "./authentication.js";
 import { useAuthState } from "./state.js";
 
 export type UseAuthReturn = ReturnType<typeof useAuth>;
@@ -7,19 +9,24 @@ export const useAuth = () => {
   const { authentication } = useZudoku();
   const authState = useAuthState();
   const isAuthEnabled = typeof authentication !== "undefined";
+  const navigate = useNavigate();
 
   return {
     isAuthEnabled,
     ...authState,
 
-    login: async () => {
+    login: async (options?: AuthActionOptions) => {
       if (!isAuthEnabled) {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.signIn({
-        redirectTo: window.location.href,
-      });
+      await authentication.signIn(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
     },
 
     logout: async () => {
@@ -27,19 +34,23 @@ export const useAuth = () => {
         throw new Error("Authentication is not enabled.");
       }
       // TODO: Should handle errors/state
-      await authentication.signOut();
+      await authentication.signOut({ navigate });
 
       // Redirect to home
-      window.location.href = "/";
+      void navigate("/", { replace: true });
     },
 
-    signup: async () => {
+    signup: async (options?: AuthActionOptions) => {
       if (!isAuthEnabled) {
         throw new Error("Authentication is not enabled.");
       }
-      await authentication.signUp({
-        redirectTo: window.location.href,
-      });
+      await authentication.signUp(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
     },
   };
 };

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

@@ -1,5 +1,6 @@
 import type { Auth0AuthenticationConfig } from "../../../config/config.js";
 import type {
+  AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -35,7 +36,7 @@ class Auth0AuthenticationProvider
     }
   };
 
-  signOut = async (): Promise<void> => {
+  signOut = async (_: AuthActionContext): Promise<void> => {
     const as = await this.getAuthServer();
     const idToken = await this.getAccessToken();
 

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

@@ -6,6 +6,7 @@ import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
+  AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -106,7 +107,10 @@ export class AzureB2CAuthPlugin
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp(
+    _: AuthActionContext,
+    { redirectTo }: { redirectTo?: string } = {},
+  ) {
     const redirectUri = this.redirectToAfterSignUp ?? redirectTo ?? "/";
     sessionStorage.setItem("redirect-to", redirectUri);
 
@@ -116,7 +120,10 @@ export class AzureB2CAuthPlugin
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn(
+    _: AuthActionContext,
+    { redirectTo }: { redirectTo?: string } = {},
+  ) {
     const redirectUri = this.redirectToAfterSignIn ?? redirectTo ?? "/";
     sessionStorage.setItem("redirect-to", redirectUri);
 
@@ -156,7 +163,7 @@ export class AzureB2CAuthPlugin
     return request;
   };
 
-  signOut = async () => {
+  signOut = async (_: AuthActionContext) => {
     const account = this.msalInstance.getAllAccounts()[0];
     if (account) {
       await this.msalInstance.logoutRedirect({

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

@@ -3,6 +3,7 @@ import { LogOutIcon } from "lucide-react";
 import type { ZudokuPlugin } from "zudoku/plugins";
 import type { ClerkAuthenticationConfig } from "../../../config/config.js";
 import type {
+  AuthActionContext,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -147,7 +148,10 @@ const clerkAuth: AuthenticationProviderInitializer<
       });
       useAuthState.getState().setLoggedOut();
     },
-    signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
+    signIn: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignIn({
         signInForceRedirectUrl: redirectToAfterSignIn
@@ -158,7 +162,10 @@ const clerkAuth: AuthenticationProviderInitializer<
           : redirectTo,
       });
     },
-    signUp: async ({ redirectTo }: { redirectTo?: string } = {}) => {
+    signUp: async (
+      _: AuthActionContext,
+      { redirectTo }: { redirectTo?: string } = {},
+    ) => {
       await ensureLoaded;
       await clerkApi?.redirectToSignUp({
         signInForceRedirectUrl: redirectToAfterSignIn

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

@@ -1,11 +1,14 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
 import { ErrorBoundary } from "react-error-boundary";
+import type { NavigateFunction } from "react-router";
 import type { OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
+  AuthActionContext,
+  AuthActionOptions,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
@@ -115,13 +118,16 @@ export class OpenIDAuthenticationProvider
     });
   }
 
-  async signUp({
-    redirectTo,
-    replace = false,
-  }: {
-    redirectTo?: string;
-    replace?: boolean;
-  } = {}) {
+  async signUp(
+    _: { navigate: NavigateFunction },
+    {
+      redirectTo,
+      replace = false,
+    }: {
+      redirectTo?: string;
+      replace?: boolean;
+    } = {},
+  ) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
       replace,
@@ -129,13 +135,10 @@ export class OpenIDAuthenticationProvider
     });
   }
 
-  async signIn({
-    redirectTo,
-    replace = false,
-  }: {
-    redirectTo?: string;
-    replace?: boolean;
-  } = {}) {
+  async signIn(
+    _: AuthActionContext,
+    { redirectTo, replace = false }: AuthActionOptions,
+  ) {
     return this.authorize({
       redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
       replace,
@@ -178,6 +181,7 @@ export class OpenIDAuthenticationProvider
     const redirectUrl = new URL(window.location.origin);
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
+    redirectUrl.hash = "";
 
     authorizationUrl.searchParams.set("client_id", this.client.client_id);
     authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
@@ -260,7 +264,7 @@ export class OpenIDAuthenticationProvider
     return request;
   };
 
-  signOut = async () => {
+  signOut = async (_: AuthActionContext) => {
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
@@ -384,6 +388,7 @@ export class OpenIDAuthenticationProvider
     const redirectUrl = new URL(url);
     redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
+    redirectUrl.hash = "";
 
     const response = await oauth.authorizationCodeGrantRequest(
       authServer,

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

@@ -0,0 +1,75 @@
+import { Auth } from "@supabase/auth-ui-react";
+import {
+  ThemeSupa,
+  type ThemeVariables,
+  type ViewType,
+} from "@supabase/auth-ui-shared";
+import type { SupabaseClient } from "@supabase/supabase-js";
+import { useSearchParams } from "react-router";
+import type { SupabaseAuthenticationConfig } from "../../../../config/config.js";
+import { Heading } from "../../../components/Heading.js";
+
+export const SupabaseAuthUI = ({
+  client,
+  config,
+  view = "sign_in",
+}: {
+  client: SupabaseClient;
+  config: SupabaseAuthenticationConfig;
+  view: ViewType;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const providers = config.provider ? [config.provider] : config.providers;
+  const root = config.basePath ?? "/";
+  const redirectToAfterSignUp =
+    redirectTo ?? config.redirectToAfterSignUp ?? root;
+  const redirectToAfterSignIn =
+    redirectTo ?? config.redirectToAfterSignIn ?? root;
+  const redirectToAfterSignOut =
+    redirectTo ?? config.redirectToAfterSignOut ?? root;
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="max-w-md w-full mt-10">
+        <Heading level={1}>
+          {view === "sign_in" ? "Sign in" : "Sign up"}
+        </Heading>
+        <Auth
+          view={view}
+          redirectToAfterSignIn={redirectToAfterSignIn}
+          redirectToAfterSignUp={redirectToAfterSignUp}
+          redirectToAfterSignOut={redirectToAfterSignOut}
+          supabaseClient={client}
+          onlyThirdPartyProviders={config.onlyThirdPartyProviders}
+          appearance={{
+            theme: ThemeSupa,
+            variables: {
+              default: {
+                colors: {
+                  dividerBackground: "var(--border)",
+                  brand: "var(--primary)",
+                  brandAccent: "hsla(from var(--primary) h s l / 0.8)",
+                  brandButtonText: "var(--primary-foreground)",
+                  defaultButtonBorder: "var(--border)",
+                  inputBorder: "var(--border)",
+                  inputText: "var(--foreground)",
+                  inputBorderHover: "var(--accent)",
+                  defaultButtonBackground: "var(--secondary)",
+                  defaultButtonBackgroundHover: "var(--accent)",
+                },
+                radii: {
+                  borderRadiusButton: "var(--radius)",
+                  buttonBorderRadius: "var(--radius)",
+                  inputBorderRadius: "var(--radius)",
+                },
+              } satisfies ThemeVariables,
+            },
+          }}
+          providers={providers}
+          redirectTo={config.redirectToAfterSignIn ?? "/"}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -7,46 +7,38 @@ import {
 import type { SupabaseAuthenticationConfig } from "../../../config/config.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
+  AuthActionContext,
+  AuthActionOptions,
   AuthenticationPlugin,
   AuthenticationProviderInitializer,
 } from "../authentication.js";
+import { SignOut } from "../components/SignOut.js";
 import { AuthorizationError } from "../errors.js";
 import { type UserProfile, useAuthState } from "../state.js";
+import { SupabaseAuthUI } from "./supabase/SupabaseAuthUI.js";
 
 class SupabaseAuthenticationProvider
   extends CoreAuthenticationPlugin
   implements AuthenticationPlugin
 {
   private readonly client: SupabaseClient;
-  private readonly provider: Provider;
-  private readonly redirectToAfterSignUp: string;
-  private readonly redirectToAfterSignIn: string;
-  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Keep around
-  private readonly redirectToAfterSignOut: string;
-
-  constructor({
-    supabaseUrl,
-    supabaseKey,
-    provider,
-    redirectToAfterSignUp,
-    redirectToAfterSignIn,
-    redirectToAfterSignOut,
-    basePath,
-  }: SupabaseAuthenticationConfig) {
+  private readonly providers: Provider[];
+  private readonly config: SupabaseAuthenticationConfig;
+
+  constructor(config: SupabaseAuthenticationConfig) {
+    const { provider, providers, supabaseUrl, supabaseKey } = config;
     super();
-    this.provider = provider;
+    this.providers = providers ?? (provider ? [provider] : []);
+    if (this.providers.length === 0) {
+      throw new Error("At least one provider must be provided");
+    }
     this.client = createClient(supabaseUrl, supabaseKey, {
       auth: {
         autoRefreshToken: true,
         persistSession: true,
       },
     });
-
-    const root = basePath ?? "/";
-
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+    this.config = config;
 
     this.client.auth.onAuthStateChange(async (event, session) => {
       if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
@@ -90,31 +82,55 @@ class SupabaseAuthenticationProvider
     return request;
   }
 
-  signUp = async ({ redirectTo }: { redirectTo?: string }) => {
-    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignUp;
+  signUp = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signup?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signup`,
+    );
+  };
 
-    // Open Supabase Auth UI in a new window
-    await this.client.auth.signInWithOAuth({
-      provider: this.provider,
-      options: {
-        redirectTo: window.location.origin + finalRedirectTo,
-      },
-    });
+  signIn = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    void navigate(
+      redirectTo
+        ? `/signin?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/signin`,
+    );
   };
 
-  signIn = async ({ redirectTo }: { redirectTo?: string }) => {
-    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignIn;
-
-    await this.client.auth.signInWithOAuth({
-      provider: this.provider,
-      options: {
-        redirectTo: window.location.origin + finalRedirectTo,
-        queryParams: {
-          access_type: "offline",
-          prompt: "consent",
-        },
+  getRoutes = () => {
+    return [
+      {
+        path: "/signin",
+        element: (
+          <SupabaseAuthUI
+            view="sign_in"
+            client={this.client}
+            config={this.config}
+          />
+        ),
       },
-    });
+      {
+        path: "/signup",
+        element: (
+          <SupabaseAuthUI
+            view="sign_up"
+            client={this.client}
+            config={this.config}
+          />
+        ),
+      },
+      {
+        path: "/signout",
+        element: <SignOut />,
+      },
+    ];
   };
 
   signOut = async () => {

package/src/lib/authentication/state.ts

@@ -1,5 +1,6 @@
-import { create, type Mutate, type StoreApi } from "zustand";
+import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../util/syncZustandState.js";
 
 export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
@@ -17,25 +18,6 @@ export interface AuthState<ProviderData = unknown> {
   }) => void;
 }
 
-export type StoreWithPersist<T> = Mutate<
-  StoreApi<T>,
-  [["zustand/persist", unknown]]
->;
-
-const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
-  const storageEventCallback = (e: StorageEvent) => {
-    if (e.key === store.persist.getOptions().name && e.newValue) {
-      void store.persist.rehydrate();
-    }
-  };
-
-  window.addEventListener("storage", storageEventCallback);
-
-  return () => {
-    window.removeEventListener("storage", storageEventCallback);
-  };
-};
-
 export const useAuthState = create<AuthState>()(
   persist(
     (set) => ({
@@ -85,9 +67,7 @@ export const useAuthState = create<AuthState>()(
   ),
 );
 
-if (typeof window !== "undefined") {
-  withStorageDOMEvents(useAuthState);
-}
+syncZustandState(useAuthState);
 
 export interface UserProfile {
   sub: string;

package/src/lib/components/Zudoku.tsx

@@ -32,7 +32,7 @@ import { ZudokuProvider } from "./context/ZudokuProvider.js";
 
 let zudokuContext: ZudokuContext | undefined;
 
-const ZudokoInner = memo(
+const ZudokuInner = memo(
   ({ children, ...props }: PropsWithChildren<ZudokuContextOptions>) => {
     const components = useMemo(
       () => ({ ...DEFAULT_COMPONENTS, ...props.overrides }),
@@ -105,12 +105,12 @@ const ZudokoInner = memo(
   },
 );
 
-ZudokoInner.displayName = "ZudokoInner";
+ZudokuInner.displayName = "ZudokuInner";
 
 const Zudoku = (props: ZudokuContextOptions) => {
   return (
     <ErrorBoundary FallbackComponent={TopLevelError}>
-      <ZudokoInner {...props} />
+      <ZudokuInner {...props} />
     </ErrorBoundary>
   );
 };

package/src/lib/components/navigation/Toc.tsx

@@ -85,11 +85,11 @@ export const Toc = ({ entries }: { entries: TocEntry[] }) => {
         <ListTreeIcon size={16} />
         On this page
       </div>
-      <div className="relative ms-2 ps-4">
-        <div className="absolute inset-0 end-auto bg-border w-[2px]" />
+      <div className="relative ms-px ps-4">
+        <div className="absolute inset-0 end-auto bg-border w-[1.5px]" />
         <div
           className={cn(
-            "absolute -start-px -translate-y-1 h-6 w-[4px] rounded-sm bg-primary",
+            "absolute start-0 -translate-y-1 h-6 w-[2.5px] bg-primary",
             paintedOnce.current &&
               "ease-out [transition:top_150ms,opacity_325ms]",
           )}

package/src/lib/core/RouteGuard.tsx

@@ -1,11 +1,12 @@
-import { useQuery } from "@tanstack/react-query";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { use } from "react";
 import { matchPath, Outlet, useLocation, useNavigate } from "react-router";
+import { Button } from "zudoku/ui/Button.js";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "zudoku/ui/Dialog.js";
@@ -37,17 +38,9 @@ export const RouteGuard = () => {
   const needsToSignIn =
     isProtectedRoute && !authCheckFn({ auth, context: zudoku });
 
-  useQuery({
-    queryKey: ["login-redirect"],
-    queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1200));
-      await zudoku.authentication?.signIn({
-        redirectTo: latestPath.current,
-      });
-      return true;
-    },
-    enabled: typeof window !== "undefined" && needsToSignIn && !auth.isPending,
-  });
+  if (needsToSignIn && auth.isPending && typeof window !== "undefined") {
+    return null;
+  }
 
   if (needsToSignIn) {
     return (
@@ -61,11 +54,38 @@ export const RouteGuard = () => {
       >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Logging you in...</DialogTitle>
+            <DialogTitle>Login to continue</DialogTitle>
           </DialogHeader>
           <DialogDescription>
             Please wait while we log you in.
           </DialogDescription>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => void navigate(-1)}>
+              Cancel
+            </Button>
+            <div className="w-full"></div>
+            <Button
+              variant="secondary"
+              onClick={() =>
+                void zudoku.authentication?.signUp(
+                  { navigate },
+                  { redirectTo: latestPath.current },
+                )
+              }
+            >
+              Register
+            </Button>
+            <Button
+              onClick={() =>
+                void zudoku.authentication?.signIn(
+                  { navigate },
+                  { redirectTo: latestPath.current },
+                )
+              }
+            >
+              Login{" "}
+            </Button>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     );

package/src/lib/core/ZudokuContext.ts

@@ -129,6 +129,7 @@ export class ZudokuContext {
   public meta: ZudokuContextOptions["metadata"];
   public site: ZudokuContextOptions["site"];
   public readonly authentication?: ZudokuContextOptions["authentication"];
+  public readonly getAuthState: () => AuthState;
   public readonly queryClient: QueryClient;
   public readonly options: ZudokuContextOptions;
   private readonly navigationPlugins: NavigationPlugin[];
@@ -156,6 +157,8 @@ export class ZudokuContext {
     this.navigation = options.navigation ?? [];
     this.navigationPlugins = this.plugins.filter(isNavigationPlugin);
     this.authentication = this.plugins.find(isAuthenticationPlugin);
+    this.getAuthState = useAuthState.getState;
+
     this.meta = options.metadata;
     this.site = options.site;
     this.plugins.forEach((plugin) => {