@lukoweb/apitogo 0.1.24 → 0.1.37

package/src/lib/authentication/providers/util.ts

@@ -1,26 +1,26 @@
-export const getClerkFrontendApi = (publishableKey: string) => {
-  // Split by underscore and get the base64 encoded part (3rd segment)
-  const parts = publishableKey.split("_");
-  if (parts.length !== 3 || !parts[2]) {
-    throw new Error("Invalid Clerk publishable key");
-  }
-
-  let decoded: string;
-  try {
-    decoded = atob(parts[2]);
-  } catch {
-    throw new Error("Failed to decode publishable key");
-  }
-
-  if (!decoded.endsWith("$")) {
-    throw new Error("Invalid Clerk publishable key");
-  }
-
-  const frontendApi = decoded.slice(0, -1);
-
-  if (frontendApi.includes("$") || !frontendApi.includes(".")) {
-    throw new Error("Invalid Clerk publishable key");
-  }
-
-  return frontendApi;
-};
+export const getClerkFrontendApi = (publishableKey: string) => {
+  // Split by underscore and get the base64 encoded part (3rd segment)
+  const parts = publishableKey.split("_");
+  if (parts.length !== 3 || !parts[2]) {
+    throw new Error("Invalid Clerk publishable key");
+  }
+
+  let decoded: string;
+  try {
+    decoded = atob(parts[2]);
+  } catch {
+    throw new Error("Failed to decode publishable key");
+  }
+
+  if (!decoded.endsWith("$")) {
+    throw new Error("Invalid Clerk publishable key");
+  }
+
+  const frontendApi = decoded.slice(0, -1);
+
+  if (frontendApi.includes("$") || !frontendApi.includes(".")) {
+    throw new Error("Invalid Clerk publishable key");
+  }
+
+  return frontendApi;
+};

package/src/lib/authentication/state.ts

@@ -1,91 +1,179 @@
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
-import { syncZustandState } from "../util/syncZustandState.js";
-
-/**
- * Registry interface for provider-specific data types.
- * Providers augment this via declaration merging:
- *
- * ```ts
- * declare module "../state.js" {
- *   interface ProviderDataRegistry {
- *     myProvider: MyProviderData;
- *   }
- * }
- * ```
- */
-// biome-ignore lint/suspicious/noEmptyInterface: Intended to be augmented via declaration merging by auth providers
-export interface ProviderDataRegistry {}
-
-export type ProviderData = [keyof ProviderDataRegistry] extends [never]
-  ? unknown
-  : ProviderDataRegistry[keyof ProviderDataRegistry];
-
-export interface AuthState {
-  isAuthenticated: boolean;
-  isPending: boolean;
-  profile: UserProfile | null;
-  providerData: ProviderData | null;
-  setAuthenticationPending: () => void;
-  setLoggedOut: () => void;
-  setLoggedIn: (args: {
-    profile: UserProfile;
-    providerData: ProviderData;
-  }) => void;
-}
-
-export const authState = create<AuthState>()(
-  persist(
-    (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 }) =>
-        set(() => ({
-          isAuthenticated: true,
-          isPending: false,
-          profile,
-          providerData,
-        })),
-    }),
-    {
-      merge: (persistedState, currentState) => {
-        return {
-          ...currentState,
-          isPending: false,
-          ...(typeof persistedState === "object" ? persistedState : {}),
-        };
-      },
-      name: "auth-state",
-      storage: createJSONStorage(() => localStorage),
-    },
-  ),
-);
-
-syncZustandState(authState);
-
-export const useAuthState = authState;
-
-export interface UserProfile {
-  sub: string;
-  email: string | undefined;
-  emailVerified: boolean;
-  name: string | undefined;
-  pictureUrl: string | undefined;
-  [key: string]: string | boolean | undefined;
-}
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { syncZustandState } from "../util/syncZustandState.js";
+
+/**
+ * Registry interface for provider-specific data types.
+ * Providers augment this via declaration merging:
+ *
+ * ```ts
+ * declare module "../state.js" {
+ *   interface ProviderDataRegistry {
+ *     myProvider: MyProviderData;
+ *   }
+ * }
+ * ```
+ */
+// biome-ignore lint/suspicious/noEmptyInterface: Intended to be augmented via declaration merging by auth providers
+export interface ProviderDataRegistry {}
+
+export type ProviderData = [keyof ProviderDataRegistry] extends [never]
+  ? unknown
+  : ProviderDataRegistry[keyof ProviderDataRegistry];
+
+export type AuthMode = "live" | "preview";
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  isPending: boolean;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
+  /** False when dev-portal backend is unavailable (local preview). Defaults true. */
+  isBackendAvailable: boolean;
+  /** Live when backend auth is reachable; preview otherwise. */
+  authMode: AuthMode;
+  setAuthenticationPending: () => void;
+  setLoggedOut: () => void;
+  setLoggedIn: (args: {
+    profile: UserProfile;
+    providerData: ProviderData;
+  }) => void;
+}
+
+type AuthStateStore = ReturnType<typeof createAuthStateStore>;
+
+/**
+ * Vite SSR/dev can load authentication modules more than once (app + plugins),
+ * which would otherwise create duplicate Zustand stores. The header would read
+ * one store while dev-portal auth writes another.
+ */
+declare global {
+  var __APITOGO_AUTH_STATE: AuthStateStore | undefined;
+}
+
+function createAuthStateStore(): AuthStateStore {
+  return create<AuthState>()(
+    persist(
+      (set) => ({
+        isAuthenticated: false,
+        isPending: true,
+        profile: null,
+        providerData: null,
+        isBackendAvailable: true,
+        authMode: "live",
+        setAuthenticationPending: () =>
+          set(() => ({
+            isAuthenticated: false,
+            isPending: false,
+            profile: null,
+            providerData: null,
+            isBackendAvailable: true,
+            authMode: "live",
+          })),
+        setLoggedOut: () =>
+          set(() => ({
+            isAuthenticated: false,
+            isPending: false,
+            profile: null,
+            providerData: null,
+            isBackendAvailable: true,
+            authMode: "live",
+          })),
+        setLoggedIn: ({ profile, providerData }) =>
+          set(() => ({
+            isAuthenticated: true,
+            isPending: false,
+            profile,
+            providerData,
+          })),
+      }),
+      {
+        version: 1,
+        migrate: (persistedState, version) => {
+          const persisted =
+            typeof persistedState === "object" && persistedState !== null
+              ? (persistedState as Partial<AuthState>)
+              : {};
+
+          // v0 stored full auth identity in localStorage; keep only backend metadata.
+          if (version === 0) {
+            return {
+              isBackendAvailable: persisted.isBackendAvailable,
+              authMode: persisted.authMode,
+            };
+          }
+
+          return persisted;
+        },
+        merge: (persistedState, currentState) => {
+          const persisted =
+            typeof persistedState === "object" && persistedState !== null
+              ? (persistedState as Partial<AuthState>)
+              : {};
+
+          // Cookie/session auth is refreshed from the backend on load. Do not
+          // restore identity fields from localStorage or OIDC return looks logged out.
+          return {
+            ...currentState,
+            isPending: false,
+            isAuthenticated: currentState.isAuthenticated,
+            profile: currentState.profile,
+            providerData: currentState.providerData,
+            isBackendAvailable:
+              persisted.isBackendAvailable ?? currentState.isBackendAvailable,
+            authMode: persisted.authMode ?? currentState.authMode,
+          };
+        },
+        partialize: (state) => ({
+          isBackendAvailable: state.isBackendAvailable,
+          authMode: state.authMode,
+        }),
+        name: "auth-state",
+        storage: createJSONStorage(() => localStorage),
+      },
+    ),
+  );
+}
+
+globalThis.__APITOGO_AUTH_STATE ??= createAuthStateStore();
+
+export const authState = globalThis.__APITOGO_AUTH_STATE;
+
+syncZustandState(authState);
+
+export const useAuthState = authState;
+
+/** Wait until persisted auth metadata has rehydrated from localStorage. */
+export const waitForAuthStateHydration = (): Promise<void> => {
+  if (typeof window === "undefined") {
+    return Promise.resolve();
+  }
+
+  const { persist } = useAuthState;
+
+  return new Promise((resolve) => {
+    const finish = () => {
+      // Let hydration merge flush before /auth/me refresh runs.
+      queueMicrotask(resolve);
+    };
+
+    if (persist.hasHydrated()) {
+      finish();
+      return;
+    }
+
+    const unsubscribe = persist.onFinishHydration(() => {
+      unsubscribe();
+      finish();
+    });
+  });
+};
+
+export interface UserProfile {
+  sub: string;
+  email: string | undefined;
+  emailVerified: boolean;
+  name: string | undefined;
+  pictureUrl: string | undefined;
+  [key: string]: string | boolean | undefined;
+}

package/src/lib/authentication/ui/icons/Apple.tsx

@@ -1,10 +1,10 @@
-import type { SVGProps } from "react";
-
-const AppleIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <title>{"Apple"}</title>
-    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
-  </svg>
-);
-
-export default AppleIcon;
+import type { SVGProps } from "react";
+
+const AppleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>{"Apple"}</title>
+    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+  </svg>
+);
+
+export default AppleIcon;

package/src/lib/authentication/ui/icons/Facebook.tsx

@@ -1,15 +1,15 @@
-import type { SVGProps } from "react";
-
-const FacebookIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    fill="#0866FF"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <title>{"Facebook"}</title>
-    <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
-  </svg>
-);
-
-export default FacebookIcon;
+import type { SVGProps } from "react";
+
+const FacebookIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="#0866FF"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>{"Facebook"}</title>
+    <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
+  </svg>
+);
+
+export default FacebookIcon;

package/src/lib/authentication/ui/icons/Github.tsx

@@ -1,16 +1,16 @@
-import type { SVGProps } from "react";
-
-const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    {...props}
-  >
-    <title>{"GitHub"}</title>
-    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-  </svg>
-);
-
-export default GithubIcon;
+import type { SVGProps } from "react";
+
+const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>{"GitHub"}</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+);
+
+export default GithubIcon;

package/src/lib/authentication/ui/icons/Google.tsx

@@ -1,16 +1,16 @@
-import type { SVGProps } from "react";
-
-const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    {...props}
-  >
-    <title>{"Google"}</title>
-    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
-  </svg>
-);
-
-export default GoogleIcon;
+import type { SVGProps } from "react";
+
+const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>{"Google"}</title>
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
+  </svg>
+);
+
+export default GoogleIcon;

package/src/lib/authentication/ui/icons/Microsoft.tsx

@@ -1,12 +1,12 @@
-import type { SVGProps } from "react";
-
-const MicrosoftIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path fill="#f25022" d="M1 1h9v9H1z" />
-    <path fill="#00a4ef" d="M1 11h9v9H1z" />
-    <path fill="#7fba00" d="M11 1h9v9h-9z" />
-    <path fill="#ffb900" d="M11 11h9v9h-9z" />
-  </svg>
-);
-
-export default MicrosoftIcon;
+import type { SVGProps } from "react";
+
+const MicrosoftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fill="#f25022" d="M1 1h9v9H1z" />
+    <path fill="#00a4ef" d="M1 11h9v9H1z" />
+    <path fill="#7fba00" d="M11 1h9v9h-9z" />
+    <path fill="#ffb900" d="M11 11h9v9h-9z" />
+  </svg>
+);
+
+export default MicrosoftIcon;

package/src/lib/authentication/ui/icons/X.tsx

@@ -1,10 +1,10 @@
-import type { SVGProps } from "react";
-
-const XIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <title>{"X"}</title>
-    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
-  </svg>
-);
-
-export default XIcon;
+import type { SVGProps } from "react";
+
+const XIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>{"X"}</title>
+    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
+  </svg>
+);
+
+export default XIcon;

package/src/lib/authentication/utils/relativeRedirectUrl.ts

@@ -1,16 +1,16 @@
-import { joinUrl } from "../../util/joinUrl.js";
-
-export const getRelativeRedirectUrl = (redirectTo?: string | null) => {
-  if (!redirectTo) {
-    return "/";
-  }
-
-  if (typeof window === "undefined") {
-    return redirectTo;
-  }
-
-  return redirectTo.replace(
-    joinUrl(window.location.origin, import.meta.env.BASE_URL),
-    "",
-  );
-};
+import { joinUrl } from "../../util/joinUrl.js";
+
+export const getRelativeRedirectUrl = (redirectTo?: string | null) => {
+  if (!redirectTo) {
+    return "/";
+  }
+
+  if (typeof window === "undefined") {
+    return redirectTo;
+  }
+
+  return redirectTo.replace(
+    joinUrl(window.location.origin, import.meta.env.BASE_URL),
+    "",
+  );
+};

package/src/lib/components/AnchorLink.tsx

@@ -1,24 +1,24 @@
-import type { MouseEvent } from "react";
-import { NavLink, type NavLinkProps, useHref, useLocation } from "react-router";
-import { useScrollToHash } from "../util/useScrollToAnchor.js";
-
-/**
- * Link that scrolls to anchor even if the hash is already set in the URL.
- */
-export const AnchorLink = (props: NavLinkProps) => {
-  const location = useLocation();
-  const scrollToHash = useScrollToHash();
-  const href = useHref(props.to);
-  const [pathname, hash] = href.split("#");
-
-  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    props.onClick?.(event);
-    if (hash !== location.hash.slice(1) || pathname !== location.pathname)
-      return;
-
-    event.preventDefault();
-    scrollToHash(hash);
-  };
-
-  return <NavLink {...props} onClick={handleClick} />;
-};
+import type { MouseEvent } from "react";
+import { NavLink, type NavLinkProps, useHref, useLocation } from "react-router";
+import { useScrollToHash } from "../util/useScrollToAnchor.js";
+
+/**
+ * Link that scrolls to anchor even if the hash is already set in the URL.
+ */
+export const AnchorLink = (props: NavLinkProps) => {
+  const location = useLocation();
+  const scrollToHash = useScrollToHash();
+  const href = useHref(props.to);
+  const [pathname, hash] = href.split("#");
+
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+    props.onClick?.(event);
+    if (hash !== location.hash.slice(1) || pathname !== location.pathname)
+      return;
+
+    event.preventDefault();
+    scrollToHash(hash);
+  };
+
+  return <NavLink {...props} onClick={handleClick} />;
+};