@civic/auth 0.0.1-beta.1 → 0.0.1-beta.10

package/dist/react.mjs

@@ -1,65 +1,43 @@
-'use client'
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
+import {
+  resolveAuthConfig,
+  resolveCallbackUrl
+} from "./chunk-EAANLFR5.mjs";
+import {
+  BrowserAuthenticationInitiator,
+  BrowserAuthenticationService,
+  BrowserPublicClientPKCEProducer,
+  ConfidentialClientPKCEConsumer,
+  DEFAULT_SCOPES,
+  GenericUserSession,
+  IFRAME_ID,
+  LocalStorageAdapter,
+  cn,
+  generateState,
+  getUser,
+  isWindowInIframe
+} from "./chunk-PMDIR5XE.mjs";
+import {
+  __async,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-RGHW4PYM.mjs";
 
 // src/react/hooks/useUser.tsx
-import { useContext as useContext4 } from "react";
+import { useContext as useContext5 } from "react";
 
 // src/react/providers/UserProvider.tsx
-import { createContext } from "react";
+import { createContext as createContext4 } from "react";
 import { useQuery } from "@tanstack/react-query";
 
 // src/react/hooks/useAuth.tsx
 import { useContext } from "react";
+
+// src/shared/AuthContext.tsx
+import { createContext } from "react";
+var AuthContext = createContext(null);
+
+// src/react/hooks/useAuth.tsx
 var useAuth = () => {
   const context = useContext(AuthContext);
   if (!context) {
@@ -69,71 +47,53 @@ var useAuth = () => {
 };
 
 // src/react/hooks/useToken.tsx
+import { useContext as useContext3 } from "react";
+
+// src/react/providers/TokenProvider.tsx
+import { createContext as createContext3, useMemo } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+// src/react/hooks/useSession.tsx
 import { useContext as useContext2 } from "react";
-var useToken = () => {
-  const context = useContext2(TokenContext);
-  if (!context) {
-    throw new Error("useToken must be used within a TokenProvider");
-  }
-  return context;
-};
 
-// src/react/providers/UserProvider.tsx
+// src/react/providers/SessionProvider.tsx
+import {
+  createContext as createContext2
+} from "react";
 import { jsx } from "react/jsx-runtime";
-var UserContext = createContext(null);
-var UserProvider = ({
+var defaultSession = {
+  authenticated: false,
+  idToken: void 0,
+  accessToken: void 0,
+  displayMode: "iframe",
+  iframeRef: null,
+  setAuthResponseUrl: () => {
+  }
+};
+var SessionContext = createContext2(defaultSession);
+var SessionProvider = ({
   children,
-  userInfoService
-}) => {
-  const { isLoading: authLoading, error: authError } = useAuth();
-  const session = useSession();
-  const { forwardedTokens, idToken, accessToken, refreshToken } = 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) {
-      return null;
-    }
-    return __spreadProps(__spreadValues({}, user2), {
-      forwardedTokens,
-      idToken,
-      accessToken,
-      refreshToken
-    });
-  });
-  const {
-    data: user,
-    isLoading: userLoading,
-    error: userError
-  } = useQuery({
-    queryKey: ["user", session == null ? void 0 : session.idToken],
-    queryFn: fetchUser,
-    enabled: !!(session == null ? void 0 : session.idToken)
-    // Only run the query if we have an access token
-  });
-  const isLoading = authLoading || userLoading;
-  const error = authError || userError;
-  return /* @__PURE__ */ jsx(
-    UserContext.Provider,
-    {
-      value: {
-        user: user != null ? user : null,
-        isLoading,
-        error,
-        signIn,
-        signOut
-      },
-      children
-    }
-  );
+  session,
+  iframeRef,
+  setAuthResponseUrl
+}) => /* @__PURE__ */ jsx(
+  SessionContext.Provider,
+  {
+    value: __spreadProps(__spreadValues({}, session || defaultSession), { iframeRef, setAuthResponseUrl }),
+    children
+  }
+);
+
+// src/react/hooks/useSession.tsx
+var useSession = () => {
+  const context = useContext2(SessionContext);
+  if (!context) {
+    throw new Error("useSession must be used within an SessionProvider");
+  }
+  return context;
 };
 
 // src/react/providers/TokenProvider.tsx
-import { createContext as createContext2, useMemo } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { parseJWT } from "oslo/jwt";
 
 // src/lib/jwt.ts
@@ -150,7 +110,7 @@ var convertForwardedTokenFormat = (inputTokens) => Object.fromEntries(
 
 // src/react/providers/TokenProvider.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var TokenContext = createContext2(void 0);
+var TokenContext = createContext3(void 0);
 var TokenProvider = ({ children }) => {
   const { isLoading, error: authError } = useAuth();
   const session = useSession();
@@ -192,454 +152,71 @@ var TokenProvider = ({ children }) => {
   return /* @__PURE__ */ jsx2(TokenContext.Provider, { value, children });
 };
 
-// src/shared/AuthProvider.tsx
-import {
-  createContext as createContext4,
-  useState as useState3,
-  useEffect as useEffect3,
-  useMemo as useMemo2,
-  useCallback as useCallback3,
-  useRef as useRef2
-} from "react";
-import { useQuery as useQuery2, useMutation as useMutation2, 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 { OAuth2Client, generateCodeVerifier } from "oslo/oauth2";
-import * as jose from "jose";
-
-// src/lib/oauth.ts
-import { v4 as uuid } from "uuid";
-var getIssuerVariations = (issuer) => {
-  const issuerWithoutSlash = issuer.endsWith("/") ? issuer.slice(0, issuer.length - 1) : issuer;
-  const issuerWithSlash = `${issuerWithoutSlash}/`;
-  return [issuerWithoutSlash, issuerWithSlash];
-};
-var addSlashIfNeeded = (url) => url.endsWith("/") ? url : `${url}/`;
-var getOauthEndpoints = (oauthServer) => __async(void 0, null, function* () {
-  const openIdConfigResponse = yield fetch(
-    `${addSlashIfNeeded(oauthServer)}.well-known/openid-configuration`
-  );
-  const openIdConfig = yield openIdConfigResponse.json();
-  return {
-    jwks: openIdConfig.jwks_uri,
-    auth: openIdConfig.authorization_endpoint,
-    token: openIdConfig.token_endpoint,
-    userinfo: openIdConfig.userinfo_endpoint
-  };
-});
-var generateState = (displayMode) => {
-  const jsonString = JSON.stringify({
-    uuid: uuid(),
-    displayMode
-  });
-  return btoa(jsonString);
-};
-var displayModeFromState = (state, sessionDisplayMode) => {
-  try {
-    const jsonString = btoa(state);
-    return JSON.parse(jsonString).displayMode;
-  } catch (e) {
-    console.error("Failed to parse displayMode from state:", e);
-    return sessionDisplayMode;
-  }
-};
-
-// src/utils.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-var isPopupBlocked = () => {
-  const popup = window.open("", "", "width=1,height=1");
-  if (!popup) {
-    return true;
-  }
-  try {
-    if (typeof popup.closed === "undefined") {
-      throw new Error("Popup is blocked");
-    }
-  } catch (e) {
-    return true;
+// src/react/hooks/useToken.tsx
+var useToken = () => {
+  const context = useContext3(TokenContext);
+  if (!context) {
+    throw new Error("useToken must be used within a TokenProvider");
   }
-  popup.close();
-  return false;
-};
-var cn = (...inputs) => {
-  return twMerge(clsx(inputs));
+  return context;
 };
 
-// src/services/SessionService.ts
-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;
-  }
-  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 = new OAuth2Client(
-        this.clientId,
-        endpoints.auth,
-        endpoints.token,
-        // this
-        { redirectURI: this.redirectUrl }
-      );
-      return this.oauth2Client;
-    });
-  }
-  getSessionData() {
-    return JSON.parse(
-      localStorage.getItem(`civic-auth:${this.clientId}`) || "{}"
-    );
-  }
-  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 oAuthUrl2 = yield oauth2Client.createAuthorizationURL({
-          state,
-          scopes
-        });
-        oAuthUrl2.searchParams.append("code_challenge", challenge);
-        oAuthUrl2.searchParams.append("code_challenge_method", "S256");
-        return oAuthUrl2;
-      }
-      const oAuthUrl = yield oauth2Client.createAuthorizationURL({
-        state,
-        codeVerifier: this.codeVerifier,
-        codeChallengeMethod: "S256",
-        scopes
-      });
-      return oAuthUrl;
-    });
-  }
-  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* () {
-      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);
+// src/react/providers/UserProvider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var UserContext = createContext4(null);
+var UserProvider = ({
+  children,
+  storage
+}) => {
+  const { isLoading: authLoading, error: authError } = useAuth();
+  const session = useSession();
+  const { accessToken } = useToken();
+  const { signIn, signOut } = useAuth();
+  const fetchUser = () => __async(void 0, null, function* () {
+    if (!accessToken) {
+      return null;
     }
-    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);
+    const userSession = new GenericUserSession(storage);
+    return userSession.get();
+  });
+  const {
+    data: user,
+    isLoading: userLoading,
+    error: userError
+  } = useQuery({
+    queryKey: ["user", session == null ? void 0 : session.idToken],
+    queryFn: fetchUser,
+    enabled: !!(session == null ? void 0 : session.idToken)
+    // Only run the query if we have an access token
+  });
+  const isLoading = authLoading || userLoading;
+  const error = authError || userError;
+  return /* @__PURE__ */ jsx3(
+    UserContext.Provider,
+    {
+      value: {
+        user: user != null ? user : null,
+        isLoading,
+        error,
+        signIn,
+        signOut
+      },
+      children
     }
-  }
-  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
-   * @param {string} token
-   * @returns {Promise<jose.JWTPayload>}
-   * @throws {Error} if the token is invalid
-   */
-  validateTokens(tokens) {
-    return __async(this, null, function* () {
-      const endpoints = yield this.getEndpoints();
-      const JWKS = jose.createRemoteJWKSet(new URL(endpoints.jwks));
-      const returnPayload = {};
-      console.log("issuer", getIssuerVariations(this.oauthServer));
-      const idTokenResponse = yield jose.jwtVerify(tokens.id_token, JWKS, {
-        issuer: getIssuerVariations(this.oauthServer),
-        audience: this.clientId
-      });
-      returnPayload.idToken = idTokenResponse.payload;
-      const accessTokenResponse = yield jose.jwtVerify(
-        tokens.access_token,
-        JWKS,
-        {
-          issuer: getIssuerVariations(this.oauthServer)
-        }
-      );
-      returnPayload.accessToken = accessTokenResponse.payload;
-      if (tokens.refresh_token) {
-        returnPayload.refreshToken = tokens.refresh_token;
-      }
-      return returnPayload;
-    });
-  }
-  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/constants.ts
-var DEFAULT_SCOPES = [
-  "openid",
-  "profile",
-  "email",
-  "forwardedTokens",
-  "offline_access"
-];
-var IFRAME_ID = "civic-auth-iframe";
-
-// src/react/components/CivicAuthIframe.tsx
-import { forwardRef } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var CivicAuthIframe = forwardRef(
-  ({ authUrl, onLoad }, ref) => {
-    return /* @__PURE__ */ jsx3(
-      "iframe",
-      {
-        id: IFRAME_ID,
-        ref,
-        src: authUrl,
-        className: "h-96 w-80 border-none",
-        onLoad
-      }
-    );
-  }
-);
-CivicAuthIframe.displayName = "CivicAuthIframe";
+// src/shared/AuthProvider.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { useMutation as useMutation2, useQuery as useQuery2, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 
-// src/react/components/CivicAuthIframeModal.tsx
+// src/react/components/CivicAuthIframeContainer.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
 
 // src/react/components/LoadingIcon.tsx
@@ -649,7 +226,7 @@ var LoadingIcon = () => /* @__PURE__ */ jsxs("div", { role: "status", children:
     "svg",
     {
       "aria-hidden": "true",
-      className: "inline h-8 w-8 animate-spin fill-neutral-600 text-neutral-200 dark:fill-neutral-300 dark:text-neutral-600",
+      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",
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -671,7 +248,7 @@ var LoadingIcon = () => /* @__PURE__ */ jsxs("div", { role: "status", children:
       ]
     }
   ),
-  /* @__PURE__ */ jsx4("span", { className: "sr-only", children: "Loading..." })
+  /* @__PURE__ */ jsx4("span", { className: "cac-sr-only", children: "Loading..." })
 ] });
 
 // src/react/components/CloseIcon.tsx
@@ -696,379 +273,126 @@ var CloseIcon = () => /* @__PURE__ */ jsxs2(
   }
 );
 
-// src/react/components/CivicAuthIframeModal.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var CivicAuthIframeModal = ({
-  authUrl,
-  redirectUri,
-  setAuthResponseUrl,
-  onClose,
-  iframeRef,
-  redirectInProgress = false,
-  closeOnRedirect = true
-}) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const processIframeUrl = useCallback(() => {
-    if (iframeRef.current && iframeRef.current.contentWindow) {
-      try {
-        const iframeUrl = iframeRef.current.contentWindow.location.href;
-        if (iframeUrl.startsWith(redirectUri)) {
-          setAuthResponseUrl(iframeUrl);
-          if (closeOnRedirect) onClose();
-          return true;
-        }
-      } catch (e) {
-        console.log("Waiting for redirect...");
-      }
-    }
-    return false;
-  }, [closeOnRedirect, iframeRef, onClose, redirectUri, setAuthResponseUrl]);
-  const intervalId = useRef();
-  const handleEscape = useCallback(
-    (event) => {
-      if (event.key === "Escape") {
-        onClose();
+// src/react/components/CivicAuthIframe.tsx
+import { forwardRef } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var CivicAuthIframe = forwardRef(
+  ({ onLoad }, ref) => {
+    return /* @__PURE__ */ jsx6(
+      "iframe",
+      {
+        id: IFRAME_ID,
+        ref,
+        className: "cac-h-96 cac-w-80 cac-border-none",
+        onLoad
       }
-    },
-    [onClose]
-  );
-  useEffect(() => {
-    window.addEventListener("keydown", handleEscape);
-    return () => window.removeEventListener("keydown", handleEscape);
-  });
-  const handleIframeLoad = () => {
-    setIsLoading(false);
-    console.log("handleIframeLoad");
-    if (processIframeUrl() && intervalId.current) {
-      clearInterval(intervalId.current);
-    }
-  };
-  return /* @__PURE__ */ jsx6(
+    );
+  }
+);
+CivicAuthIframe.displayName = "CivicAuthIframe";
+
+// 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: "absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-neutral-950 bg-opacity-50",
+      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: "relative rounded-3xl bg-white p-6 shadow-lg",
+          className: "cac-relative cac-rounded-3xl cac-bg-white cac-p-6 cac-shadow-lg",
           onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx6(
+            /* @__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",
+                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__ */ jsx6(CloseIcon, {})
+                children: /* @__PURE__ */ jsx7(CloseIcon, {})
               }
             ),
-            (isLoading || redirectInProgress) && /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 flex items-center justify-center rounded-3xl bg-neutral-100", children: /* @__PURE__ */ jsx6(LoadingIcon, {}) }),
-            /* @__PURE__ */ jsx6(
-              CivicAuthIframe,
-              {
-                ref: iframeRef,
-                authUrl,
-                onLoad: handleIframeLoad
-              }
-            )
+            children
           ]
         }
       )
     }
   );
-};
-
-// src/react/components/UserButton.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var ChevronDown = () => /* @__PURE__ */ jsx7(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "lucide lucide-chevron-down",
-    children: /* @__PURE__ */ jsx7("path", { d: "m6 9 6 6 6-6" })
-  }
-);
-var ChevronUp = () => /* @__PURE__ */ jsx7(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "lucide lucide-chevron-up",
-    children: /* @__PURE__ */ jsx7("path", { d: "m18 15-6-6-6 6" })
-  }
-);
-var UserButton = ({
-  displayMode,
-  className
+}
+var CivicAuthIframeContainer = ({
+  onClose,
+  closeOnRedirect = true
 }) => {
-  const [isOpen, setIsOpen] = useState2(false);
-  const { signIn, isAuthenticated, signOut } = useAuth();
-  const { user } = useUser();
-  const handleClickOutside = useCallback2((event) => {
-    const target = event.target;
-    if (!target.closest("#civic-dropdown-container")) {
-      setIsOpen(false);
-    }
-  }, []);
-  const handleSignOut = useCallback2(() => __async(void 0, null, function* () {
-    yield signOut();
-    setIsOpen(false);
-  }), [signOut]);
-  const handleSignIn = useCallback2(() => __async(void 0, null, function* () {
-    yield signIn(displayMode);
-    setIsOpen(false);
-  }), [signIn, displayMode]);
-  const handleEscape = useCallback2((event) => {
-    if (event.key === "Escape") {
-      setIsOpen(false);
-    }
-  }, []);
-  useEffect2(() => {
-    if (isOpen) {
-      window.addEventListener("click", handleClickOutside);
-      window.addEventListener("keydown", handleEscape);
-    }
-    return () => {
-      window.removeEventListener("click", handleClickOutside);
-      window.removeEventListener("keydown", handleEscape);
-    };
-  }, [handleClickOutside, handleEscape, isOpen]);
-  if (isAuthenticated) {
-    return /* @__PURE__ */ jsxs4("div", { className: "relative", id: "civic-dropdown-container", children: [
-      /* @__PURE__ */ jsxs4(
-        "button",
-        {
-          className: cn(
-            "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__ */ jsx7("span", { className: "relative flex h-10 w-10 shrink-0 gap-2 overflow-hidden rounded-full", children: /* @__PURE__ */ jsx7(
-              "img",
-              {
-                className: "h-full w-full object-cover",
-                src: user.picture,
-                alt: (user == null ? void 0 : user.name) || (user == null ? void 0 : user.email)
-              }
-            ) }) : /* @__PURE__ */ jsx7("div", {}),
-            /* @__PURE__ */ jsx7("span", { children: (user == null ? void 0 : user.name) || (user == null ? void 0 : user.email) }),
-            isOpen ? /* @__PURE__ */ jsx7(ChevronUp, {}) : /* @__PURE__ */ jsx7(ChevronDown, {})
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        "div",
-        {
-          className: isOpen ? "absolute right-0 mt-2 w-full rounded-lg bg-white py-2 text-neutral-500 shadow-xl" : "hidden",
-          children: /* @__PURE__ */ jsx7("ul", { children: /* @__PURE__ */ jsx7("li", { children: /* @__PURE__ */ jsx7(
-            "button",
-            {
-              className: "block w-full px-4 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
-              onClick: handleSignOut,
-              children: "Logout"
-            }
-          ) }) })
+  var _a;
+  const [isLoading, setIsLoading] = useState(true);
+  const { isLoading: isAuthLoading } = useAuth();
+  const config = useConfig();
+  const { serverTokenExchange } = config;
+  const { setAuthResponseUrl, iframeRef } = useSession();
+  const processIframeUrl = useCallback(() => {
+    if (iframeRef && iframeRef.current && iframeRef.current.contentWindow) {
+      try {
+        const iframeUrl = iframeRef.current.contentWindow.location.href;
+        if (iframeUrl.startsWith(config.redirectUrl)) {
+          if (serverTokenExchange) {
+            const params = new URL(iframeUrl).searchParams;
+            params.set("tokenExchange", "true");
+            fetch(`${config.redirectUrl}?${params.toString()}`);
+          } else {
+            setAuthResponseUrl(iframeUrl);
+          }
+          if (closeOnRedirect) onClose == null ? void 0 : onClose();
+          return true;
         }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx7(
-    "button",
-    {
-      className: cn(
-        "rounded-full border border-neutral-500 px-3 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
-        className
-      ),
-      onClick: handleSignIn,
-      children: "Sign in"
-    }
-  );
-};
-
-// src/react/components/SignInButton.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var SignInButton = ({
-  displayMode,
-  className
-}) => {
-  const { signIn } = useAuth();
-  return /* @__PURE__ */ jsx8(
-    "button",
-    {
-      className: cn(
-        "rounded-full border border-neutral-500 px-3 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
-        className
-      ),
-      onClick: () => signIn(displayMode),
-      children: "Sign In"
-    }
-  );
-};
-
-// src/react/components/SignOutButton.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var SignOutButton = ({ className }) => {
-  const { signOut } = useAuth();
-  return /* @__PURE__ */ jsx9(
-    "button",
-    {
-      className: cn(
-        "rounded-full border border-neutral-500 px-3 py-2 transition-colors hover:bg-neutral-200 hover:bg-opacity-50",
-        className
-      ),
-      onClick: () => signOut(),
-      children: "Sign Out"
-    }
-  );
-};
-
-// src/lib/logger.ts
-import debug from "debug";
-var PACKAGE_NAME = "@civic/auth";
-var DebugLogger = class {
-  constructor(namespace) {
-    this.debugLogger = debug(`${PACKAGE_NAME}:${namespace}:debug`);
-    this.infoLogger = debug(`${PACKAGE_NAME}:${namespace}:info`);
-    this.warnLogger = debug(`${PACKAGE_NAME}:${namespace}:warn`);
-    this.errorLogger = debug(`${PACKAGE_NAME}:${namespace}:error`);
-    this.debugLogger.color = "4";
-    this.infoLogger.color = "2";
-    this.warnLogger.color = "3";
-    this.errorLogger.color = "1";
-  }
-  debug(message, ...args) {
-    this.debugLogger(message, ...args);
-  }
-  info(message, ...args) {
-    this.infoLogger(message, ...args);
-  }
-  warn(message, ...args) {
-    this.warnLogger(message, ...args);
-  }
-  error(message, ...args) {
-    this.errorLogger(message, ...args);
-  }
-};
-var createLogger = (namespace) => new DebugLogger(namespace);
-var loggers = {
-  // Next.js specific loggers
-  nextjs: {
-    routes: createLogger("api:routes"),
-    middleware: createLogger("api:middleware"),
-    handlers: {
-      auth: createLogger("api:handlers:auth")
+      } catch (e) {
+        console.log("Waiting for redirect...");
+      }
     }
-  },
-  // React specific loggers
-  react: {
-    components: createLogger("react:components"),
-    hooks: createLogger("react:hooks"),
-    context: createLogger("react:context")
-  },
-  // Shared utilities loggers
-  services: {
-    validation: createLogger("utils:validation"),
-    network: createLogger("utils:network")
-  }
-};
-
-// src/nextjs/config.ts
-var logger = loggers.nextjs.handlers.auth;
-var defaultAuthConfig = {
-  oauthServer: "https://auth-dev.civic.com/oauth",
-  callbackUrl: "/api/auth/callback",
-  challengeUrl: "/api/auth/challenge",
-  logoutUrl: "/api/auth/logout",
-  loginUrl: "/",
-  include: ["/*"],
-  exclude: [],
-  cookies: {
-    tokens: {
-      sameSite: "strict",
-      path: "/",
-      maxAge: 60 * 60
-      // 1 hour
+    return false;
+  }, [
+    closeOnRedirect,
+    config.redirectUrl,
+    iframeRef,
+    onClose,
+    serverTokenExchange,
+    setAuthResponseUrl
+  ]);
+  const intervalId = useRef();
+  const handleEscape = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        onClose == null ? void 0 : onClose();
+      }
     },
-    user: {
-      sameSite: "strict",
-      path: "/",
-      maxAge: 60 * 60
-      // 1 hour
-    }
-  }
-};
-var withoutUndefined = (obj) => {
-  const result = {};
-  for (const key in obj) {
-    if (obj[key] !== void 0) {
-      result[key] = obj[key];
-    }
-  }
-  return result;
-};
-var resolveAuthConfig = (config = {}) => {
-  var _a, _b, _c, _d;
-  const configFromEnv = withoutUndefined({
-    clientId: process.env._civic_auth_client_id,
-    oauthServer: process.env._civic_oauth_server,
-    callbackUrl: process.env._civic_auth_callback_url,
-    loginUrl: process.env._civic_auth_login_url,
-    logoutUrl: process.env._civic_auth_logout_url,
-    include: (_a = process.env._civic_auth_includes) == null ? void 0 : _a.split(","),
-    exclude: (_b = process.env._civic_auth_excludes) == null ? void 0 : _b.split(","),
-    cookies: process.env._civic_auth_cookie_config ? JSON.parse(process.env._civic_auth_cookie_config) : void 0
+    [onClose]
+  );
+  useEffect(() => {
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
   });
-  const mergedConfig = __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, defaultAuthConfig), configFromEnv), config), {
-    // Override with directly passed config
-    cookies: {
-      tokens: __spreadValues(__spreadValues({}, defaultAuthConfig.cookies.tokens), ((_c = config.cookies) == null ? void 0 : _c.tokens) || {}),
-      user: __spreadValues(__spreadValues({}, defaultAuthConfig.cookies.user), ((_d = config.cookies) == null ? void 0 : _d.user) || {})
+  const handleIframeLoad = () => {
+    setIsLoading(false);
+    console.log("handleIframeLoad");
+    if (processIframeUrl() && intervalId.current) {
+      clearInterval(intervalId.current);
     }
-  });
-  logger.debug("Config from environment:", configFromEnv);
-  logger.debug("Resolved config:", mergedConfig);
-  if (mergedConfig.clientId === void 0) {
-    throw new Error("Civic Auth client ID is required");
-  }
-  return mergedConfig;
-};
-
-// src/react/components/NextLogOut.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var NextLogOut = ({ children }) => {
-  const config = resolveAuthConfig();
-  const logoutUrl = `${config.logoutUrl}`;
-  return /* @__PURE__ */ jsx10("a", { href: logoutUrl, children });
-};
-
-// src/react/providers/SessionProvider.tsx
-import { createContext as createContext3 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var defaultSession = {
-  authenticated: false,
-  idToken: void 0,
-  accessToken: void 0,
-  displayMode: "iframe"
+  };
+  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-neutral-100", children: /* @__PURE__ */ jsx7(LoadingIcon, {}) }),
+    /* @__PURE__ */ jsx7(CivicAuthIframe, { ref: iframeRef, onLoad: handleIframeLoad })
+  ] });
 };
-var SessionContext = createContext3(defaultSession);
-var SessionProvider = ({ children, session }) => /* @__PURE__ */ jsx11(SessionContext.Provider, { value: session || defaultSession, children });
 
 // src/config.ts
 var authConfig = {
@@ -1076,24 +400,37 @@ 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;
-    }
+// 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
   }
-  return false;
-};
+);
 
 // src/shared/AuthProvider.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-var AuthContext = createContext4(null);
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var globalThisObject;
 if (typeof window !== "undefined") {
   globalThisObject = window;
@@ -1103,25 +440,33 @@ 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] = useState3(null);
-  const [currentUrl, setCurrentUrl] = useState3(null);
-  const [isInIframe, setIsInIframe] = useState3(false);
-  const [authResponseUrl, setAuthResponseUrl] = useState3(null);
-  const [tokenExchangeError, setTokenExchangeError] = useState3();
+  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);
-  useEffect3(() => {
+  const serverTokenExchange = pkceConsumer instanceof ConfidentialClientPKCEConsumer;
+  useEffect2(() => {
     if (typeof globalThis.window !== "undefined") {
       setCurrentUrl(globalThis.window.location.href);
       const isInIframeVal = isWindowInIframe(globalThis.window);
@@ -1132,26 +477,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] = useState3();
-  useEffect3(() => {
-    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 };
@@ -1160,12 +509,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 (!serverTokenExchange && 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(
@@ -1183,39 +544,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 signIn = useCallback3(
-    (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,
+  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 (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,
@@ -1228,41 +640,66 @@ var AuthProvider = ({
     }),
     [isLoading, error, signOutMutation, isAuthenticated, signIn]
   );
-  return /* @__PURE__ */ jsx12(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx12(SessionProvider, { session, children: /* @__PURE__ */ jsx12(TokenProvider, { children: /* @__PURE__ */ jsxs5(UserProvider, { userInfoService, children: [
-    !isInIframe && iframeUrl && !(session == null ? void 0 : session.authenticated) && /* @__PURE__ */ jsx12(
-      CivicAuthIframeModal,
-      {
-        iframeRef,
-        authUrl: iframeUrl,
-        redirectUri: redirectUrl,
-        setAuthResponseUrl,
-        onClose: () => setIframeUrl(null)
-      }
-    ),
-    (tokenExchangeError || isLoading || error || isInIframe && !(tokenExchangeError || error)) && /* @__PURE__ */ jsx12("div", { className: "absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-white", children: /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 flex items-center justify-center bg-white", children: tokenExchangeError || error ? /* @__PURE__ */ jsxs5("div", { children: [
-      "Error:",
-      " ",
-      (tokenExchangeError || error).message
-    ] }) : /* @__PURE__ */ jsx12(LoadingIcon, {}) }) }),
-    children
-  ] }) }) }) });
+  return /* @__PURE__ */ jsx9(AuthContext.Provider, { value, children: /* @__PURE__ */ jsx9(
+    ConfigProvider,
+    {
+      config,
+      redirectUrl,
+      modalIframe,
+      serverTokenExchange,
+      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 jsx13 } 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__ */ jsx13(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx13(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 useContext3, useEffect as useEffect5, useMemo as useMemo3, useState as useState4 } 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 useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { useRouter } from "next/navigation.js";
 import { useQuery as useQuery3 } from "@tanstack/react-query";
 
@@ -1273,7 +710,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) {
@@ -1301,7 +738,7 @@ var useUserCookie = () => {
     enabled: !hasRunRef.current,
     refetchOnWindowFocus: true
   });
-  useEffect4(() => {
+  useEffect3(() => {
     if (user) {
       if (!hasRunRef.current) {
         hasRunRef.current = true;
@@ -1316,10 +753,11 @@ var useUserCookie = () => {
 
 // src/react/providers/NextAuthProvider.tsx
 import { QueryClient as QueryClient2, QueryClientProvider as QueryClientProvider2 } from "@tanstack/react-query";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import "@civic/auth/styles.css";
+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
@@ -1327,54 +765,218 @@ var CivicNextAuthProvider = (_a) => {
     "children"
   ]);
   const user = useUserCookie();
-  const [redirectUrl, setRedirectUrl] = useState4("");
+  const [redirectUrl, setRedirectUrl] = useState3("");
   const { clientId, oauthServer, callbackUrl, challengeUrl } = resolveAuthConfig();
-  useEffect5(() => {
+  useEffect4(() => {
     if (typeof globalThis.window !== "undefined") {
       const currentUrl = globalThis.window.location.href;
-      setRedirectUrl(new URL(callbackUrl, currentUrl).toString());
+      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__ */ jsx14(QueryClientProvider2, { client: queryClient2, children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx11(QueryClientProvider2, { client: queryClient2, children: /* @__PURE__ */ jsx11(
     AuthProvider,
     __spreadProps(__spreadValues({}, props), {
+      redirectUrl,
       config: { oauthServer },
       clientId,
-      authServiceImpl: authService,
-      serverSideTokenExchange: true,
-      children: /* @__PURE__ */ jsx14(UserContext2.Provider, { value: user, children })
+      pkceConsumer: new ConfidentialClientPKCEConsumer(challengeUrl),
+      children: /* @__PURE__ */ jsx11(UserContext2.Provider, { value: user, children })
     })
   ) });
 };
-var useNextUser = () => useContext3(UserContext2);
+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/useSession.tsx
-import { useContext as useContext5 } from "react";
-var useSession = () => {
-  const context = useContext5(SessionContext);
+// src/react/hooks/useConfig.tsx
+import { useContext as useContext6 } from "react";
+var useConfig = () => {
+  const context = useContext6(ConfigContext);
   if (!context) {
-    throw new Error("useSession must be used within an SessionProvider");
+    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 jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var ChevronDown = () => /* @__PURE__ */ jsx12(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-chevron-down",
+    children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var ChevronUp = () => /* @__PURE__ */ jsx12(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-chevron-up",
+    children: /* @__PURE__ */ jsx12("path", { d: "m18 15-6-6-6 6" })
+  }
+);
+var UserButton = ({
+  displayMode,
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState4(false);
+  const { signIn, isAuthenticated, signOut } = useAuth();
+  const { user } = useUser();
+  const handleClickOutside = useCallback3((event) => {
+    const target = event.target;
+    if (!target.closest("#civic-dropdown-container")) {
+      setIsOpen(false);
+    }
+  }, []);
+  const handleSignOut = useCallback3(() => __async(void 0, null, function* () {
+    yield signOut();
+    setIsOpen(false);
+  }), [signOut]);
+  const handleSignIn = useCallback3(() => __async(void 0, null, function* () {
+    yield signIn(displayMode);
+    setIsOpen(false);
+  }), [signIn, displayMode]);
+  const handleEscape = useCallback3((event) => {
+    if (event.key === "Escape") {
+      setIsOpen(false);
+    }
+  }, []);
+  useEffect5(() => {
+    if (isOpen) {
+      window.addEventListener("click", handleClickOutside);
+      window.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      window.removeEventListener("click", handleClickOutside);
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [handleClickOutside, handleEscape, isOpen]);
+  if (isAuthenticated) {
+    return /* @__PURE__ */ jsxs5("div", { className: "cac-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",
+            className
+          ),
+          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(
+              "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__ */ 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__ */ 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",
+              onClick: handleSignOut,
+              children: "Logout"
+            }
+          ) }) })
+        }
+      )
+    ] });
+  }
+  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
+      ),
+      onClick: handleSignIn,
+      children: "Sign in"
+    }
+  );
+};
+
+// src/react/components/SignInButton.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var SignInButton = ({
+  displayMode,
+  className
+}) => {
+  const { signIn } = useAuth();
+  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
+      ),
+      onClick: () => signIn(displayMode),
+      children: "Sign In"
+    }
+  );
+};
+
+// src/react/components/SignOutButton.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var SignOutButton = ({ className }) => {
+  const { signOut } = useAuth();
+  return /* @__PURE__ */ jsx14(
+    "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
+      ),
+      onClick: () => signOut(),
+      children: "Sign Out"
+    }
+  );
+};
+
+// src/react/components/NextLogOut.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var NextLogOut = ({ children }) => {
+  const config = resolveAuthConfig();
+  const logoutUrl = `${config.logoutUrl}`;
+  return /* @__PURE__ */ jsx15("a", { href: logoutUrl, children });
+};
 export {
+  CivicAuthIframeContainer,
   CivicAuthProvider,
   CivicNextAuthProvider,
   NextLogOut,
@@ -1382,6 +984,7 @@ export {
   SignOutButton,
   UserButton,
   useAuth,
+  useConfig,
   useNextUser,
   useSession,
   useToken,