@civic/auth 0.0.1-beta.16 → 0.0.1-beta.18

package/dist/react.mjs

@@ -2,7 +2,7 @@ import {
   NextjsClientStorage,
   resolveAuthConfig,
   resolveCallbackUrl
-} from "./chunk-FBU2CKWK.mjs";
+} from "./chunk-5XL2ST72.mjs";
 import {
   BrowserAuthenticationInitiator,
   BrowserAuthenticationService,
@@ -18,7 +18,7 @@ import {
   generateState,
   getUser,
   isWindowInIframe
-} from "./chunk-RKQDQJOM.mjs";
+} from "./chunk-G3P5TIO2.mjs";
 import {
   __async,
   __objRest,
@@ -60,32 +60,16 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useContext as useContext2 } from "react";
 
 // src/react/providers/SessionProvider.tsx
-import {
-  createContext as createContext2
-} from "react";
+import { createContext as createContext2 } from "react";
 import { jsx } from "react/jsx-runtime";
 var defaultSession = {
   authenticated: false,
   idToken: void 0,
   accessToken: void 0,
-  displayMode: "iframe",
-  iframeRef: null,
-  setAuthResponseUrl: () => {
-  }
+  displayMode: "iframe"
 };
 var SessionContext = createContext2(defaultSession);
-var SessionProvider = ({
-  children,
-  session,
-  iframeRef,
-  setAuthResponseUrl
-}) => /* @__PURE__ */ jsx(
-  SessionContext.Provider,
-  {
-    value: __spreadProps(__spreadValues({}, session || defaultSession), { iframeRef, setAuthResponseUrl }),
-    children
-  }
-);
+var SessionProvider = ({ children, session }) => /* @__PURE__ */ jsx(SessionContext.Provider, { value: __spreadValues(__spreadValues({}, defaultSession), session || {}), children });
 
 // src/react/hooks/useSession.tsx
 var useSession = () => {
@@ -328,7 +312,7 @@ var CivicAuthIframeContainer = ({
   const [isLoading, setIsLoading] = useState(true);
   const { isLoading: isAuthLoading } = useAuth();
   const config = useConfig();
-  const { setAuthResponseUrl, iframeRef } = useSession();
+  const { setAuthResponseUrl, iframeRef } = useIframe();
   const processIframeUrl = useCallback(() => {
     if (iframeRef && iframeRef.current && iframeRef.current.contentWindow) {
       try {
@@ -423,8 +407,25 @@ var ConfigProvider = ({
   }
 );
 
+// src/react/providers/IframeProvider.tsx
+import {
+  createContext as createContext6
+} from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var defaultIframe = {
+  iframeRef: null,
+  setAuthResponseUrl: () => {
+  }
+};
+var IframeContext = createContext6(defaultIframe);
+var IframeProvider = ({
+  children,
+  iframeRef,
+  setAuthResponseUrl
+}) => /* @__PURE__ */ jsx9(IframeContext.Provider, { value: { iframeRef, setAuthResponseUrl }, children });
+
 // src/shared/AuthProvider.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var globalThisObject;
 if (typeof window !== "undefined") {
   globalThisObject = window;
@@ -435,7 +436,7 @@ if (typeof window !== "undefined") {
 }
 globalThisObject.globalThis = globalThisObject;
 function BlockDisplay({ children }) {
-  return /* @__PURE__ */ jsx9("div", { className: "cac-absolute cac-left-0 cac-top-0 cac-z-50 cac-flex cac-h-screen cac-w-screen cac-items-center cac-justify-center cac-bg-white", children: /* @__PURE__ */ jsx9("div", { className: "cac-absolute cac-inset-0 cac-flex cac-items-center cac-justify-center cac-bg-white", children }) });
+  return /* @__PURE__ */ jsx10("div", { className: "cac-relative cac-left-0 cac-top-0 cac-z-50 cac-flex cac-h-screen cac-w-screen cac-items-center cac-justify-center cac-bg-white", children: /* @__PURE__ */ jsx10("div", { className: "cac-absolute cac-inset-0 cac-flex cac-items-center cac-justify-center cac-bg-white", children }) });
 }
 var AuthProvider = ({
   children,
@@ -446,7 +447,8 @@ var AuthProvider = ({
   onSignOut,
   pkceConsumer,
   nonce,
-  modalIframe = true
+  modalIframe = true,
+  sessionData: inputSessionData
 }) => {
   const [iframeUrl, setIframeUrl] = useState2(null);
   const [currentUrl, setCurrentUrl] = useState2(null);
@@ -499,9 +501,16 @@ var AuthProvider = ({
       if (!authService) {
         return { authenticated: false };
       }
+      if (inputSessionData) {
+        return inputSessionData;
+      }
       const url = new URL(
         authResponseUrl ? authResponseUrl : globalThis.window.location.href || ""
       );
+      const existingSessionData = yield authService.validateExistingSession();
+      if (existingSessionData.authenticated) {
+        return existingSessionData;
+      }
       const code = url.searchParams.get("code");
       const state = url.searchParams.get("state");
       if (!serverTokenExchange && code && state && !isInIframe) {
@@ -529,10 +538,6 @@ var AuthProvider = ({
           return { authenticated: false };
         }
       }
-      const existingSessionData = yield authService.validateExistingSession();
-      if (existingSessionData.authenticated) {
-        return existingSessionData;
-      }
       return existingSessionData;
     })
   });
@@ -608,11 +613,7 @@ var AuthProvider = ({
     () => session ? session.authenticated : false,
     [session]
   );
-  const {
-    data: autoSignIn,
-    isLoading: autoSignInLoading,
-    error: autoSignInError
-  } = useQuery2({
+  useQuery2({
     queryKey: ["autoSignIn", modalIframe, redirectUrl, isAuthenticated],
     queryFn: () => __async(void 0, null, function* () {
       if (!modalIframe && redirectUrl && !isAuthenticated && iframeRef.current) {
@@ -634,25 +635,24 @@ var AuthProvider = ({
     }),
     [isLoading, error, signOutMutation, isAuthenticated, signIn]
   );
-  return /* @__PURE__ */ jsx9(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx10(
     ConfigProvider,
     {
       config,
       redirectUrl,
       modalIframe,
       serverTokenExchange,
-      children: /* @__PURE__ */ jsx9(
-        SessionProvider,
+      children: /* @__PURE__ */ jsx10(
+        IframeProvider,
         {
-          session,
           setAuthResponseUrl,
           iframeRef,
-          children: /* @__PURE__ */ jsxs4(TokenProvider, { children: [
-            modalIframe && !isInIframe && !(session == null ? void 0 : session.authenticated) && /* @__PURE__ */ jsx9(
+          children: /* @__PURE__ */ jsx10(SessionProvider, { session, children: /* @__PURE__ */ jsxs4(TokenProvider, { children: [
+            modalIframe && !isInIframe && !(session == null ? void 0 : session.authenticated) && /* @__PURE__ */ jsx10(
               "div",
               {
                 style: showIFrame ? { display: "block" } : { display: "none" },
-                children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10(
                   CivicAuthIframeContainer,
                   {
                     onClose: () => setShowIFrame(false)
@@ -660,13 +660,13 @@ var AuthProvider = ({
                 )
               }
             ),
-            modalIframe && (isInIframe || isRedirecting || isLoading) && /* @__PURE__ */ jsx9(BlockDisplay, { children: /* @__PURE__ */ jsx9(LoadingIcon, {}) }),
-            (tokenExchangeError || error) && /* @__PURE__ */ jsx9(BlockDisplay, { children: /* @__PURE__ */ jsxs4("div", { children: [
+            modalIframe && (isInIframe || isRedirecting || isLoading && !serverTokenExchange) && /* @__PURE__ */ jsx10(BlockDisplay, { children: /* @__PURE__ */ jsx10(LoadingIcon, {}) }),
+            (tokenExchangeError || error) && /* @__PURE__ */ jsx10(BlockDisplay, { children: /* @__PURE__ */ jsxs4("div", { children: [
               "Error: ",
               (tokenExchangeError || error).message
             ] }) }),
             children
-          ] })
+          ] }) })
         }
       )
     }
@@ -676,24 +676,86 @@ var AuthProvider = ({
 // src/shared/CivicAuthProvider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "@civic/auth/styles.css";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
 var CivicAuthProvider = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx10(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx11(
     AuthProvider,
     __spreadProps(__spreadValues({}, props), {
       pkceConsumer: new BrowserPublicClientPKCEProducer(),
-      children: /* @__PURE__ */ jsx10(UserProvider, { storage: new LocalStorageAdapter(), children })
+      children: /* @__PURE__ */ jsx11(UserProvider, { storage: new LocalStorageAdapter(), children })
     })
   ) });
 };
 
 // src/react/providers/NextAuthProvider.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 import { QueryClient as QueryClient2, QueryClientProvider as QueryClientProvider2 } from "@tanstack/react-query";
 import "@civic/auth/styles.css";
-import { jsx as jsx11 } from "react/jsx-runtime";
+
+// src/react/hooks/useTokenCookie.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useRouter } from "next/navigation.js";
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+
+// src/lib/cookies.ts
+var getWindowCookieValue = ({
+  key,
+  window: window2,
+  parseJson = false
+}) => {
+  const cookie = window2.document.cookie;
+  if (!cookie) return null;
+  const cookies = cookie.split(";");
+  for (const c of cookies) {
+    const [name, value] = c.trim().split("=");
+    if (value && name === key) {
+      try {
+        const decodeURIComponentValue = decodeURIComponent(value);
+        return parseJson === true ? JSON.parse(decodeURIComponentValue) : decodeURIComponentValue;
+      } catch (e) {
+        return value;
+      }
+    }
+  }
+  return null;
+};
+
+// src/react/hooks/useTokenCookie.ts
+var getTokenFromCookie = (tokenName) => {
+  return getWindowCookieValue({
+    key: tokenName,
+    window: globalThis.window,
+    parseJson: false
+  });
+};
+var useTokenCookie = (tokenName) => {
+  const hasRunRef = useRef3(false);
+  const router = useRouter();
+  const { data: token } = useQuery3({
+    queryKey: ["token", tokenName],
+    queryFn: () => getTokenFromCookie(tokenName) || null,
+    refetchInterval: 2e3,
+    refetchIntervalInBackground: true,
+    enabled: !hasRunRef.current,
+    refetchOnWindowFocus: true
+  });
+  useEffect3(() => {
+    if (token) {
+      if (!hasRunRef.current) {
+        hasRunRef.current = true;
+        router.refresh();
+      }
+    } else {
+      hasRunRef.current = false;
+    }
+  }, [token, router]);
+  return token != null ? token : null;
+};
+
+// src/react/providers/NextAuthProvider.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
 var queryClient2 = new QueryClient2();
 var CivicNextAuthProvider = (_a) => {
   var _b = _a, {
@@ -703,31 +765,37 @@ var CivicNextAuthProvider = (_a) => {
   ]);
   const [redirectUrl, setRedirectUrl] = useState3("");
   const { clientId, oauthServer, callbackUrl, challengeUrl, logoutUrl } = resolveAuthConfig();
-  useEffect3(() => {
+  useEffect4(() => {
     if (typeof globalThis.window !== "undefined") {
       const currentUrl = globalThis.window.location.href;
       setRedirectUrl(resolveCallbackUrl(resolveAuthConfig(), currentUrl));
     }
   }, [callbackUrl]);
   const user = useUserCookie();
+  const idToken = useTokenCookie("id_token" /* ID_TOKEN */);
+  const combinedUser = user ? __spreadProps(__spreadValues({}, user || {}), { idToken }) : null;
+  const sessionData = __spreadValues({
+    authenticated: !!user
+  }, idToken ? { idToken } : {});
   const signOut = () => __async(void 0, null, function* () {
     var _a2;
-    yield fetch(logoutUrl);
     (_a2 = props.onSignOut) == null ? void 0 : _a2.call(props);
+    window.location.href = logoutUrl;
     return;
   });
-  return /* @__PURE__ */ jsx11(QueryClientProvider2, { client: queryClient2, children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(QueryClientProvider2, { client: queryClient2, children: /* @__PURE__ */ jsx12(
     AuthProvider,
     __spreadProps(__spreadValues({}, props), {
       redirectUrl,
       config: { oauthServer },
       clientId,
       pkceConsumer: new ConfidentialClientPKCEConsumer(challengeUrl),
-      children: /* @__PURE__ */ jsx11(
+      sessionData,
+      children: /* @__PURE__ */ jsx12(
         UserProvider,
         {
           storage: new NextjsClientStorage(),
-          user,
+          user: combinedUser,
           signOut,
           children
         }
@@ -746,38 +814,21 @@ var useUser = () => {
 };
 
 // src/react/hooks/useUserCookie.ts
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
-import { useRouter } from "next/navigation.js";
-import { useQuery as useQuery3 } from "@tanstack/react-query";
-
-// src/lib/cookies.ts
-var getCookieValue = (key, window2) => {
-  const cookie = window2.document.cookie;
-  if (!cookie) return null;
-  const cookies = cookie.split(";");
-  for (const c of cookies) {
-    const [name, value] = c.trim().split("=");
-    if (value && name === key) {
-      try {
-        return JSON.parse(decodeURIComponent(value));
-      } catch (e) {
-        console.log("Error parsing cookie value", e);
-        return value;
-      }
-    }
-  }
-  return null;
-};
-
-// src/react/hooks/useUserCookie.ts
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useRouter as useRouter2 } from "next/navigation.js";
+import { useQuery as useQuery4 } from "@tanstack/react-query";
 var getUserFromCookie = () => {
-  const userCookie = getCookieValue("user", globalThis.window);
+  const userCookie = getWindowCookieValue({
+    key: "user" /* USER */,
+    window: globalThis.window,
+    parseJson: true
+  });
   return userCookie;
 };
 var useUserCookie = () => {
-  const hasRunRef = useRef3(false);
-  const router = useRouter();
-  const { data: user } = useQuery3({
+  const hasRunRef = useRef4(false);
+  const router = useRouter2();
+  const { data: user } = useQuery4({
     queryKey: ["user"],
     queryFn: () => getUserFromCookie(),
     refetchInterval: 2e3,
@@ -785,7 +836,7 @@ var useUserCookie = () => {
     enabled: !hasRunRef.current,
     refetchOnWindowFocus: true
   });
-  useEffect4(() => {
+  useEffect5(() => {
     if (user) {
       if (!hasRunRef.current) {
         hasRunRef.current = true;
@@ -795,7 +846,7 @@ var useUserCookie = () => {
       hasRunRef.current = false;
     }
   }, [user, router]);
-  return user;
+  return user != null ? user : null;
 };
 
 // src/react/hooks/useConfig.tsx
@@ -808,10 +859,20 @@ var useConfig = () => {
   return context;
 };
 
+// src/react/hooks/useIframe.tsx
+import { useContext as useContext6 } from "react";
+var useIframe = () => {
+  const context = useContext6(IframeContext);
+  if (!context) {
+    throw new Error("useIframe must be used within an IframeProvider");
+  }
+  return context;
+};
+
 // src/react/components/UserButton.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useState as useState4 } from "react";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-var ChevronDown = () => /* @__PURE__ */ jsx12(
+import { useCallback as useCallback3, useEffect as useEffect6, useState as useState4 } from "react";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChevronDown = () => /* @__PURE__ */ jsx13(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -824,10 +885,10 @@ var ChevronDown = () => /* @__PURE__ */ jsx12(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-chevron-down",
-    children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx13("path", { d: "m6 9 6 6 6-6" })
   }
 );
-var ChevronUp = () => /* @__PURE__ */ jsx12(
+var ChevronUp = () => /* @__PURE__ */ jsx13(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -840,7 +901,7 @@ var ChevronUp = () => /* @__PURE__ */ jsx12(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-chevron-up",
-    children: /* @__PURE__ */ jsx12("path", { d: "m18 15-6-6-6 6" })
+    children: /* @__PURE__ */ jsx13("path", { d: "m18 15-6-6-6 6" })
   }
 );
 var UserButton = ({
@@ -868,7 +929,7 @@ var UserButton = ({
       setIsOpen(false);
     }
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isOpen) {
       window.addEventListener("click", handleClickOutside);
       window.addEventListener("keydown", handleEscape);
@@ -889,24 +950,24 @@ var UserButton = ({
           ),
           onClick: () => setIsOpen((isOpen2) => !isOpen2),
           children: [
-            (user == null ? void 0 : user.picture) ? /* @__PURE__ */ jsx12("span", { className: "cac-relative cac-flex cac-h-10 cac-w-10 cac-shrink-0 cac-gap-2 cac-overflow-hidden cac-rounded-full", children: /* @__PURE__ */ jsx12(
+            (user == null ? void 0 : user.picture) ? /* @__PURE__ */ jsx13("span", { className: "cac-relative cac-flex cac-h-10 cac-w-10 cac-shrink-0 cac-gap-2 cac-overflow-hidden cac-rounded-full", children: /* @__PURE__ */ jsx13(
               "img",
               {
                 className: "cac-h-full cac-w-full cac-object-cover",
                 src: user.picture,
                 alt: (user == null ? void 0 : user.name) || (user == null ? void 0 : user.email)
               }
-            ) }) : /* @__PURE__ */ jsx12("div", {}),
-            /* @__PURE__ */ jsx12("span", { children: (user == null ? void 0 : user.name) || (user == null ? void 0 : user.email) }),
-            isOpen ? /* @__PURE__ */ jsx12(ChevronUp, {}) : /* @__PURE__ */ jsx12(ChevronDown, {})
+            ) }) : /* @__PURE__ */ jsx13("div", {}),
+            /* @__PURE__ */ jsx13("span", { children: (user == null ? void 0 : user.name) || (user == null ? void 0 : user.email) }),
+            isOpen ? /* @__PURE__ */ jsx13(ChevronUp, {}) : /* @__PURE__ */ jsx13(ChevronDown, {})
           ]
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(
         "div",
         {
           className: isOpen ? "cac-absolute cac-right-0 cac-mt-2 cac-w-full cac-rounded-lg cac-bg-white cac-py-2 cac-text-neutral-500 cac-shadow-xl" : "cac-hidden",
-          children: /* @__PURE__ */ jsx12("ul", { children: /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx13("ul", { children: /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
             "button",
             {
               className: "cac-block cac-w-full cac-px-4 cac-py-2 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50",
@@ -918,7 +979,7 @@ var UserButton = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "button",
     {
       "data-testid": "sign-in-button",
@@ -933,13 +994,13 @@ var UserButton = ({
 };
 
 // src/react/components/SignInButton.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SignInButton = ({
   displayMode,
   className
 }) => {
   const { signIn } = useUser();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "button",
     {
       "data-testid": "sign-in-button",
@@ -954,10 +1015,10 @@ var SignInButton = ({
 };
 
 // src/react/components/SignOutButton.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var SignOutButton = ({ className }) => {
   const { signOut } = useUser();
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       className: cn(
@@ -971,11 +1032,11 @@ var SignOutButton = ({ className }) => {
 };
 
 // src/react/components/NextLogOut.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var NextLogOut = ({ children }) => {
   const config = resolveAuthConfig();
   const logoutUrl = `${config.logoutUrl}`;
-  return /* @__PURE__ */ jsx15("a", { href: logoutUrl, children });
+  return /* @__PURE__ */ jsx16("a", { href: logoutUrl, children });
 };
 export {
   CivicAuthIframeContainer,
@@ -987,8 +1048,10 @@ export {
   UserButton,
   useAuth,
   useConfig,
+  useIframe,
   useSession,
   useToken,
+  useTokenCookie,
   useUser,
   useUserCookie
 };