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

package/dist/react.mjs

@@ -1,24 +1,14 @@
 import {
-  NextjsClientStorage,
-  resolveAuthConfig,
-  resolveCallbackUrl
-} from "./chunk-5XL2ST72.mjs";
+  AuthSessionServiceImpl,
+  resolveAuthConfig
+} from "./chunk-NXBKSUKI.mjs";
 import {
-  BrowserAuthenticationInitiator,
-  BrowserAuthenticationService,
-  BrowserPublicClientPKCEProducer,
-  ConfidentialClientPKCEConsumer,
   DEFAULT_SCOPES,
-  GenericUserSession,
-  IFRAME_ID,
-  LocalStorageAdapter,
-  TOKEN_EXCHANGE_TRIGGER_TEXT,
-  cn,
-  convertForwardedTokenFormat,
-  generateState,
-  getUser,
-  isWindowInIframe
-} from "./chunk-G3P5TIO2.mjs";
+  IFRAME_ID
+} from "./chunk-5NUJ7LFF.mjs";
+import {
+  cn
+} from "./chunk-T7HUHQ3J.mjs";
 import {
   __async,
   __objRest,
@@ -27,9 +17,9 @@ import {
 } from "./chunk-RGHW4PYM.mjs";
 
 // src/react/hooks/useUser.tsx
-import { useContext as useContext4 } from "react";
+import { useContext as useContext5 } from "react";
 
-// src/shared/UserProvider.tsx
+// src/react/providers/UserProvider.tsx
 import { createContext as createContext4 } from "react";
 import { useQuery } from "@tanstack/react-query";
 
@@ -69,7 +59,7 @@ var defaultSession = {
   displayMode: "iframe"
 };
 var SessionContext = createContext2(defaultSession);
-var SessionProvider = ({ children, session }) => /* @__PURE__ */ jsx(SessionContext.Provider, { value: __spreadValues(__spreadValues({}, defaultSession), session || {}), children });
+var SessionProvider = ({ children, session }) => /* @__PURE__ */ jsx(SessionContext.Provider, { value: session || defaultSession, children });
 
 // src/react/hooks/useSession.tsx
 var useSession = () => {
@@ -82,6 +72,20 @@ var useSession = () => {
 
 // src/react/providers/TokenProvider.tsx
 import { parseJWT } from "oslo/jwt";
+
+// src/lib/jwt.ts
+var convertForwardedTokenFormat = (inputTokens) => Object.fromEntries(
+  Object.entries(inputTokens).map(([source, tokens]) => [
+    source,
+    {
+      idToken: tokens == null ? void 0 : tokens.id_token,
+      accessToken: tokens == null ? void 0 : tokens.access_token,
+      refreshToken: tokens == null ? void 0 : tokens.refresh_token
+    }
+  ])
+);
+
+// src/react/providers/TokenProvider.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TokenContext = createContext3(void 0);
 var TokenProvider = ({ children }) => {
@@ -134,26 +138,31 @@ var useToken = () => {
   return context;
 };
 
-// src/shared/UserProvider.tsx
+// src/react/providers/UserProvider.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var UserContext = createContext4(null);
 var UserProvider = ({
   children,
-  storage,
-  user: inputUser,
-  signOut: inputSignOut
+  userInfoService
 }) => {
-  var _a;
   const { isLoading: authLoading, error: authError } = useAuth();
   const session = useSession();
-  const { accessToken } = useToken();
+  const { forwardedTokens, idToken, accessToken, refreshToken } = useToken();
   const { signIn, signOut } = useAuth();
   const fetchUser = () => __async(void 0, null, function* () {
-    if (!accessToken) {
+    if (!accessToken || !userInfoService) {
+      return null;
+    }
+    const user2 = yield userInfoService == null ? void 0 : userInfoService.getUserInfo(accessToken, idToken);
+    if (!user2) {
       return null;
     }
-    const userSession = new GenericUserSession(storage);
-    return userSession.get();
+    return __spreadProps(__spreadValues({}, user2), {
+      forwardedTokens,
+      idToken,
+      accessToken,
+      refreshToken
+    });
   });
   const {
     data: user,
@@ -171,11 +180,11 @@ var UserProvider = ({
     UserContext.Provider,
     {
       value: {
-        user: (_a = inputUser || user) != null ? _a : null,
+        user: user != null ? user : null,
         isLoading,
         error,
         signIn,
-        signOut: inputSignOut || signOut
+        signOut
       },
       children
     }
@@ -192,7 +201,7 @@ import {
 } from "react";
 import { useMutation as useMutation2, useQuery as useQuery2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 
-// src/react/components/CivicAuthIframeContainer.tsx
+// src/react/components/CivicAuthIframeModal.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/react/components/LoadingIcon.tsx
@@ -202,7 +211,7 @@ var LoadingIcon = () => /* @__PURE__ */ jsxs("div", { role: "status", children:
     "svg",
     {
       "aria-hidden": "true",
-      className: "cac-inline cac-h-8 cac-w-8 cac-animate-spin cac-fill-neutral-600 cac-text-neutral-200 dark:cac-fill-neutral-300 dark:cac-text-neutral-600",
+      className: "inline h-8 w-8 animate-spin fill-neutral-600 text-neutral-200 dark:fill-neutral-300 dark:text-neutral-600",
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -224,7 +233,7 @@ var LoadingIcon = () => /* @__PURE__ */ jsxs("div", { role: "status", children:
       ]
     }
   ),
-  /* @__PURE__ */ jsx4("span", { className: "cac-sr-only", children: "Loading..." })
+  /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Loading..." })
 ] });
 
 // src/react/components/CloseIcon.tsx
@@ -253,13 +262,14 @@ var CloseIcon = () => /* @__PURE__ */ jsxs2(
 import { forwardRef } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var CivicAuthIframe = forwardRef(
-  ({ onLoad }, ref) => {
+  ({ authUrl, onLoad }, ref) => {
     return /* @__PURE__ */ jsx6(
       "iframe",
       {
         id: IFRAME_ID,
         ref,
-        className: "cac-h-[26rem] cac-w-80 cac-border-none",
+        src: authUrl,
+        className: "h-96 w-80 border-none",
         onLoad
       }
     );
@@ -267,69 +277,25 @@ var CivicAuthIframe = forwardRef(
 );
 CivicAuthIframe.displayName = "CivicAuthIframe";
 
-// src/react/components/CivicAuthIframeContainer.tsx
+// src/react/components/CivicAuthIframeModal.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function NoChrome({
-  children
-}) {
-  return /* @__PURE__ */ jsx7("div", { className: "cac-relative", children });
-}
-function IframeChrome({
-  children,
-  onClose
-}) {
-  return /* @__PURE__ */ jsx7(
-    "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-neutral-950 cac-bg-opacity-50",
-      onClick: onClose,
-      children: /* @__PURE__ */ jsxs3(
-        "div",
-        {
-          className: "cac-relative cac-rounded-3xl cac-bg-white cac-p-6 cac-shadow-lg",
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsx7(
-              "button",
-              {
-                className: "cac-absolute cac-right-4 cac-top-4 cac-flex cac-cursor-pointer cac-items-center cac-justify-center cac-border-none cac-bg-transparent cac-p-1 cac-text-neutral-400",
-                onClick: onClose,
-                children: /* @__PURE__ */ jsx7(CloseIcon, {})
-              }
-            ),
-            children
-          ]
-        }
-      )
-    }
-  );
-}
-var CivicAuthIframeContainer = ({
+var CivicAuthIframeModal = ({
+  authUrl,
+  redirectUri,
+  setAuthResponseUrl,
   onClose,
+  iframeRef,
+  redirectInProgress = false,
   closeOnRedirect = true
 }) => {
-  var _a;
   const [isLoading, setIsLoading] = useState(true);
-  const { isLoading: isAuthLoading } = useAuth();
-  const config = useConfig();
-  const { setAuthResponseUrl, iframeRef } = useIframe();
   const processIframeUrl = useCallback(() => {
-    if (iframeRef && iframeRef.current && iframeRef.current.contentWindow) {
+    if (iframeRef.current && iframeRef.current.contentWindow) {
       try {
         const iframeUrl = iframeRef.current.contentWindow.location.href;
-        if (iframeUrl.startsWith(config.redirectUrl)) {
-          setIsLoading(true);
-          const iframeBody = iframeRef.current.contentWindow.document.body.innerHTML;
-          if (iframeBody.includes(TOKEN_EXCHANGE_TRIGGER_TEXT)) {
-            console.log(
-              `${TOKEN_EXCHANGE_TRIGGER_TEXT}, calling callback URL again...`
-            );
-            const params = new URL(iframeUrl).searchParams;
-            fetch(`${config.redirectUrl}?${params.toString()}`);
-          } else {
-            setAuthResponseUrl(iframeUrl);
-          }
-          if (closeOnRedirect) onClose == null ? void 0 : onClose();
+        if (iframeUrl.startsWith(redirectUri)) {
+          setAuthResponseUrl(iframeUrl);
+          if (closeOnRedirect) onClose();
           return true;
         }
       } catch (e) {
@@ -337,18 +303,12 @@ var CivicAuthIframeContainer = ({
       }
     }
     return false;
-  }, [
-    closeOnRedirect,
-    config.redirectUrl,
-    iframeRef,
-    onClose,
-    setAuthResponseUrl
-  ]);
+  }, [closeOnRedirect, iframeRef, onClose, redirectUri, setAuthResponseUrl]);
   const intervalId = useRef();
   const handleEscape = useCallback(
     (event) => {
       if (event.key === "Escape") {
-        onClose == null ? void 0 : onClose();
+        onClose();
       }
     },
     [onClose]
@@ -364,12 +324,39 @@ var CivicAuthIframeContainer = ({
       clearInterval(intervalId.current);
     }
   };
-  const showLoadingIcon = isLoading || isAuthLoading || !((_a = iframeRef == null ? void 0 : iframeRef.current) == null ? void 0 : _a.getAttribute("src"));
-  const WrapperComponent = config.modalIframe ? IframeChrome : NoChrome;
-  return /* @__PURE__ */ jsxs3(WrapperComponent, { onClose, children: [
-    showLoadingIcon && /* @__PURE__ */ jsx7("div", { className: "cac-absolute cac-inset-0 cac-flex cac-items-center cac-justify-center cac-rounded-3xl cac-bg-white", children: /* @__PURE__ */ jsx7(LoadingIcon, {}) }),
-    /* @__PURE__ */ jsx7(CivicAuthIframe, { ref: iframeRef, onLoad: handleIframeLoad })
-  ] });
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-neutral-950 bg-opacity-50",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: "relative rounded-3xl bg-white p-6 shadow-lg",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                className: "absolute right-4 top-4 flex cursor-pointer items-center justify-center border-none bg-transparent p-1 text-neutral-400",
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx7(CloseIcon, {})
+              }
+            ),
+            (isLoading || redirectInProgress) && /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center rounded-3xl bg-neutral-100", children: /* @__PURE__ */ jsx7(LoadingIcon, {}) }),
+            /* @__PURE__ */ jsx7(
+              CivicAuthIframe,
+              {
+                ref: iframeRef,
+                authUrl,
+                onLoad: handleIframeLoad
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 
 // src/config.ts
@@ -378,54 +365,23 @@ var authConfig = {
   oauthServer: "https://auth-dev.civic.com/oauth/"
 };
 
-// src/react/providers/ConfigProvider.tsx
-import { createContext as createContext5 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var defaultConfig = {
-  config: authConfig,
-  redirectUrl: "",
-  modalIframe: true,
-  serverTokenExchange: false
-};
-var ConfigContext = createContext5(defaultConfig);
-var ConfigProvider = ({
-  children,
-  config,
-  redirectUrl,
-  modalIframe,
-  serverTokenExchange
-}) => /* @__PURE__ */ jsx8(
-  ConfigContext.Provider,
-  {
-    value: {
-      config,
-      redirectUrl,
-      modalIframe: !!modalIframe,
-      serverTokenExchange
-    },
-    children
-  }
-);
-
-// src/react/providers/IframeProvider.tsx
-import {
-  createContext as createContext6
-} from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var defaultIframe = {
-  iframeRef: null,
-  setAuthResponseUrl: () => {
+// src/lib/windowUtil.ts
+var isWindowInIframe = (window2) => {
+  var _a;
+  if (typeof window2 !== "undefined") {
+    try {
+      if (((_a = window2 == null ? void 0 : window2.frameElement) == null ? void 0 : _a.id) === "civic-auth-iframe") {
+        return true;
+      }
+    } catch (_e) {
+      return false;
+    }
   }
+  return false;
 };
-var IframeContext = createContext6(defaultIframe);
-var IframeProvider = ({
-  children,
-  iframeRef,
-  setAuthResponseUrl
-}) => /* @__PURE__ */ jsx9(IframeContext.Provider, { value: { iframeRef, setAuthResponseUrl }, children });
 
 // src/shared/AuthProvider.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var globalThisObject;
 if (typeof window !== "undefined") {
   globalThisObject = window;
@@ -435,33 +391,24 @@ if (typeof window !== "undefined") {
   globalThisObject = Function("return this")();
 }
 globalThisObject.globalThis = globalThisObject;
-function BlockDisplay({ 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,
   clientId,
   redirectUrl: inputRedirectUrl,
   config = authConfig,
+  nonce,
   onSignIn,
   onSignOut,
-  pkceConsumer,
-  nonce,
-  modalIframe = true,
-  sessionData: inputSessionData
+  authServiceImpl,
+  serverSideTokenExchange
 }) => {
   const [iframeUrl, setIframeUrl] = useState2(null);
   const [currentUrl, setCurrentUrl] = useState2(null);
   const [isInIframe, setIsInIframe] = useState2(false);
   const [authResponseUrl, setAuthResponseUrl] = useState2(null);
   const [tokenExchangeError, setTokenExchangeError] = useState2();
-  const [displayMode, setDisplayMode] = useState2("iframe");
-  const [browserAuthenticationInitiator, setBrowserAuthenticationInitiator] = useState2();
-  const [showIFrame, setShowIFrame] = useState2(false);
-  const [isRedirecting, setIsRedirecting] = useState2(false);
   const queryClient3 = useQueryClient2();
   const iframeRef = useRef2(null);
-  const serverTokenExchange = pkceConsumer instanceof ConfidentialClientPKCEConsumer;
   useEffect2(() => {
     if (typeof globalThis.window !== "undefined") {
       setCurrentUrl(globalThis.window.location.href);
@@ -473,63 +420,40 @@ var AuthProvider = ({
     () => (inputRedirectUrl || currentUrl || "").split("?")[0],
     [currentUrl, inputRedirectUrl]
   );
-  const [authService, setAuthService] = useState2();
-  useEffect2(() => {
-    if (!currentUrl) return;
-    BrowserAuthenticationService.build({
+  const authService = useMemo2(
+    () => currentUrl ? authServiceImpl || new AuthSessionServiceImpl(
       clientId,
       redirectUrl,
-      oauthServer: config.oauthServer,
-      scopes: DEFAULT_SCOPES,
-      displayMode
-    }).then(setAuthService);
-  }, [currentUrl, clientId, redirectUrl, config, displayMode]);
+      config == null ? void 0 : config.oauthServer,
+      config == null ? void 0 : config.endpoints
+    ) : null,
+    [currentUrl, clientId, redirectUrl, config, authServiceImpl]
+  );
+  const [userInfoService, setUserInfoService] = useState2();
+  useEffect2(() => {
+    if (!authService) return;
+    authService.getUserInfoService().then(setUserInfoService);
+  }, [authService]);
   const {
     data: session,
     isLoading,
     error
   } = useQuery2({
-    queryKey: [
-      "session",
-      authResponseUrl,
-      iframeUrl,
-      currentUrl,
-      isInIframe,
-      authService
-    ],
+    queryKey: ["session", authResponseUrl, iframeUrl, currentUrl, isInIframe],
     queryFn: () => __async(void 0, null, function* () {
       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) {
+      if (code && !isInIframe && !serverSideTokenExchange) {
         try {
-          console.log("AuthProvider useQuery code", {
-            isInIframe,
-            code,
-            state
-          });
-          yield authService.tokenExchange(code, state);
-          const clientStorage = new LocalStorageAdapter();
-          const user = yield getUser(clientStorage);
-          if (!user) {
-            throw new Error("Failed to get user info");
-          }
-          const userSession = new GenericUserSession(clientStorage);
-          userSession.set(user);
+          console.log("AuthProvider useQuery code", { isInIframe, code });
+          const newSession = yield authService.tokenExchange(url.toString());
           onSignIn == null ? void 0 : onSignIn();
-          return authService.getSessionData();
+          return newSession;
         } catch (error2) {
           setTokenExchangeError(error2);
           onSignIn == null ? void 0 : onSignIn(
@@ -538,91 +462,48 @@ var AuthProvider = ({
           return { authenticated: false };
         }
       }
+      const existingSessionData = yield authService.validateExistingSession();
+      if (existingSessionData.authenticated) {
+        return existingSessionData;
+      }
       return existingSessionData;
     })
   });
   const signOutMutation = useMutation2({
     mutationFn: () => __async(void 0, null, function* () {
-      const authInitiator = getAuthInitiator();
-      authInitiator == null ? void 0 : authInitiator.signOut();
+      authService == null ? void 0 : authService.updateSessionData({});
       setIframeUrl(null);
-      setShowIFrame(false);
       setAuthResponseUrl(null);
       onSignOut == null ? void 0 : onSignOut();
     }),
     onSuccess: () => {
       queryClient3.setQueryData(
-        [
-          "session",
-          authResponseUrl,
-          iframeUrl,
-          currentUrl,
-          isInIframe,
-          authService
-        ],
+        ["session", authResponseUrl, iframeUrl, currentUrl, isInIframe],
         null
       );
     }
   });
-  const getAuthInitiator = useCallback2(
-    (overrideDisplayMode) => {
-      const useDisplayMode = overrideDisplayMode || displayMode;
-      if (!pkceConsumer) {
-        return null;
-      }
-      return browserAuthenticationInitiator || new BrowserAuthenticationInitiator({
-        pkceConsumer,
-        // generate and retrieve the challenge client-side
-        clientId,
-        redirectUrl,
-        state: generateState(useDisplayMode),
-        scopes: DEFAULT_SCOPES,
-        displayMode: useDisplayMode,
-        oauthServer: config.oauthServer,
-        // the endpoints to use for the login (if not obtained from the auth server
-        endpointOverrides: config.endpoints,
-        nonce
-      });
-    },
-    [
-      displayMode,
-      browserAuthenticationInitiator,
-      clientId,
-      redirectUrl,
-      config.oauthServer,
-      config.endpoints,
-      pkceConsumer,
-      nonce
-    ]
-  );
   const signIn = useCallback2(
     (overrideDisplayMode = "iframe") => __async(void 0, null, function* () {
-      setDisplayMode(overrideDisplayMode);
-      const authInitiator = getAuthInitiator(overrideDisplayMode);
-      setBrowserAuthenticationInitiator(authInitiator);
+      if (!authService) return;
+      const url = yield authService.getAuthorizationUrl(
+        // This is the default scope. We will eventually pull this from the partner dashboard
+        DEFAULT_SCOPES,
+        overrideDisplayMode,
+        nonce
+      );
       if (overrideDisplayMode === "iframe") {
-        setShowIFrame(true);
-      } else if (overrideDisplayMode === "redirect") {
-        setIsRedirecting(true);
+        setIframeUrl(url);
+        return;
       }
-      authInitiator == null ? void 0 : authInitiator.signIn(iframeRef.current);
+      authService.loadAuthorizationUrl(url, overrideDisplayMode);
     }),
-    [getAuthInitiator]
+    [authService, nonce]
   );
   const isAuthenticated = useMemo2(
     () => session ? session.authenticated : false,
     [session]
   );
-  useQuery2({
-    queryKey: ["autoSignIn", modalIframe, redirectUrl, isAuthenticated],
-    queryFn: () => __async(void 0, null, function* () {
-      if (!modalIframe && redirectUrl && !isAuthenticated && iframeRef.current) {
-        signIn("iframe");
-      }
-      return true;
-    }),
-    refetchOnWindowFocus: false
-  });
   const value = useMemo2(
     () => ({
       isLoading,
@@ -635,86 +516,55 @@ var AuthProvider = ({
     }),
     [isLoading, error, signOutMutation, isAuthenticated, signIn]
   );
-  return /* @__PURE__ */ jsx10(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx10(
-    ConfigProvider,
-    {
-      config,
-      redirectUrl,
-      modalIframe,
-      serverTokenExchange,
-      children: /* @__PURE__ */ jsx10(
-        IframeProvider,
-        {
-          setAuthResponseUrl,
-          iframeRef,
-          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__ */ jsx10(
-                  CivicAuthIframeContainer,
-                  {
-                    onClose: () => setShowIFrame(false)
-                  }
-                )
-              }
-            ),
-            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
-          ] }) })
-        }
-      )
-    }
-  ) });
+  return /* @__PURE__ */ jsx8(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx8(SessionProvider, { session, children: /* @__PURE__ */ jsx8(TokenProvider, { children: /* @__PURE__ */ jsxs4(UserProvider, { userInfoService, children: [
+    !isInIframe && iframeUrl && !(session == null ? void 0 : session.authenticated) && /* @__PURE__ */ jsx8(
+      CivicAuthIframeModal,
+      {
+        iframeRef,
+        authUrl: iframeUrl,
+        redirectUri: redirectUrl,
+        setAuthResponseUrl,
+        onClose: () => setIframeUrl(null)
+      }
+    ),
+    (tokenExchangeError || isLoading || error || isInIframe && !(tokenExchangeError || error)) && /* @__PURE__ */ jsx8("div", { className: "absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-white", children: /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 flex items-center justify-center bg-white", children: tokenExchangeError || error ? /* @__PURE__ */ jsxs4("div", { children: [
+      "Error: ",
+      (tokenExchangeError || error).message
+    ] }) : /* @__PURE__ */ jsx8(LoadingIcon, {}) }) }),
+    children
+  ] }) }) }) });
 };
 
 // src/shared/CivicAuthProvider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "@civic/auth/styles.css";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
 var CivicAuthProvider = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx11(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx11(
-    AuthProvider,
-    __spreadProps(__spreadValues({}, props), {
-      pkceConsumer: new BrowserPublicClientPKCEProducer(),
-      children: /* @__PURE__ */ jsx11(UserProvider, { storage: new LocalStorageAdapter(), children })
-    })
-  ) });
+  return /* @__PURE__ */ jsx9(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx9(AuthProvider, __spreadProps(__spreadValues({}, props), { children })) });
 };
 
 // src/react/providers/NextAuthProvider.tsx
-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 { createContext as createContext5, useContext as useContext4, useEffect as useEffect4, useMemo as useMemo3, useState as useState3 } from "react";
 
-// src/react/hooks/useTokenCookie.ts
+// src/react/hooks/useUserCookie.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
-}) => {
+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) {
+    if (name === key) {
       try {
-        const decodeURIComponentValue = decodeURIComponent(value);
-        return parseJson === true ? JSON.parse(decodeURIComponentValue) : decodeURIComponentValue;
+        return JSON.parse(decodeURIComponent(value));
       } catch (e) {
+        console.log("Error parsing cookie value", e);
         return value;
       }
     }
@@ -722,27 +572,24 @@ var getWindowCookieValue = ({
   return null;
 };
 
-// src/react/hooks/useTokenCookie.ts
-var getTokenFromCookie = (tokenName) => {
-  return getWindowCookieValue({
-    key: tokenName,
-    window: globalThis.window,
-    parseJson: false
-  });
+// src/react/hooks/useUserCookie.ts
+var getUserFromCookie = () => {
+  const userCookie = getCookieValue("user", globalThis.window);
+  return userCookie;
 };
-var useTokenCookie = (tokenName) => {
+var useUserCookie = () => {
   const hasRunRef = useRef3(false);
   const router = useRouter();
-  const { data: token } = useQuery3({
-    queryKey: ["token", tokenName],
-    queryFn: () => getTokenFromCookie(tokenName) || null,
+  const { data: user } = useQuery3({
+    queryKey: ["user"],
+    queryFn: () => getUserFromCookie(),
     refetchInterval: 2e3,
     refetchIntervalInBackground: true,
     enabled: !hasRunRef.current,
     refetchOnWindowFocus: true
   });
   useEffect3(() => {
-    if (token) {
+    if (user) {
       if (!hasRunRef.current) {
         hasRunRef.current = true;
         router.refresh();
@@ -750,129 +597,65 @@ var useTokenCookie = (tokenName) => {
     } else {
       hasRunRef.current = false;
     }
-  }, [token, router]);
-  return token != null ? token : null;
+  }, [user, router]);
+  return user;
 };
 
 // src/react/providers/NextAuthProvider.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { QueryClient as QueryClient2, QueryClientProvider as QueryClientProvider2 } from "@tanstack/react-query";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var queryClient2 = new QueryClient2();
+var defaultUserContext = { user: null };
+var UserContext2 = createContext5(defaultUserContext);
 var CivicNextAuthProvider = (_a) => {
   var _b = _a, {
     children
   } = _b, props = __objRest(_b, [
     "children"
   ]);
+  const user = useUserCookie();
   const [redirectUrl, setRedirectUrl] = useState3("");
-  const { clientId, oauthServer, callbackUrl, challengeUrl, logoutUrl } = resolveAuthConfig();
+  const { clientId, oauthServer, callbackUrl, challengeUrl } = resolveAuthConfig();
   useEffect4(() => {
     if (typeof globalThis.window !== "undefined") {
       const currentUrl = globalThis.window.location.href;
-      setRedirectUrl(resolveCallbackUrl(resolveAuthConfig(), currentUrl));
+      setRedirectUrl(new URL(callbackUrl, currentUrl).toString());
     }
   }, [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;
-    (_a2 = props.onSignOut) == null ? void 0 : _a2.call(props);
-    window.location.href = logoutUrl;
-    return;
-  });
-  return /* @__PURE__ */ jsx12(QueryClientProvider2, { client: queryClient2, children: /* @__PURE__ */ jsx12(
+  const authService = useMemo3(() => {
+    if (redirectUrl && clientId && oauthServer) {
+      return new AuthSessionServiceImpl(clientId, redirectUrl, oauthServer, {
+        challenge: challengeUrl
+      });
+    }
+    return void 0;
+  }, [redirectUrl, clientId, oauthServer, challengeUrl]);
+  return /* @__PURE__ */ jsx10(QueryClientProvider2, { client: queryClient2, children: /* @__PURE__ */ jsx10(
     AuthProvider,
     __spreadProps(__spreadValues({}, props), {
-      redirectUrl,
       config: { oauthServer },
       clientId,
-      pkceConsumer: new ConfidentialClientPKCEConsumer(challengeUrl),
-      sessionData,
-      children: /* @__PURE__ */ jsx12(
-        UserProvider,
-        {
-          storage: new NextjsClientStorage(),
-          user: combinedUser,
-          signOut,
-          children
-        }
-      )
+      authServiceImpl: authService,
+      serverSideTokenExchange: true,
+      children: /* @__PURE__ */ jsx10(UserContext2.Provider, { value: user, children })
     })
   ) });
 };
+var useNextUser = () => useContext4(UserContext2);
 
 // src/react/hooks/useUser.tsx
 var useUser = () => {
-  const context = useContext4(UserContext);
+  const context = useContext5(UserContext);
   if (!context) {
     throw new Error("useUser must be used within a UserProvider");
   }
   return context;
 };
 
-// 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 = getWindowCookieValue({
-    key: "user" /* USER */,
-    window: globalThis.window,
-    parseJson: true
-  });
-  return userCookie;
-};
-var useUserCookie = () => {
-  const hasRunRef = useRef4(false);
-  const router = useRouter2();
-  const { data: user } = useQuery4({
-    queryKey: ["user"],
-    queryFn: () => getUserFromCookie(),
-    refetchInterval: 2e3,
-    refetchIntervalInBackground: true,
-    enabled: !hasRunRef.current,
-    refetchOnWindowFocus: true
-  });
-  useEffect5(() => {
-    if (user) {
-      if (!hasRunRef.current) {
-        hasRunRef.current = true;
-        router.refresh();
-      }
-    } else {
-      hasRunRef.current = false;
-    }
-  }, [user, router]);
-  return user != null ? user : null;
-};
-
-// src/react/hooks/useConfig.tsx
-import { useContext as useContext5 } from "react";
-var useConfig = () => {
-  const context = useContext5(ConfigContext);
-  if (!context) {
-    throw new Error("useConfig must be used within an ConfigProvider");
-  }
-  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 useEffect6, useState as useState4 } from "react";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-var ChevronDown = () => /* @__PURE__ */ jsx13(
+import { useCallback as useCallback3, useEffect as useEffect5, useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChevronDown = () => /* @__PURE__ */ jsx11(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -885,10 +668,10 @@ var ChevronDown = () => /* @__PURE__ */ jsx13(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-chevron-down",
-    children: /* @__PURE__ */ jsx13("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx11("path", { d: "m6 9 6 6 6-6" })
   }
 );
-var ChevronUp = () => /* @__PURE__ */ jsx13(
+var ChevronUp = () => /* @__PURE__ */ jsx11(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -901,7 +684,7 @@ var ChevronUp = () => /* @__PURE__ */ jsx13(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-chevron-up",
-    children: /* @__PURE__ */ jsx13("path", { d: "m18 15-6-6-6 6" })
+    children: /* @__PURE__ */ jsx11("path", { d: "m18 15-6-6-6 6" })
   }
 );
 var UserButton = ({
@@ -909,7 +692,8 @@ var UserButton = ({
   className
 }) => {
   const [isOpen, setIsOpen] = useState4(false);
-  const { user, signIn, signOut } = useUser();
+  const { signIn, isAuthenticated, signOut } = useAuth();
+  const { user } = useUser();
   const handleClickOutside = useCallback3((event) => {
     const target = event.target;
     if (!target.closest("#civic-dropdown-container")) {
@@ -917,7 +701,7 @@ var UserButton = ({
     }
   }, []);
   const handleSignOut = useCallback3(() => __async(void 0, null, function* () {
-    signOut();
+    yield signOut();
     setIsOpen(false);
   }), [signOut]);
   const handleSignIn = useCallback3(() => __async(void 0, null, function* () {
@@ -929,7 +713,7 @@ var UserButton = ({
       setIsOpen(false);
     }
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     if (isOpen) {
       window.addEventListener("click", handleClickOutside);
       window.addEventListener("keydown", handleEscape);
@@ -939,38 +723,38 @@ var UserButton = ({
       window.removeEventListener("keydown", handleEscape);
     };
   }, [handleClickOutside, handleEscape, isOpen]);
-  if (user) {
-    return /* @__PURE__ */ jsxs5("div", { className: "cac-relative", id: "civic-dropdown-container", children: [
+  if (isAuthenticated) {
+    return /* @__PURE__ */ jsxs5("div", { className: "relative", id: "civic-dropdown-container", children: [
       /* @__PURE__ */ jsxs5(
         "button",
         {
           className: cn(
-            "cac-flex cac-w-full cac-items-center cac-justify-between cac-gap-2 cac-rounded-full cac-border cac-border-neutral-500 cac-px-3 cac-py-2 cac-text-neutral-500 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50",
+            "flex w-full items-center justify-between gap-2 rounded-full border border-neutral-500 px-3 py-2 text-neutral-500 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
             className
           ),
           onClick: () => setIsOpen((isOpen2) => !isOpen2),
           children: [
-            (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(
+            (user == null ? void 0 : user.picture) ? /* @__PURE__ */ jsx11("span", { className: "relative flex h-10 w-10 shrink-0 gap-2 overflow-hidden rounded-full", children: /* @__PURE__ */ jsx11(
               "img",
               {
-                className: "cac-h-full cac-w-full cac-object-cover",
+                className: "h-full w-full object-cover",
                 src: user.picture,
                 alt: (user == null ? void 0 : user.name) || (user == null ? void 0 : user.email)
               }
-            ) }) : /* @__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__ */ jsx11("div", {}),
+            /* @__PURE__ */ jsx11("span", { children: (user == null ? void 0 : user.name) || (user == null ? void 0 : user.email) }),
+            isOpen ? /* @__PURE__ */ jsx11(ChevronUp, {}) : /* @__PURE__ */ jsx11(ChevronDown, {})
           ]
         }
       ),
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx11(
         "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__ */ jsx13("ul", { children: /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
+          className: isOpen ? "absolute right-0 mt-2 w-full rounded-lg bg-white py-2 text-neutral-500 shadow-xl" : "hidden",
+          children: /* @__PURE__ */ jsx11("ul", { children: /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(
             "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",
+              className: "block w-full px-4 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
               onClick: handleSignOut,
               children: "Logout"
             }
@@ -979,12 +763,11 @@ var UserButton = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx11(
     "button",
     {
-      "data-testid": "sign-in-button",
       className: cn(
-        "cac-rounded-full cac-border cac-border-neutral-500 cac-px-3 cac-py-2 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50",
+        "rounded-full border border-neutral-500 px-3 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
         className
       ),
       onClick: handleSignIn,
@@ -994,18 +777,17 @@ var UserButton = ({
 };
 
 // src/react/components/SignInButton.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var SignInButton = ({
   displayMode,
   className
 }) => {
-  const { signIn } = useUser();
-  return /* @__PURE__ */ jsx14(
+  const { signIn } = useAuth();
+  return /* @__PURE__ */ jsx12(
     "button",
     {
-      "data-testid": "sign-in-button",
       className: cn(
-        "cac-rounded-full cac-border cac-border-neutral-500 cac-px-3 cac-py-2 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50",
+        "rounded-full border border-neutral-500 px-3 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
         className
       ),
       onClick: () => signIn(displayMode),
@@ -1015,14 +797,14 @@ var SignInButton = ({
 };
 
 // src/react/components/SignOutButton.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var SignOutButton = ({ className }) => {
-  const { signOut } = useUser();
-  return /* @__PURE__ */ jsx15(
+  const { signOut } = useAuth();
+  return /* @__PURE__ */ jsx13(
     "button",
     {
       className: cn(
-        "cac-rounded-full cac-border cac-border-neutral-500 cac-px-3 cac-py-2 cac-transition-colors hover:cac-bg-neutral-200 hover:cac-bg-opacity-50",
+        "rounded-full border border-neutral-500 px-3 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
         className
       ),
       onClick: () => signOut(),
@@ -1032,14 +814,13 @@ var SignOutButton = ({ className }) => {
 };
 
 // src/react/components/NextLogOut.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var NextLogOut = ({ children }) => {
   const config = resolveAuthConfig();
   const logoutUrl = `${config.logoutUrl}`;
-  return /* @__PURE__ */ jsx16("a", { href: logoutUrl, children });
+  return /* @__PURE__ */ jsx14("a", { href: logoutUrl, children });
 };
 export {
-  CivicAuthIframeContainer,
   CivicAuthProvider,
   CivicNextAuthProvider,
   NextLogOut,
@@ -1047,11 +828,9 @@ export {
   SignOutButton,
   UserButton,
   useAuth,
-  useConfig,
-  useIframe,
+  useNextUser,
   useSession,
   useToken,
-  useTokenCookie,
   useUser,
   useUserCookie
 };