zudoku 0.17.0 → 0.18.0

package/lib/zudoku.plugin-api-keys.js

@@ -1,19 +1,19 @@
 import { j as e } from "./jsx-runtime-B6kdoens.js";
-import { S as m, R as g } from "./SlotletProvider-mhjLPG44.js";
+import { D as g, S as m, R as f } from "./SlotletProvider-DyomlzGx.js";
 import { i as c } from "./invariant-Caa8-XvF.js";
-import { u as d, S as f, a as j, b as v, c as w, d as b, e as x } from "./Select-DYKDahHt.js";
-import { a as k } from "./index.esm-C5mr_sKO.js";
-import { a as K, L as u, O as N } from "./index-DM9hrcCG.js";
-import { u as h, d as I, g as S } from "./utils-DNAltzXc.js";
+import { u as d, S as j, a as v, b as w, c as b, d as k, e as x } from "./Select-O9ZM3ZgX.js";
+import { a as K } from "./index.esm-C5mr_sKO.js";
+import { L as u } from "./index-Yn8c3UWE.js";
+import { u as h, d as N, g as I } from "./utils-DcpDOncX.js";
 import { Button as l } from "./ui/Button.js";
-import { Input as A } from "./ui/Input.js";
-import { u as C } from "./hook-CjQERPa7.js";
-import { D as E } from "./DeveloperHint-DHdLXGHA.js";
+import { Input as S } from "./ui/Input.js";
+import { a as A, O as C } from "./index-Czzd9rjU.js";
+import { u as E } from "./hook-hEqe7fPB.js";
 import { RotateCwIcon as P, TrashIcon as D, EyeOffIcon as R, EyeIcon as q, CheckIcon as O, CopyIcon as z } from "lucide-react";
 import { useState as p } from "react";
 import { c as T } from "./cn-BmFQLtkS.js";
 const F = ({ service: t }) => {
-  const s = h(), r = K(), n = k({
+  const s = h(), r = A(), n = K({
     defaultValues: {
       expiresOn: "30"
     }
@@ -37,16 +37,16 @@ const F = ({ service: t }) => {
         onSubmit: n.handleSubmit((a) => o.mutate(a)),
         children: /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 flex-col", children: [
           "Note",
-          /* @__PURE__ */ e.jsx(A, { ...n.register("description") }),
+          /* @__PURE__ */ e.jsx(S, { ...n.register("description") }),
           "Expiration",
           /* @__PURE__ */ e.jsxs(
-            f,
+            j,
             {
               onValueChange: (a) => n.setValue("expiresOn", a),
               defaultValue: n.getValues("expiresOn"),
               children: [
-                /* @__PURE__ */ e.jsx(j, { children: /* @__PURE__ */ e.jsx(v, {}) }),
-                /* @__PURE__ */ e.jsx(w, { children: /* @__PURE__ */ e.jsxs(b, { children: [
+                /* @__PURE__ */ e.jsx(v, { children: /* @__PURE__ */ e.jsx(w, {}) }),
+                /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsxs(k, { children: [
                   [7, 30, 60, 90].map((a) => /* @__PURE__ */ e.jsxs(x, { value: String(a), children: [
                     a,
                     " days"
@@ -68,17 +68,17 @@ const F = ({ service: t }) => {
   const s = /* @__PURE__ */ new Date();
   return s.setDate(s.getDate() + t), s.toISOString();
 }, V = () => {
-  const t = C();
-  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(N, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
+  const t = E();
+  return t.isAuthEnabled && t.isPending ? null : t.isAuthenticated ? /* @__PURE__ */ e.jsx(C, {}) : t.isAuthEnabled ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: [
     "Please login first to view this page",
     /* @__PURE__ */ e.jsx(l, { onClick: () => t.login(), children: "Login" })
-  ] }) : /* @__PURE__ */ e.jsx("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: /* @__PURE__ */ e.jsxs(E, { className: "max-w-[600px]", children: [
+  ] }) : /* @__PURE__ */ e.jsx("div", { className: "flex flex-col justify-center gap-2 items-center h-1/2", children: /* @__PURE__ */ e.jsxs(g, { className: "max-w-[600px]", children: [
     "Authentication needs to be enabled for API keys to work. Enable it in your Zudoku configuration under ",
     /* @__PURE__ */ e.jsx("code", { children: "authentication" }),
     "."
   ] }) });
 }, M = ({ service: t }) => {
-  const s = h(), r = I(), { data: n } = S({
+  const s = h(), r = N(), { data: n } = I({
     queryFn: () => t.getKeys(s),
     queryKey: ["api-keys"],
     retry: !1
@@ -259,7 +259,7 @@ const F = ({ service: t }) => {
     getRoutes: () => [
       {
         element: /* @__PURE__ */ e.jsx(V, {}),
-        errorElement: /* @__PURE__ */ e.jsx(g, {}),
+        errorElement: /* @__PURE__ */ e.jsx(f, {}),
         children: [
           {
             path: "/settings/api-keys",

package/lib/zudoku.plugin-custom-pages.js

@@ -1,8 +1,8 @@
 import { j as o } from "./jsx-runtime-B6kdoens.js";
 import a from "react";
-import { P as n } from "./Markdown-D6UxMbZm.js";
+import { P as n } from "./Markdown-ievDDhFT.js";
 import { c } from "./cn-BmFQLtkS.js";
-import { u as p } from "./useExposedProps-BxyHjPNN.js";
+import { u as p } from "./useExposedProps-CTPtylCV.js";
 const u = ({
   element: t,
   render: s,

package/lib/zudoku.plugin-markdown.js

@@ -74,7 +74,7 @@ const C = (n) => ({
         const h = {
           path: r,
           lazy: async () => {
-            const { MdxPage: l } = await import("./MdxPage-DRKqyn2b.js"), { default: p, ...g } = await a();
+            const { MdxPage: l } = await import("./MdxPage-Bwn-VSsH.js"), { default: p, ...g } = await a();
             return {
               element: /* @__PURE__ */ P.jsx(
                 l,

package/lib/zudoku.plugin-openapi.js

@@ -1,15 +1,11 @@
 import "./jsx-runtime-B6kdoens.js";
-import { o as s } from "./index-BRg5pi5D.js";
-import "./utils-DNAltzXc.js";
+import { o as a } from "./index-DNxQ_rCt.js";
+import "./utils-DcpDOncX.js";
 import "lucide-react";
-import "zudoku/openapi-worker";
-import "./hook-CjQERPa7.js";
-import "./Markdown-D6UxMbZm.js";
+import "./hook-hEqe7fPB.js";
 import "./ui/Button.js";
-import "./urql-core-35Qt_U4i.js";
-import "./router-BsfSoK2j.js";
-import "./index-DM9hrcCG.js";
+import "./router-lfyopgBI.js";
 export {
-  s as openApiPlugin
+  a as openApiPlugin
 };
 //# sourceMappingURL=zudoku.plugin-openapi.js.map

package/lib/zudoku.plugin-openapi.js.map

@@ -1 +1 @@
-{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"zudoku.plugin-openapi.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/lib/zudoku.plugin-redirect.js

@@ -1,4 +1,4 @@
-import { r as o } from "./router-BsfSoK2j.js";
+import { r as o } from "./router-lfyopgBI.js";
 const a = (r) => ({
   getRoutes: () => r.redirects.map(({ from: e, to: t }) => ({
     path: e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -137,11 +137,11 @@
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.15",
-    "@tanstack/react-query": "5.59.13",
+    "@tanstack/react-query": "5.61.0",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.1",
-    "@zudoku/config": "0.17.0",
+    "@zudoku/config": "0.18.0",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.4",
     "autoprefixer": "10.4.20",
@@ -151,6 +151,7 @@
     "cmdk": "1.0.4",
     "dotenv": "16.4.5",
     "embla-carousel-react": "8.3.1",
+    "estree-util-value-to-estree": "3.2.1",
     "express": "4.21.1",
     "glob": "11.0.0",
     "graphql": "16.9.0",
@@ -161,6 +162,7 @@
     "loglevel": "1.9.2",
     "lru-cache": "11.0.1",
     "lucide-react": "0.452.0",
+    "next-themes": "0.4.3",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
@@ -185,6 +187,7 @@
     "rollup": "4.24.0",
     "semver": "7.6.3",
     "sitemap": "8.0.0",
+    "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
     "tailwind-merge": "2.5.4",
     "tailwindcss": "3.4.13",
@@ -192,6 +195,7 @@
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
     "vaul": "1.1.0",
+    "vfile": "6.0.3",
     "vite": "5.4.9",
     "yaml": "2.6.0",
     "yargs": "17.7.2",
@@ -200,19 +204,24 @@
     "zustand": "5.0.0"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/client-preset": "4.5.0",
+    "@types/estree": "1.0.6",
     "@types/express": "5.0.0",
     "@types/har-format": "1.2.15",
     "@types/json-schema": "7.0.15",
+    "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
     "@types/node": "20.16.11",
     "@types/object-hash": "3.0.6",
     "@types/react-is": "18.3.0",
     "@types/semver": "7.5.8",
     "@types/yargs": "17.0.33",
+    "mdast-util-mdx": "3.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup-plugin-visualizer": "5.12.0",
-    "typescript": "5.6.3"
+    "typescript": "5.7.2"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -229,6 +238,7 @@
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
     "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
     "clean": "tsc --build --clean",
+    "codegen": "graphql-codegen --config ./src/codegen.ts",
     "test": "node --test --enable-source-maps"
   },
   "module": "./dist/index.js",

package/src/app/demo.tsx

@@ -5,7 +5,6 @@ import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import DemoAnnouncement from "../lib/demo/DemoAnnouncement.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
-import { themeToggle } from "../lib/themeToggle.js";
 import "../lib/util/logInit.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -18,8 +17,6 @@ if (!apiUrl) {
   );
 }
 
-themeToggle();
-
 logger.info(`API URL: ${apiUrl}`);
 
 const root =

package/src/app/entry.client.tsx

@@ -38,6 +38,13 @@ async function hydrateLazyRoutes(routes: RouteObject[]) {
 function render(routes: RouteObject[]) {
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
+    future: {
+      v7_relativeSplatPath: true,
+      v7_fetcherPersist: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true,
+      v7_normalizeFormMethod: true,
+    },
   });
   createRoot(root).render(<Bootstrap router={router} />);
 }
@@ -46,6 +53,13 @@ async function hydrate(routes: RouteObject[]) {
   await hydrateLazyRoutes(routes);
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
+    future: {
+      v7_relativeSplatPath: true,
+      v7_fetcherPersist: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true,
+      v7_normalizeFormMethod: true,
+    },
   });
 
   hydrateRoot(root, <Bootstrap hydrate router={router} />);

package/src/app/entry.server.tsx

@@ -1,3 +1,4 @@
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 import { type HelmetData } from "@zudoku/react-helmet-async";
 import type express from "express";
 import logger from "loglevel";
@@ -11,7 +12,6 @@ import {
 import "virtual:zudoku-theme.css";
 import { BootstrapStatic, ServerError } from "zudoku/components";
 import type { ZudokuConfig } from "../config/config.js";
-import { ssr as urqlSsr } from "../lib/plugins/openapi/client/createMemoryClient.js";
 import type { FileWritingResponse } from "../vite/prerender.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -33,6 +33,7 @@ export const render = async ({
   const { query, dataRoutes } = createStaticHandler(routes, {
     basename: config.basePath,
   });
+  const queryClient = new QueryClient();
 
   const request =
     baseRequest instanceof Request
@@ -63,72 +64,73 @@ export const render = async ({
 
   const router = createStaticRouter(dataRoutes, context);
   const helmetContext = {} as HelmetData["context"];
-  const graphqlData = urqlSsr.extractData();
 
-  const { pipe } = renderToPipeableStream(
+  const App = (
     <BootstrapStatic
       router={router}
       context={context}
+      queryClient={queryClient}
       helmetContext={helmetContext}
-    />,
-    {
-      onShellError(error) {
-        response.status(500);
-        response.set({ "Content-Type": "text/html" });
-
-        const html = renderToStaticMarkup(<ServerError error={error} />);
-
-        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);
-
-        const transformStream = new Transform({
-          transform(chunk, encoding, callback) {
-            response.write(chunk, encoding);
-            callback();
-          },
-        });
-
-        const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
-
-        if (!htmlStart) {
-          throw new Error("No <!--app-html--> found in template");
-        }
+    />
+  );
+
+  const { pipe } = renderToPipeableStream(App, {
+    onShellError(error) {
+      response.status(500);
+      response.set({ "Content-Type": "text/html" });
+
+      const html = renderToStaticMarkup(<ServerError error={error} />);
+
+      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);
+
+      const transformStream = new Transform({
+        transform(chunk, encoding, callback) {
+          response.write(chunk, encoding);
+          callback();
+        },
+      });
+
+      const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
+
+      if (!htmlStart) {
+        throw new Error("No <!--app-html--> found in template");
+      }
+
+      response.write(
+        htmlStart.replace(
+          "<!--app-helmet-->",
+          [
+            helmetContext.helmet.title.toString(),
+            helmetContext.helmet.meta.toString(),
+            helmetContext.helmet.link.toString(),
+            helmetContext.helmet.style.toString(),
+            helmetContext.helmet.script.toString(),
+          ].join("\n"),
+        ),
+      );
 
-        response.write(
-          htmlStart.replace(
-            "<!--app-helmet-->",
-            [
-              helmetContext.helmet.title.toString(),
-              helmetContext.helmet.meta.toString(),
-              helmetContext.helmet.link.toString(),
-              helmetContext.helmet.style.toString(),
-              helmetContext.helmet.script.toString(),
-            ].join("\n"),
+      transformStream.on("finish", () => {
+        response.end(
+          htmlEnd?.replace(
+            "</body>",
+            `<script>window.DATA = ${JSON.stringify(dehydrate(queryClient))}</script></body>`,
           ),
         );
+      });
 
-        transformStream.on("finish", () => {
-          response.end(
-            htmlEnd?.replace(
-              "</body>",
-              `<script>window.__URQL_DATA__ = ${JSON.stringify(graphqlData)};</script></body>`,
-            ),
-          );
-        });
-
-        pipe(transformStream);
-      },
-      onError(error) {
-        status = 500;
-        logger.error(error);
-      },
+      pipe(transformStream);
     },
-  );
+    onError(error) {
+      status = 500;
+      logger.error(error);
+    },
+  });
 };
 
 export function createFetchRequest(

package/src/app/standalone.tsx

@@ -3,7 +3,6 @@ import { createBrowserRouter } from "react-router-dom";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
-import { themeToggle } from "../lib/themeToggle.js";
 import "../lib/util/logInit.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -13,8 +12,6 @@ if (!root) {
   throw new Error("No div found with attribute data-api-url");
 }
 
-themeToggle();
-
 const apiUrl = root.getAttribute("data-api-url");
 const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
 const logoUrl = root.getAttribute("data-logo-url");

package/src/lib/authentication/hook.ts

@@ -8,9 +8,7 @@ export const useAuth = () => {
 
   return {
     isAuthEnabled,
-    isPending: authState.isPending,
-    profile: authState.profile,
-    isAuthenticated: Boolean(authState.profile),
+    ...authState,
 
     login: async () => {
       if (!isAuthEnabled) {

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

@@ -25,17 +25,20 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
   };
 
   signOut = async (): Promise<void> => {
+    const as = await this.getAuthServer();
+    const idToken = await this.getAccessToken();
+
     useAuthState.setState({
       isAuthenticated: false,
       isPending: false,
-      profile: undefined,
+      profile: null,
+      providerData: null,
     });
-    sessionStorage.clear();
-    const as = await this.getAuthServer();
 
     const redirectUrl = new URL(
       window.location.origin + this.logoutRedirectUrlPath,
     );
+
     redirectUrl.pathname = this.logoutRedirectUrlPath;
 
     // SEE: https://auth0.com/docs/authenticate/login/logout/log-users-out-of-auth0
@@ -43,22 +46,24 @@ class Auth0AuthenticationProvider extends OpenIDAuthenticationProvider {
     // Logout End Session Endpoint Discovery is enabled by default.
     // Otherwise we fallback to the old non-compliant logout
 
-    let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
     // so we use the IdP logout. Otherwise, just redirect the user to home
     if (as.end_session_endpoint) {
-      logoutUrl = new URL(as.end_session_endpoint);
-      // TODO: get id_token and set hint
-      // const { id_token } = session;
-      // if (id_token) {
-      //   logoutUrl.searchParams.set("id_token_hint", id_token);
-      // }
+      const logoutUrl = new URL(as.end_session_endpoint);
+      if (idToken) {
+        logoutUrl.searchParams.set("id_token_hint", idToken);
+      }
       logoutUrl.searchParams.set(
         "post_logout_redirect_uri",
         redirectUrl.toString(),
       );
+
+      // window.location.href = logoutUrl.toString();
     } else {
-      logoutUrl = new URL(`${this.issuer}oidc/logout`);
+      const logoutUrl = new URL(
+        `${this.issuer.replace(/\/$/, "")}/oidc/logout`,
+      );
+      // window.location.href = logoutUrl.toString();
     }
   };
 }

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

@@ -107,7 +107,10 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       expiresOn: new Date(Date.now() + response.expires_in * 1000),
       tokenType: response.token_type,
     };
-    sessionStorage.setItem("token-state", JSON.stringify(tokens));
+
+    useAuthState.setState({
+      providerData: tokens,
+    });
   }
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
@@ -194,14 +197,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async getAccessToken(): Promise<string> {
     const as = await this.getAuthServer();
-    const tokenState = sessionStorage.getItem("token-state");
-    if (!tokenState) {
+    const { providerData } = useAuthState.getState();
+    if (!providerData) {
       throw new AuthorizationError("User is not authenticated");
     }
+    const tokenState = providerData as TokenState;
 
-    const state = JSON.parse(tokenState) as TokenState;
-    if (state.expiresOn < new Date()) {
-      if (!state.refreshToken) {
+    if (tokenState.expiresOn < new Date()) {
+      if (!tokenState.refreshToken) {
         await this.signIn();
         return "";
       }
@@ -209,7 +212,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       const request = await oauth.refreshTokenGrantRequest(
         as,
         this.client,
-        state.refreshToken,
+        tokenState.refreshToken,
       );
       const response = await oauth.processRefreshTokenResponse(
         as,
@@ -225,7 +228,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
       return response.access_token.toString();
     } else {
-      return state.accessToken;
+      return tokenState.accessToken;
     }
   }
 
@@ -234,8 +237,8 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       isAuthenticated: false,
       isPending: false,
       profile: undefined,
+      providerData: undefined,
     });
-    sessionStorage.clear();
 
     const as = await this.getAuthServer();
 
@@ -342,32 +345,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       profile,
     });
 
-    sessionStorage.setItem(
-      "profile-state",
-      JSON.stringify(useAuthState.getState().profile),
-    );
-
     const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
     sessionStorage.removeItem("redirect-to");
     return redirectTo;
   };
 
-  pageLoad(): void {
-    const profileState = sessionStorage.getItem("profile-state");
-    if (profileState) {
-      try {
-        const profile = JSON.parse(profileState);
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
-          profile,
-        });
-      } catch (err) {
-        logger.error("Error parsing auth state", err);
-      }
-    }
-  }
-
   getAuthenticationPlugin() {
     // TODO: This API is a bit messy, we need to refactor auth plugins/providers
     // to remove the extra layers of abstraction.

package/src/lib/authentication/state.ts

@@ -1,24 +1,58 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { shared } from "./use-broadcast/shared.js";
+import { create, type Mutate, type StoreApi } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 
-export interface AuthState {
+export interface AuthState<ProviderData = unknown> {
   isAuthenticated: boolean;
   isPending: boolean;
-  profile?: UserProfile;
+  profile: UserProfile | null;
+  providerData: ProviderData | null;
 }
 
-export const useAuthState = create<AuthState>(
-  shared(
-    (_) => ({
+export class Authentication {
+  async setLoggedIn(isLoggedIn: boolean) {}
+  async setProfile() {}
+  async setPersistentProviderData() {}
+}
+
+export type StoreWithPersist<T> = Mutate<
+  StoreApi<T>,
+  [["zustand/persist", unknown]]
+>;
+
+export 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(
+    (state) => ({
       isAuthenticated: false,
       isPending: false,
-      profile: undefined,
+      profile: null,
+      providerData: null,
     }),
-    { name: "auth-state" },
+    {
+      name: "auth-state",
+      storage: createJSONStorage(() => localStorage),
+      // partialize: (s) => ({ state: s }),
+    },
   ),
 );
 
+if (typeof window !== "undefined") {
+  withStorageDOMEvents(useAuthState);
+}
+
 export interface UserProfile {
   sub: string;
   email: string | undefined;