@civic/auth 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/react.mjs

@@ -1,18 +1,21 @@
 import {
   resolveAuthConfig,
   resolveCallbackUrl
-} from "./chunk-NQPMNXBL.mjs";
+} from "./chunk-EAANLFR5.mjs";
 import {
+  BrowserAuthenticationInitiator,
+  BrowserAuthenticationService,
+  BrowserPublicClientPKCEProducer,
+  ConfidentialClientPKCEConsumer,
   DEFAULT_SCOPES,
+  GenericUserSession,
   IFRAME_ID,
-  buildOauth2Client,
+  LocalStorageAdapter,
   cn,
-  displayModeFromState,
   generateState,
-  getOauthEndpoints,
-  isPopupBlocked,
-  validateOauth2Tokens
-} from "./chunk-KBDRDCE5.mjs";
+  getUser,
+  isWindowInIframe
+} from "./chunk-PMDIR5XE.mjs";
 import {
   __async,
   __objRest,
@@ -54,16 +57,32 @@ 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"
+  displayMode: "iframe",
+  iframeRef: null,
+  setAuthResponseUrl: () => {
+  }
 };
 var SessionContext = createContext2(defaultSession);
-var SessionProvider = ({ children, session }) => /* @__PURE__ */ jsx(SessionContext.Provider, { value: session || defaultSession, children });
+var SessionProvider = ({
+  children,
+  session,
+  iframeRef,
+  setAuthResponseUrl
+}) => /* @__PURE__ */ jsx(
+  SessionContext.Provider,
+  {
+    value: __spreadProps(__spreadValues({}, session || defaultSession), { iframeRef, setAuthResponseUrl }),
+    children
+  }
+);
 
 // src/react/hooks/useSession.tsx
 var useSession = () => {
@@ -147,26 +166,18 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var UserContext = createContext4(null);
 var UserProvider = ({
   children,
-  userInfoService
+  storage
 }) => {
   const { isLoading: authLoading, error: authError } = useAuth();
   const session = useSession();
-  const { forwardedTokens, idToken, accessToken, refreshToken } = useToken();
+  const { accessToken } = useToken();
   const { signIn, signOut } = useAuth();
   const fetchUser = () => __async(void 0, null, function* () {
-    if (!accessToken || !userInfoService) {
-      return null;
-    }
-    const user2 = yield userInfoService == null ? void 0 : userInfoService.getUserInfo(accessToken, idToken);
-    if (!user2) {
+    if (!accessToken) {
       return null;
     }
-    return __spreadProps(__spreadValues({}, user2), {
-      forwardedTokens,
-      idToken,
-      accessToken,
-      refreshToken
-    });
+    const userSession = new GenericUserSession(storage);
+    return userSession.get();
   });
   const {
     data: user,
@@ -205,344 +216,7 @@ import {
 } from "react";
 import { useMutation as useMutation2, useQuery as useQuery2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 
-// src/services/UserInfoService.ts
-import { parseJWT as parseJWT2 } from "oslo/jwt";
-var UserInfoServiceImpl = class {
-  constructor(endpoints) {
-    this.endpoints = endpoints;
-  }
-  extractUserFromIdToken(idToken) {
-    const parsedJWT = parseJWT2(idToken);
-    if (!parsedJWT) {
-      return null;
-    }
-    return parsedJWT.payload;
-  }
-  getUserInfo(accessToken, idToken) {
-    return __async(this, null, function* () {
-      if (idToken) {
-        return this.extractUserFromIdToken(idToken);
-      }
-      const userInfo = yield fetch(this.endpoints.userinfo, {
-        headers: { Authorization: `Bearer ${accessToken}` }
-      });
-      return userInfo.json();
-    });
-  }
-};
-
-// src/services/SessionService.ts
-import { generateCodeVerifier } from "oslo/oauth2";
-var AuthSessionServiceImpl = class {
-  constructor(clientId, redirectUrl, oauthServer, inputEndpoints) {
-    this.clientId = clientId;
-    this.redirectUrl = redirectUrl;
-    this.oauthServer = oauthServer;
-    this.inputEndpoints = inputEndpoints;
-    this.codeVerifier = void 0;
-    this.refreshTokenTimeout = null;
-    this.codeVerifier = this.getCodeVerifier();
-    this.endpoints = inputEndpoints;
-    this.redirectUrl = redirectUrl;
-  }
-  getCodeVerifier() {
-    return generateCodeVerifier();
-  }
-  getUserInfoService() {
-    return __async(this, null, function* () {
-      if (this.userInfoService) {
-        return this.userInfoService;
-      }
-      const endpoints = yield this.getEndpoints();
-      this.userInfoService = new UserInfoServiceImpl(endpoints);
-      return this.userInfoService;
-    });
-  }
-  getEndpoints() {
-    return __async(this, null, function* () {
-      var _a;
-      if ((_a = this.endpoints) == null ? void 0 : _a.auth) {
-        return this.endpoints;
-      }
-      const jwksEndpoints = yield getOauthEndpoints(this.oauthServer);
-      return this.endpoints ? __spreadValues(__spreadValues({}, this.endpoints), jwksEndpoints) : jwksEndpoints;
-    });
-  }
-  getOauth2Client() {
-    return __async(this, null, function* () {
-      if (this.oauth2Client) {
-        return this.oauth2Client;
-      }
-      const endpoints = yield this.getEndpoints();
-      this.oauth2Client = buildOauth2Client(
-        this.clientId,
-        this.redirectUrl,
-        endpoints
-      );
-      return this.oauth2Client;
-    });
-  }
-  getSessionData() {
-    console.log("getSessionData", this.clientId);
-    const storedItem = localStorage.getItem(`civic-auth:${this.clientId}`) || "{}";
-    console.log("stored item", storedItem);
-    return JSON.parse(storedItem);
-  }
-  updateSessionData(data) {
-    localStorage.setItem(
-      `civic-auth:${this.clientId}`,
-      JSON.stringify(__spreadValues({}, data))
-    );
-  }
-  getUser() {
-    return JSON.parse(
-      localStorage.getItem(`civic-auth:${this.clientId}:user`) || "{}"
-    );
-  }
-  setUser(data) {
-    localStorage.setItem(
-      `civic-auth:${this.clientId}:user`,
-      JSON.stringify(data === null ? {} : data)
-    );
-  }
-  clearSessionData() {
-    localStorage.setItem(`civic-auth:${this.clientId}`, JSON.stringify({}));
-  }
-  getAuthorizationUrlWithChallenge(state, scopes) {
-    return __async(this, null, function* () {
-      var _a;
-      const oauth2Client = yield this.getOauth2Client();
-      if ((_a = this.endpoints) == null ? void 0 : _a.challenge) {
-        const challenge = yield fetch(this.endpoints.challenge).then(
-          (res) => res.json().then((data) => data.challenge)
-        );
-        const oAuthUrl = yield oauth2Client.createAuthorizationURL({
-          state,
-          scopes
-        });
-        oAuthUrl.searchParams.append("code_challenge", challenge);
-        oAuthUrl.searchParams.append("code_challenge_method", "S256");
-        return oAuthUrl;
-      }
-      return oauth2Client.createAuthorizationURL({
-        state,
-        codeVerifier: this.codeVerifier,
-        codeChallengeMethod: "S256",
-        scopes
-      });
-    });
-  }
-  getAuthorizationUrl(scopes, displayMode, nonce) {
-    return __async(this, null, function* () {
-      const state = generateState(displayMode);
-      const existingSessionData = this.getSessionData();
-      this.updateSessionData(__spreadProps(__spreadValues({}, existingSessionData), {
-        codeVerifier: this.codeVerifier,
-        displayMode
-      }));
-      const oAuthUrl = yield this.getAuthorizationUrlWithChallenge(state, scopes);
-      if (nonce) {
-        oAuthUrl.searchParams.append("nonce", nonce);
-      }
-      oAuthUrl.searchParams.append("prompt", "consent");
-      return oAuthUrl.toString();
-    });
-  }
-  // TODO fix the Window reference
-  loadAuthorizationUrl(authorizationURL, displayMode) {
-    switch (displayMode) {
-      case "iframe":
-        break;
-      case "redirect":
-        window.location.href = authorizationURL;
-        break;
-      case "new_tab":
-        window.open(authorizationURL, "_blank");
-        break;
-      case "custom_tab":
-        break;
-    }
-  }
-  init() {
-    return __async(this, null, function* () {
-      yield this.getOauth2Client();
-      return this;
-    });
-  }
-  logout() {
-    return __async(this, null, function* () {
-      this.updateSessionData({ authenticated: false });
-    });
-  }
-  determineDisplayMode(displayMode) {
-    if (isPopupBlocked() && displayMode === "iframe") {
-      displayMode = "redirect";
-    }
-    return displayMode;
-  }
-  signIn(displayMode, scopes, nonce) {
-    return __async(this, null, function* () {
-      const authorizationURL = yield this.getAuthorizationUrl(
-        scopes,
-        displayMode,
-        nonce
-      );
-      this.loadAuthorizationUrl(authorizationURL, displayMode);
-    });
-  }
-  tokenExchange(responseUrl) {
-    return __async(this, null, function* () {
-      let session = this.getSessionData();
-      if (!session.authenticated) {
-        const url = new URL(responseUrl);
-        const authorizationCode = url.searchParams.get("code");
-        const returnedState = url.searchParams.get("state");
-        if (!authorizationCode || !returnedState) {
-          throw new Error("Invalid authorization response");
-        }
-        const codeVerifier = session.codeVerifier;
-        const oauth2Client = yield this.getOauth2Client();
-        const tokens = yield oauth2Client.validateAuthorizationCode(
-          authorizationCode,
-          {
-            codeVerifier
-          }
-        );
-        try {
-          yield this.validateTokens(tokens);
-        } catch (error) {
-          console.error("tokenExchange tokens", { error, tokens });
-          throw new Error(
-            `OIDC tokens validation failed: ${error.message}`
-          );
-        }
-        const parsedDisplayMode = displayModeFromState(
-          returnedState,
-          session.displayMode
-        );
-        session = __spreadProps(__spreadValues({}, session), {
-          displayMode: parsedDisplayMode,
-          idToken: tokens.id_token,
-          authenticated: true,
-          state: returnedState,
-          accessToken: tokens.access_token,
-          refreshToken: tokens.refresh_token,
-          timestamp: Date.now(),
-          expiresIn: tokens.expires_in
-        });
-        this.updateSessionData(session);
-        const user = yield (yield this.getUserInfoService()).getUserInfo(tokens.access_token, tokens.id_token || null);
-        this.setUser(user);
-      }
-      this.setupTokenRefresh(session);
-      if (session.displayMode === "new_tab") {
-        window.close();
-      } else if (session.displayMode === "redirect") {
-      }
-      return session;
-    });
-  }
-  setupTokenRefresh(session) {
-    if (this.refreshTokenTimeout) {
-      clearTimeout(this.refreshTokenTimeout);
-    }
-    if (session.expiresIn) {
-      const elapsedTime = Date.now() - (session.timestamp || 0);
-      const remainingTime = session.expiresIn * 1e3 - elapsedTime;
-      const refreshTime = Math.max(0, remainingTime - 6e4);
-      this.refreshTokenTimeout = setTimeout(() => {
-        this.refreshToken().then((newSession) => {
-          console.log("Token refreshed successfully", newSession);
-        }).catch((error) => {
-          console.error("Failed to refresh token:", error);
-          this.updateSessionData({});
-        });
-      }, refreshTime);
-    }
-  }
-  refreshToken() {
-    return __async(this, null, function* () {
-      const sessionData = this.getSessionData();
-      if (!sessionData.refreshToken) {
-        throw new Error("No refresh token available");
-      }
-      const oauth2Client = yield this.getOauth2Client();
-      const tokens = yield oauth2Client.refreshAccessToken(
-        sessionData.refreshToken
-      );
-      const session = __spreadProps(__spreadValues({}, sessionData), {
-        idToken: tokens.id_token,
-        authenticated: true,
-        accessToken: tokens.access_token,
-        refreshToken: tokens.refresh_token,
-        timestamp: Date.now(),
-        expiresIn: tokens.expires_in
-      });
-      this.updateSessionData(session);
-      this.setupTokenRefresh(session);
-      return session;
-    });
-  }
-  getUserInfo() {
-    return __async(this, null, function* () {
-      const sessionData = this.getSessionData();
-      if (!sessionData.accessToken) {
-        throw new Error("No access token available");
-      }
-      const userInfoService = yield this.getUserInfoService();
-      return userInfoService.getUserInfo(
-        sessionData.accessToken,
-        sessionData.idToken || null
-      );
-    });
-  }
-  /**
-   * Uses the jose library to validate a JWT token using the OAuth JWKS endpoint
-   * @returns {Promise<jose.JWTPayload>}
-   * @throws {Error} if the token is invalid
-   * @param tokens
-   */
-  validateTokens(tokens) {
-    return __async(this, null, function* () {
-      const endpoints = yield this.getEndpoints();
-      if (!this.oauth2Client) yield this.init();
-      return validateOauth2Tokens(
-        tokens,
-        endpoints,
-        this.oauth2Client,
-        this.oauthServer
-      );
-    });
-  }
-  validateExistingSession() {
-    return __async(this, null, function* () {
-      const sessionData = this.getSessionData();
-      try {
-        if (!sessionData.idToken || !sessionData.accessToken) {
-          const unAuthenticatedSession = __spreadProps(__spreadValues({}, sessionData), { authenticated: false });
-          this.updateSessionData(unAuthenticatedSession);
-          return unAuthenticatedSession;
-        }
-        yield this.validateTokens({
-          id_token: sessionData.idToken,
-          access_token: sessionData.accessToken,
-          refresh_token: sessionData.refreshToken
-        });
-        sessionData.authenticated = true;
-        return sessionData;
-      } catch (error) {
-        console.warn("Failed to validate existing tokens", error);
-        const unAuthenticatedSession = {
-          authenticated: false
-        };
-        this.updateSessionData(unAuthenticatedSession);
-        return unAuthenticatedSession;
-      }
-    });
-  }
-};
-
-// src/react/components/CivicAuthIframeModal.tsx
+// src/react/components/CivicAuthIframeContainer.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/react/components/LoadingIcon.tsx
@@ -603,13 +277,12 @@ var CloseIcon = () => /* @__PURE__ */ jsxs2(
 import { forwardRef } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var CivicAuthIframe = forwardRef(
-  ({ authUrl, onLoad }, ref) => {
+  ({ onLoad }, ref) => {
     return /* @__PURE__ */ jsx6(
       "iframe",
       {
         id: IFRAME_ID,
         ref,
-        src: authUrl,
         className: "cac-h-96 cac-w-80 cac-border-none",
         onLoad
       }
@@ -618,25 +291,57 @@ var CivicAuthIframe = forwardRef(
 );
 CivicAuthIframe.displayName = "CivicAuthIframe";
 
-// src/react/components/CivicAuthIframeModal.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var CivicAuthIframeModal = ({
-  authUrl,
-  redirectUri,
-  setAuthResponseUrl,
+// src/react/components/CivicAuthIframeContainer.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function NoChrome({
+  children
+}) {
+  return /* @__PURE__ */ jsx7(Fragment, { 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 = ({
   onClose,
-  iframeRef,
-  redirectInProgress = false,
   closeOnRedirect = true
 }) => {
   const [isLoading, setIsLoading] = useState(true);
+  const config = useConfig();
+  const { setAuthResponseUrl, iframeRef } = useSession();
   const processIframeUrl = useCallback(() => {
-    if (iframeRef.current && iframeRef.current.contentWindow) {
+    if (iframeRef && iframeRef.current && iframeRef.current.contentWindow) {
       try {
         const iframeUrl = iframeRef.current.contentWindow.location.href;
-        if (iframeUrl.startsWith(redirectUri)) {
+        if (iframeUrl.startsWith(config.redirectUrl)) {
           setAuthResponseUrl(iframeUrl);
-          if (closeOnRedirect) onClose();
+          if (closeOnRedirect) onClose == null ? void 0 : onClose();
           return true;
         }
       } catch (e) {
@@ -644,12 +349,18 @@ var CivicAuthIframeModal = ({
       }
     }
     return false;
-  }, [closeOnRedirect, iframeRef, onClose, redirectUri, setAuthResponseUrl]);
+  }, [
+    closeOnRedirect,
+    config.redirectUrl,
+    iframeRef,
+    onClose,
+    setAuthResponseUrl
+  ]);
   const intervalId = useRef();
   const handleEscape = useCallback(
     (event) => {
       if (event.key === "Escape") {
-        onClose();
+        onClose == null ? void 0 : onClose();
       }
     },
     [onClose]
@@ -665,39 +376,11 @@ var CivicAuthIframeModal = ({
       clearInterval(intervalId.current);
     }
   };
-  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, {})
-              }
-            ),
-            (isLoading || redirectInProgress) && /* @__PURE__ */ jsx7("div", { className: "cac-absolute cac-inset-0 cac-flex cac-items-center cac-justify-center cac-rounded-3xl cac-bg-neutral-100", children: /* @__PURE__ */ jsx7(LoadingIcon, {}) }),
-            /* @__PURE__ */ jsx7(
-              CivicAuthIframe,
-              {
-                ref: iframeRef,
-                authUrl,
-                onLoad: handleIframeLoad
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
+  const WrapperComponent = config.modalIframe ? IframeChrome : NoChrome;
+  return /* @__PURE__ */ jsxs3(WrapperComponent, { onClose, children: [
+    isLoading && /* @__PURE__ */ jsx7("div", { className: "cac-absolute cac-inset-0 cac-flex cac-items-center cac-justify-center cac-rounded-3xl cac-bg-neutral-100", children: /* @__PURE__ */ jsx7(LoadingIcon, {}) }),
+    /* @__PURE__ */ jsx7(CivicAuthIframe, { ref: iframeRef, onLoad: handleIframeLoad })
+  ] });
 };
 
 // src/config.ts
@@ -706,23 +389,30 @@ var authConfig = {
   oauthServer: "https://auth-dev.civic.com/oauth/"
 };
 
-// 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;
+// 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
 };
+var ConfigContext = createContext5(defaultConfig);
+var ConfigProvider = ({
+  children,
+  config,
+  redirectUrl,
+  modalIframe
+}) => /* @__PURE__ */ jsx8(
+  ConfigContext.Provider,
+  {
+    value: { config, redirectUrl, modalIframe: !!modalIframe },
+    children
+  }
+);
 
 // src/shared/AuthProvider.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var globalThisObject;
 if (typeof window !== "undefined") {
   globalThisObject = window;
@@ -732,24 +422,32 @@ if (typeof window !== "undefined") {
   globalThisObject = Function("return this")();
 }
 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 }) });
+}
 var AuthProvider = ({
   children,
   clientId,
   redirectUrl: inputRedirectUrl,
   config = authConfig,
-  nonce,
   onSignIn,
   onSignOut,
-  authServiceImpl,
-  serverSideTokenExchange
+  pkceConsumer,
+  nonce,
+  modalIframe = true
 }) => {
   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 serverBasedPKCE = pkceConsumer instanceof ConfidentialClientPKCEConsumer;
   useEffect2(() => {
     if (typeof globalThis.window !== "undefined") {
       setCurrentUrl(globalThis.window.location.href);
@@ -761,26 +459,30 @@ var AuthProvider = ({
     () => (inputRedirectUrl || currentUrl || "").split("?")[0],
     [currentUrl, inputRedirectUrl]
   );
-  const authService = useMemo2(
-    () => currentUrl ? authServiceImpl || new AuthSessionServiceImpl(
+  const [authService, setAuthService] = useState2();
+  useEffect2(() => {
+    if (!currentUrl) return;
+    BrowserAuthenticationService.build({
       clientId,
       redirectUrl,
-      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]);
+      oauthServer: config.oauthServer,
+      scopes: DEFAULT_SCOPES,
+      displayMode
+    }).then(setAuthService);
+  }, [currentUrl, clientId, redirectUrl, config, displayMode]);
   const {
     data: session,
     isLoading,
     error
   } = useQuery2({
-    queryKey: ["session", authResponseUrl, iframeUrl, currentUrl, isInIframe],
+    queryKey: [
+      "session",
+      authResponseUrl,
+      iframeUrl,
+      currentUrl,
+      isInIframe,
+      authService
+    ],
     queryFn: () => __async(void 0, null, function* () {
       if (!authService) {
         return { authenticated: false };
@@ -789,12 +491,24 @@ var AuthProvider = ({
         authResponseUrl ? authResponseUrl : globalThis.window.location.href || ""
       );
       const code = url.searchParams.get("code");
-      if (code && !isInIframe && !serverSideTokenExchange) {
+      const state = url.searchParams.get("state");
+      if (!serverBasedPKCE && code && state && !isInIframe) {
         try {
-          console.log("AuthProvider useQuery code", { isInIframe, code });
-          const newSession = yield authService.tokenExchange(url.toString());
+          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);
           onSignIn == null ? void 0 : onSignIn();
-          return newSession;
+          return authService.getSessionData();
         } catch (error2) {
           setTokenExchangeError(error2);
           onSignIn == null ? void 0 : onSignIn(
@@ -812,39 +526,90 @@ var AuthProvider = ({
   });
   const signOutMutation = useMutation2({
     mutationFn: () => __async(void 0, null, function* () {
-      authService == null ? void 0 : authService.updateSessionData({});
+      const authInitiator = getAuthInitiator();
+      authInitiator == null ? void 0 : authInitiator.signOut();
       setIframeUrl(null);
+      setShowIFrame(false);
       setAuthResponseUrl(null);
       onSignOut == null ? void 0 : onSignOut();
     }),
     onSuccess: () => {
       queryClient3.setQueryData(
-        ["session", authResponseUrl, iframeUrl, currentUrl, isInIframe],
+        [
+          "session",
+          authResponseUrl,
+          iframeUrl,
+          currentUrl,
+          isInIframe,
+          authService
+        ],
         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* () {
-      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
-      );
+      setDisplayMode(overrideDisplayMode);
+      const authInitiator = getAuthInitiator(overrideDisplayMode);
+      setBrowserAuthenticationInitiator(authInitiator);
       if (overrideDisplayMode === "iframe") {
-        setIframeUrl(url);
-        return;
+        setShowIFrame(true);
+      } else if (overrideDisplayMode === "redirect") {
+        setIsRedirecting(true);
       }
-      authService.loadAuthorizationUrl(url, overrideDisplayMode);
+      authInitiator == null ? void 0 : authInitiator.signIn(iframeRef.current);
     }),
-    [authService, nonce]
+    [getAuthInitiator]
   );
   const isAuthenticated = useMemo2(
     () => session ? session.authenticated : false,
     [session]
   );
+  const {
+    data: autoSignIn,
+    isLoading: autoSignInLoading,
+    error: autoSignInError
+  } = 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,
@@ -857,37 +622,57 @@ var AuthProvider = ({
     }),
     [isLoading, error, signOutMutation, isAuthenticated, signIn]
   );
-  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: "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__ */ jsx8("div", { className: "cac-absolute cac-inset-0 cac-flex cac-items-center cac-justify-center cac-bg-white", children: tokenExchangeError || error ? /* @__PURE__ */ jsxs4("div", { children: [
-      "Error: ",
-      (tokenExchangeError || error).message
-    ] }) : /* @__PURE__ */ jsx8(LoadingIcon, {}) }) }),
-    children
-  ] }) }) }) });
+  return /* @__PURE__ */ jsx9(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx9(
+    ConfigProvider,
+    {
+      config,
+      redirectUrl,
+      modalIframe,
+      children: /* @__PURE__ */ jsx9(
+        SessionProvider,
+        {
+          session,
+          setAuthResponseUrl,
+          iframeRef,
+          children: /* @__PURE__ */ jsx9(TokenProvider, { children: /* @__PURE__ */ jsxs4(UserProvider, { storage: new LocalStorageAdapter(), children: [
+            modalIframe && !isInIframe && !(session == null ? void 0 : session.authenticated) && /* @__PURE__ */ jsx9(
+              "div",
+              {
+                style: showIFrame ? { display: "block" } : { display: "none" },
+                children: /* @__PURE__ */ jsx9(CivicAuthIframeContainer, { onClose: () => setShowIFrame(false) })
+              }
+            ),
+            modalIframe && (isInIframe || isRedirecting || isLoading) && /* @__PURE__ */ jsx9(BlockDisplay, { children: /* @__PURE__ */ jsx9(LoadingIcon, {}) }),
+            (tokenExchangeError || error) && /* @__PURE__ */ jsx9(BlockDisplay, { children: /* @__PURE__ */ jsxs4("div", { children: [
+              "Error: ",
+              (tokenExchangeError || error).message
+            ] }) }),
+            children
+          ] }) })
+        }
+      )
+    }
+  ) });
 };
 
 // src/shared/CivicAuthProvider.tsx
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "@civic/auth/styles.css";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
 var CivicAuthProvider = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx9(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx9(AuthProvider, __spreadProps(__spreadValues({}, props), { children })) });
+  return /* @__PURE__ */ jsx10(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx10(
+    AuthProvider,
+    __spreadProps(__spreadValues({}, props), {
+      pkceConsumer: new BrowserPublicClientPKCEProducer(),
+      children
+    })
+  ) });
 };
 
 // src/react/providers/NextAuthProvider.tsx
-import { createContext as createContext5, useContext as useContext4, useEffect as useEffect4, useMemo as useMemo3, useState as useState3 } from "react";
+import { createContext as createContext6, useContext as useContext4, useEffect as useEffect4, useState as useState3 } from "react";
 
 // src/react/hooks/useUserCookie.ts
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
@@ -901,7 +686,7 @@ var getCookieValue = (key, window2) => {
   const cookies = cookie.split(";");
   for (const c of cookies) {
     const [name, value] = c.trim().split("=");
-    if (name === key) {
+    if (value && name === key) {
       try {
         return JSON.parse(decodeURIComponent(value));
       } catch (e) {
@@ -945,10 +730,10 @@ var useUserCookie = () => {
 // src/react/providers/NextAuthProvider.tsx
 import { QueryClient as QueryClient2, QueryClientProvider as QueryClientProvider2 } 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 queryClient2 = new QueryClient2();
 var defaultUserContext = { user: null };
-var UserContext2 = createContext5(defaultUserContext);
+var UserContext2 = createContext6(defaultUserContext);
 var CivicNextAuthProvider = (_a) => {
   var _b = _a, {
     children
@@ -964,22 +749,14 @@ var CivicNextAuthProvider = (_a) => {
       setRedirectUrl(resolveCallbackUrl(resolveAuthConfig(), currentUrl));
     }
   }, [callbackUrl]);
-  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(
+  return /* @__PURE__ */ jsx11(QueryClientProvider2, { client: queryClient2, children: /* @__PURE__ */ jsx11(
     AuthProvider,
     __spreadProps(__spreadValues({}, props), {
+      redirectUrl,
       config: { oauthServer },
       clientId,
-      authServiceImpl: authService,
-      serverSideTokenExchange: true,
-      children: /* @__PURE__ */ jsx10(UserContext2.Provider, { value: user, children })
+      pkceConsumer: new ConfidentialClientPKCEConsumer(challengeUrl),
+      children: /* @__PURE__ */ jsx11(UserContext2.Provider, { value: user, children })
     })
   ) });
 };
@@ -994,10 +771,20 @@ var useUser = () => {
   return context;
 };
 
+// src/react/hooks/useConfig.tsx
+import { useContext as useContext6 } from "react";
+var useConfig = () => {
+  const context = useContext6(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within an ConfigProvider");
+  }
+  return context;
+};
+
 // src/react/components/UserButton.tsx
 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(
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChevronDown = () => /* @__PURE__ */ jsx12(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1010,10 +797,10 @@ var ChevronDown = () => /* @__PURE__ */ jsx11(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-chevron-down",
-    children: /* @__PURE__ */ jsx11("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" })
   }
 );
-var ChevronUp = () => /* @__PURE__ */ jsx11(
+var ChevronUp = () => /* @__PURE__ */ jsx12(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1026,7 +813,7 @@ var ChevronUp = () => /* @__PURE__ */ jsx11(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-chevron-up",
-    children: /* @__PURE__ */ jsx11("path", { d: "m18 15-6-6-6 6" })
+    children: /* @__PURE__ */ jsx12("path", { d: "m18 15-6-6-6 6" })
   }
 );
 var UserButton = ({
@@ -1076,24 +863,24 @@ var UserButton = ({
           ),
           onClick: () => setIsOpen((isOpen2) => !isOpen2),
           children: [
-            (user == null ? void 0 : user.picture) ? /* @__PURE__ */ jsx11("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__ */ jsx11(
+            (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(
               "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__ */ 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__ */ 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__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         "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__ */ jsx11("ul", { children: /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12("ul", { children: /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsx12(
             "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",
@@ -1105,9 +892,10 @@ var UserButton = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx11(
+  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",
         className
@@ -1119,15 +907,16 @@ var UserButton = ({
 };
 
 // src/react/components/SignInButton.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var SignInButton = ({
   displayMode,
   className
 }) => {
   const { signIn } = useAuth();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "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",
         className
@@ -1139,10 +928,10 @@ var SignInButton = ({
 };
 
 // src/react/components/SignOutButton.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SignOutButton = ({ className }) => {
   const { signOut } = useAuth();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "button",
     {
       className: cn(
@@ -1156,13 +945,14 @@ var SignOutButton = ({ className }) => {
 };
 
 // src/react/components/NextLogOut.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var NextLogOut = ({ children }) => {
   const config = resolveAuthConfig();
   const logoutUrl = `${config.logoutUrl}`;
-  return /* @__PURE__ */ jsx14("a", { href: logoutUrl, children });
+  return /* @__PURE__ */ jsx15("a", { href: logoutUrl, children });
 };
 export {
+  CivicAuthIframeContainer,
   CivicAuthProvider,
   CivicNextAuthProvider,
   NextLogOut,
@@ -1170,6 +960,7 @@ export {
   SignOutButton,
   UserButton,
   useAuth,
+  useConfig,
   useNextUser,
   useSession,
   useToken,