@civic/auth 0.4.2-beta.1 → 0.4.3-alpha.0

package/dist/esm/types.d.ts

@@ -0,0 +1,163 @@
+import type { TokenResponseBody } from "oslo/oauth2";
+import type { JWTPayload } from "jose";
+type UnknownObject = Record<string, unknown>;
+type EmptyObject = Record<string, never>;
+export declare enum AuthStatus {
+    AUTHENTICATED = "authenticated",
+    UNAUTHENTICATED = "unauthenticated",
+    AUTHENTICATING = "authenticating",
+    ERROR = "error",
+    SIGNING_OUT = "signing_out"
+}
+type DisplayMode = "iframe" | "redirect" | "new_tab" | "custom_tab";
+type ColorMode = "light" | "dark" | "auto";
+interface AuthSessionService {
+    loadAuthorizationUrl(authorizationURL: string, displayMode: DisplayMode): void;
+    getAuthorizationUrl(scopes: string[], overrideDisplayMode: DisplayMode, nonce?: string): Promise<string>;
+    signIn(displayMode: DisplayMode, scopes: string[], nonce?: string): Promise<void>;
+    tokenExchange(responseUrl: string): Promise<SessionData>;
+    getSessionData(): SessionData;
+    updateSessionData(data: SessionData): void;
+    getUserInfoService(): Promise<UserInfoService>;
+}
+interface TokenService {
+    exchangeCodeForTokens(authCode: string): Promise<Tokens>;
+    validateIdToken(idToken: string, nonce: string): boolean;
+    refreshAccessToken(refreshToken: string): Promise<Tokens>;
+}
+interface UserInfoService {
+    getUserInfo<T extends UnknownObject>(accessToken: string, idToken: string | null): Promise<User<T> | null>;
+}
+interface ResourceService {
+    getProtectedResource(accessToken: string): Promise<unknown>;
+}
+type AuthRequest = {
+    clientId: string;
+    redirectUri: string;
+    state: string;
+    nonce: string;
+    scope: string;
+};
+type Endpoints = {
+    jwks: string;
+    auth: string;
+    token: string;
+    userinfo: string;
+    challenge?: string;
+    endsession: string;
+};
+type Config = {
+    oauthServer: string;
+    endpoints?: Endpoints;
+};
+type SessionData = {
+    authenticated: boolean;
+    state?: string;
+    accessToken?: string;
+    refreshToken?: string;
+    idToken?: string;
+    accessTokenExpiresAt?: number;
+    codeVerifier?: string;
+    displayMode?: DisplayMode;
+    openerUrl?: string;
+};
+type OIDCTokenResponseBody = TokenResponseBody & {
+    id_token: string;
+    access_token_expires_at?: number;
+};
+type ParsedTokens = {
+    id_token: JWTPayload;
+    access_token: JWTPayload;
+    refresh_token?: string;
+};
+type ForwardedTokens = Record<string, {
+    idToken?: string;
+    accessToken?: string;
+    refreshToken?: string;
+}>;
+type ForwardedTokensJWT = Record<string, {
+    id_token?: string;
+    access_token?: string;
+    refresh_token?: string;
+    scope?: string;
+}>;
+type IdTokenPayload = JWTPayload & {
+    forwardedTokens?: ForwardedTokensJWT;
+    email?: string;
+    name?: string;
+    picture?: string;
+    nonce: string;
+    at_hash: string;
+};
+declare const tokenKeys: readonly ["sub", "idToken", "accessToken", "refreshToken", "forwardedTokens"];
+export type OAuthTokens = {
+    idToken?: string;
+    accessToken?: string;
+    refreshToken?: string;
+};
+type Tokens = {
+    [K in (typeof tokenKeys)[number]]: K extends "forwardedTokens" ? ForwardedTokens : string;
+};
+type BaseUser = {
+    id: string;
+    email?: string;
+    name?: string;
+    given_name?: string;
+    family_name?: string;
+    picture?: string;
+    updated_at?: Date;
+};
+type User<T extends UnknownObject | EmptyObject = EmptyObject> = T extends EmptyObject ? BaseUser : BaseUser & T;
+type OpenIdConfiguration = {
+    authorization_endpoint: string;
+    claims_parameter_supported: boolean;
+    claims_supported: string[];
+    code_challenge_methods_supported: string[];
+    end_session_endpoint: string;
+    grant_types_supported: string[];
+    issuer: string;
+    jwks_uri: string;
+    authorization_response_iss_parameter_supported: boolean;
+    response_modes_supported: string[];
+    response_types_supported: string[];
+    scopes_supported: string[];
+    subject_types_supported: string[];
+    token_endpoint_auth_methods_supported: string[];
+    token_endpoint_auth_signing_alg_values_supported: string[];
+    token_endpoint: string;
+    id_token_signing_alg_values_supported: string[];
+    pushed_authorization_request_endpoint: string;
+    request_parameter_supported: boolean;
+    request_uri_parameter_supported: boolean;
+    userinfo_endpoint: string;
+    claim_types_supported: string[];
+};
+type LoginPostMessage = {
+    source: string;
+    type: string;
+    clientId: string;
+    data: {
+        url: string;
+    } | LoginAppDesignOptions;
+};
+export type IframeAuthMessage = {
+    source: "civicloginApp";
+    type: "auth_error" | "auth_error_try_again";
+    clientId: string;
+    data: {
+        url?: string;
+        error?: string;
+    };
+};
+export type LoginAppDesignOptions = {
+    colorMode: ColorMode;
+};
+export type { LoginPostMessage, AuthSessionService, TokenService, UserInfoService, ResourceService, AuthRequest, Tokens, Endpoints, Config, SessionData, OIDCTokenResponseBody, ParsedTokens, BaseUser, User, DisplayMode, UnknownObject, EmptyObject, ForwardedTokens, ForwardedTokensJWT, IdTokenPayload, OpenIdConfiguration, ColorMode, };
+export { tokenKeys };
+export interface AuthStorage {
+    get(key: string): Promise<string | null>;
+    set(key: string, value: string): Promise<void>;
+    delete(key: string): Promise<void>;
+}
+export type IframeMode = "embedded" | "modal";
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/types.js

@@ -0,0 +1,17 @@
+export var AuthStatus;
+(function (AuthStatus) {
+    AuthStatus["AUTHENTICATED"] = "authenticated";
+    AuthStatus["UNAUTHENTICATED"] = "unauthenticated";
+    AuthStatus["AUTHENTICATING"] = "authenticating";
+    AuthStatus["ERROR"] = "error";
+    AuthStatus["SIGNING_OUT"] = "signing_out";
+})(AuthStatus || (AuthStatus = {}));
+const tokenKeys = [
+    "sub",
+    "idToken",
+    "accessToken",
+    "refreshToken",
+    "forwardedTokens",
+];
+export { tokenKeys };
+//# sourceMappingURL=types.js.map

package/dist/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAMA,MAAM,CAAN,IAAY,UAMX;AAND,WAAY,UAAU;IACpB,6CAA+B,CAAA;IAC/B,iDAAmC,CAAA;IACnC,+CAAiC,CAAA;IACjC,6BAAe,CAAA;IACf,yCAA2B,CAAA;AAC7B,CAAC,EANW,UAAU,KAAV,UAAU,QAMrB;AAiID,MAAM,SAAS,GAAG;IAChB,KAAK;IACL,SAAS;IACT,aAAa;IACb,cAAc;IACd,iBAAiB;CACT,CAAC;AAqGX,OAAO,EAAE,SAAS,EAAE,CAAC","sourcesContent":["import type { TokenResponseBody } from \"oslo/oauth2\";\nimport type { JWTPayload } from \"jose\";\n\ntype UnknownObject = Record<string, unknown>;\ntype EmptyObject = Record<string, never>;\n\nexport enum AuthStatus {\n  AUTHENTICATED = \"authenticated\",\n  UNAUTHENTICATED = \"unauthenticated\",\n  AUTHENTICATING = \"authenticating\",\n  ERROR = \"error\",\n  SIGNING_OUT = \"signing_out\",\n}\n// Display modes for the auth flow\ntype DisplayMode = \"iframe\" | \"redirect\" | \"new_tab\" | \"custom_tab\";\n\ntype ColorMode = \"light\" | \"dark\" | \"auto\";\n// Combined Auth and Session Service\ninterface AuthSessionService {\n  // TODO DK NOTES: Should be in BrowserAuthSessionService, not relevant on backend\n  loadAuthorizationUrl(\n    authorizationURL: string,\n    displayMode: DisplayMode,\n  ): void;\n  // TODO DK NOTES: overrideDisplayMode parameter not appropriate here - also - do we need both this and the above in the interface?\n  getAuthorizationUrl(\n    scopes: string[],\n    overrideDisplayMode: DisplayMode,\n    nonce?: string,\n  ): Promise<string>;\n  // TODO DK NOTES: display mode should be in browser version only. Also, do we need this and the above two in the top-level interface?\n  signIn(\n    displayMode: DisplayMode,\n    scopes: string[],\n    nonce?: string,\n  ): Promise<void>;\n  // TODO DK NOTES: Input should be an auth code - do not assume it comes via an url\n  tokenExchange(responseUrl: string): Promise<SessionData>;\n  // TODO DK NOTES: Should be async for flexibility\n  getSessionData(): SessionData;\n  // TODO DK NOTES: Should be async for flexibility\n  updateSessionData(data: SessionData): void;\n  getUserInfoService(): Promise<UserInfoService>;\n}\n\n// Token Service\ninterface TokenService {\n  exchangeCodeForTokens(authCode: string): Promise<Tokens>;\n  validateIdToken(idToken: string, nonce: string): boolean;\n  refreshAccessToken(refreshToken: string): Promise<Tokens>;\n}\n\n// User Info Service\ninterface UserInfoService {\n  getUserInfo<T extends UnknownObject>(\n    accessToken: string,\n    idToken: string | null,\n  ): Promise<User<T> | null>;\n}\n\n// Resource Service\ninterface ResourceService {\n  getProtectedResource(accessToken: string): Promise<unknown>;\n}\n\n// Auth Request (for internal use in AuthSessionService)\ntype AuthRequest = {\n  clientId: string;\n  redirectUri: string;\n  state: string;\n  nonce: string;\n  scope: string;\n};\n\ntype Endpoints = {\n  jwks: string;\n  auth: string;\n  token: string;\n  userinfo: string;\n  challenge?: string;\n  endsession: string;\n};\n\ntype Config = {\n  oauthServer: string;\n  endpoints?: Endpoints;\n};\n\ntype SessionData = {\n  authenticated: boolean; // TODO can this be inferred from the presence of the tokens?\n  state?: string;\n  accessToken?: string;\n  refreshToken?: string;\n  idToken?: string;\n  accessTokenExpiresAt?: number;\n  codeVerifier?: string;\n  displayMode?: DisplayMode;\n  openerUrl?: string;\n};\n\ntype OIDCTokenResponseBody = TokenResponseBody & {\n  id_token: string;\n  access_token_expires_at?: number;\n};\n\ntype ParsedTokens = {\n  id_token: JWTPayload;\n  access_token: JWTPayload;\n  refresh_token?: string;\n};\n\n// The format we expose to the frontend via hooks\ntype ForwardedTokens = Record<\n  string,\n  {\n    idToken?: string;\n    accessToken?: string;\n    refreshToken?: string;\n  }\n>;\n\n// The format in the JWT payload\ntype ForwardedTokensJWT = Record<\n  string,\n  {\n    id_token?: string;\n    access_token?: string;\n    refresh_token?: string;\n    scope?: string;\n  }\n>;\n\ntype IdTokenPayload = JWTPayload & {\n  forwardedTokens?: ForwardedTokensJWT;\n  email?: string;\n  name?: string;\n  picture?: string;\n  nonce: string;\n  at_hash: string;\n};\n\nconst tokenKeys = [\n  \"sub\",\n  \"idToken\",\n  \"accessToken\",\n  \"refreshToken\",\n  \"forwardedTokens\",\n] as const;\n\nexport type OAuthTokens = {\n  idToken?: string;\n  accessToken?: string;\n  refreshToken?: string;\n};\n// Derive the Tokens type from the array\ntype Tokens = {\n  [K in (typeof tokenKeys)[number]]: K extends \"forwardedTokens\"\n    ? ForwardedTokens\n    : string;\n};\n\n// Base user interface\ntype BaseUser = {\n  id: string;\n  email?: string;\n  name?: string;\n  given_name?: string;\n  family_name?: string;\n  picture?: string;\n  updated_at?: Date;\n};\n\ntype User<T extends UnknownObject | EmptyObject = EmptyObject> =\n  T extends EmptyObject ? BaseUser : BaseUser & T;\n\ntype OpenIdConfiguration = {\n  authorization_endpoint: string;\n  claims_parameter_supported: boolean;\n  claims_supported: string[];\n  code_challenge_methods_supported: string[];\n  end_session_endpoint: string;\n  grant_types_supported: string[];\n  issuer: string;\n  jwks_uri: string;\n  authorization_response_iss_parameter_supported: boolean;\n  response_modes_supported: string[];\n  response_types_supported: string[];\n  scopes_supported: string[];\n  subject_types_supported: string[];\n  token_endpoint_auth_methods_supported: string[];\n  token_endpoint_auth_signing_alg_values_supported: string[];\n  token_endpoint: string;\n  id_token_signing_alg_values_supported: string[];\n  pushed_authorization_request_endpoint: string;\n  request_parameter_supported: boolean;\n  request_uri_parameter_supported: boolean;\n  userinfo_endpoint: string;\n  claim_types_supported: string[];\n};\n\ntype LoginPostMessage = {\n  source: string;\n  type: string;\n  clientId: string;\n  data:\n    | {\n        url: string;\n      }\n    | LoginAppDesignOptions;\n};\n\nexport type IframeAuthMessage = {\n  source: \"civicloginApp\";\n  type: \"auth_error\" | \"auth_error_try_again\";\n  clientId: string;\n  data: {\n    url?: string;\n    error?: string;\n  };\n};\n\nexport type LoginAppDesignOptions = {\n  colorMode: ColorMode;\n};\nexport type {\n  LoginPostMessage,\n  AuthSessionService,\n  TokenService,\n  UserInfoService,\n  ResourceService,\n  AuthRequest,\n  Tokens,\n  Endpoints,\n  Config,\n  SessionData,\n  OIDCTokenResponseBody,\n  ParsedTokens,\n  BaseUser,\n  User,\n  DisplayMode,\n  UnknownObject,\n  EmptyObject,\n  ForwardedTokens,\n  ForwardedTokensJWT,\n  IdTokenPayload,\n  OpenIdConfiguration,\n  ColorMode,\n};\nexport { tokenKeys };\nexport interface AuthStorage {\n  get(key: string): Promise<string | null>;\n  set(key: string, value: string): Promise<void>;\n  delete(key: string): Promise<void>;\n}\n\nexport type IframeMode = \"embedded\" | \"modal\";\n"]}

package/dist/esm/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Checks if a popup window is blocked by the browser.
+ *
+ * This function attempts to open a small popup window and then checks if it was successfully created.
+ * If the popup is blocked by the browser, the function returns `true`. Otherwise, it returns `false`.
+ *
+ * @returns {boolean} - `true` if the popup is blocked, `false` otherwise.
+ */
+export declare const isPopupBlocked: () => boolean;
+type WithoutUndefined<T> = {
+    [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+};
+export declare const withoutUndefined: <T extends { [K in keyof T]: unknown; }>(obj: T) => WithoutUndefined<T>;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/esm/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,QAAO,OAsBjC,CAAC;AAOF,KAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,IAAI,SAAS,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC;AACF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,GAAE,OAC/D,CAAC,KACL,gBAAgB,CAAC,CAAC,CAapB,CAAC"}

package/dist/esm/utils.js

@@ -0,0 +1,42 @@
+/**
+ * Checks if a popup window is blocked by the browser.
+ *
+ * This function attempts to open a small popup window and then checks if it was successfully created.
+ * If the popup is blocked by the browser, the function returns `true`. Otherwise, it returns `false`.
+ *
+ * @returns {boolean} - `true` if the popup is blocked, `false` otherwise.
+ */
+export const isPopupBlocked = () => {
+    // First we try to open a small popup window. It either returns a window object or null.
+    const popup = window.open("", "", "width=1,height=1");
+    // If window.open() returns null, popup is definitely blocked
+    if (!popup) {
+        return true;
+    }
+    try {
+        // Try to access a property of the popup to check if it's usable
+        if (typeof popup.closed === "undefined") {
+            throw new Error("Popup is blocked");
+        }
+    }
+    catch {
+        // Accessing the popup's properties throws an error if the popup is blocked
+        return true;
+    }
+    // Close the popup immediately if it was opened
+    popup.close();
+    return false;
+};
+export const withoutUndefined = (obj) => {
+    const result = {};
+    for (const key in obj) {
+        if (obj[key] !== undefined) {
+            // TypeScript needs assurance that key is a valid key in WithoutUndefined<T>
+            // We use type assertion here
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            result[key] = obj[key];
+        }
+    }
+    return result;
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAY,EAAE;IAC1C,wFAAwF;IACxF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,kBAAkB,CAAC,CAAC;IAEtD,6DAA6D;IAC7D,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,CAAC;QACH,gEAAgE;QAChE,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,WAAW,EAAE,CAAC;YACxC,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAAC,MAAM,CAAC;QACP,2EAA2E;QAC3E,OAAO,IAAI,CAAC;IACd,CAAC;IAED,+CAA+C;IAC/C,KAAK,CAAC,KAAK,EAAE,CAAC;IACd,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,GAAM,EACe,EAAE;IACvB,MAAM,MAAM,GAAG,EAAyB,CAAC;IAEzC,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;QACtB,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE,CAAC;YAC3B,4EAA4E;YAC5E,6BAA6B;YAC7B,8DAA8D;YAC7D,MAAc,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["/**\n * Checks if a popup window is blocked by the browser.\n *\n * This function attempts to open a small popup window and then checks if it was successfully created.\n * If the popup is blocked by the browser, the function returns `true`. Otherwise, it returns `false`.\n *\n * @returns {boolean} - `true` if the popup is blocked, `false` otherwise.\n */\nexport const isPopupBlocked = (): boolean => {\n  // First we try to open a small popup window. It either returns a window object or null.\n  const popup = window.open(\"\", \"\", \"width=1,height=1\");\n\n  // If window.open() returns null, popup is definitely blocked\n  if (!popup) {\n    return true;\n  }\n\n  try {\n    // Try to access a property of the popup to check if it's usable\n    if (typeof popup.closed === \"undefined\") {\n      throw new Error(\"Popup is blocked\");\n    }\n  } catch {\n    // Accessing the popup's properties throws an error if the popup is blocked\n    return true;\n  }\n\n  // Close the popup immediately if it was opened\n  popup.close();\n  return false;\n};\n\n// This type narrows T as far as it can by:\n// - removing all keys where the value is `undefined`\n// - making keys that are not undefined required\n// So, for example: given { a: string | undefined, b: string | undefined },\n// if you pass in { a: \"foo\" }, it returns an object of type: { a: string }\ntype WithoutUndefined<T> = {\n  [K in keyof T as undefined extends T[K] ? never : K]: T[K];\n};\nexport const withoutUndefined = <T extends { [K in keyof T]: unknown }>(\n  obj: T,\n): WithoutUndefined<T> => {\n  const result = {} as WithoutUndefined<T>;\n\n  for (const key in obj) {\n    if (obj[key] !== undefined) {\n      // TypeScript needs assurance that key is a valid key in WithoutUndefined<T>\n      // We use type assertion here\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (result as any)[key] = obj[key];\n    }\n  }\n\n  return result;\n};\n"]}

package/dist/esm/version.d.ts

@@ -0,0 +1,2 @@
+export declare const VERSION = "@civic/auth:0.1.4-beta.5";
+//# sourceMappingURL=version.d.ts.map

package/dist/esm/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,6BAA6B,CAAC"}

package/dist/esm/version.js

@@ -0,0 +1,3 @@
+// This is an auto-generated file. Do not edit.
+export const VERSION = "@civic/auth:0.1.4-beta.5";
+//# sourceMappingURL=version.js.map

package/dist/esm/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAE/C,MAAM,CAAC,MAAM,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// This is an auto-generated file. Do not edit.\n\nexport const VERSION = \"@civic/auth:0.1.4-beta.5\";\n"]}

package/dist/shared/components/CivicAuthIframe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CivicAuthIframe.d.ts","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframe.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAM/D,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,QAAA,MAAM,eAAe,gGAqDpB,CAAC;AAIF,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"CivicAuthIframe.d.ts","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframe.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,KAAK,oBAAoB,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,QAAA,MAAM,eAAe,gGA+DpB,CAAC;AAIF,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/shared/components/CivicAuthIframe.js

@@ -1,41 +1,41 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import React, { forwardRef, useEffect, useState } from "react";
-// import IframeResizer from "@iframe-resizer/react";
-import IframeResizer from "iframe-resizer-react";
+import { IframeResizer } from "@civic/iframe-resizer";
 import SVGLoading from "./SVGLoading.js";
 import { useIframe } from "../hooks/useIframe.js";
 const CivicAuthIframe = forwardRef(({ onLoad, id }, ref) => {
     const [isLoaded, setIsLoaded] = React.useState(false);
     const { iframeMode, backgroundColor } = useIframe();
     const [isClient, setIsClient] = useState(false);
+    const iframeRef = ref;
     useEffect(() => {
         // only runs on client
         setIsClient(true);
     }, []);
     // don't render on the server as the appearance changes when the iframe is loaded from login-app post-messages
-    return !isClient ? null : (_jsxs("div", { children: [isLoaded ? null : (_jsx("span", { "data-testid": "iframe-shimmer-loader", children: iframeMode !== "embedded" && (_jsx(SVGLoading, { backgroundColor: backgroundColor })) })), _jsx(IframeResizer, { inPageLinks: true, 
-                // iframe-resizer-react was downgraded due to a bug in the latest version
-                // the license field is not valid for the downgraded version
-                // license="1jy4dww5qzv-s54r73oxcn-v59f4kfgfz"
-                id: id, forwardRef: ref, "data-testid": "civic-auth-iframe-with-resizer", style: {
-                    // we don't want the letterbox effect in embedded mode
-                    height: iframeMode !== "embedded" ? "26px" : "24rem",
+    return !isClient ? null : (_jsxs("div", { style: {
+            position: "relative",
+            borderRadius: "24px",
+            overflow: "hidden", // This ensures content stays within the rounded corners
+            transition: "all 250ms ease", // Match the transition on the iframe
+        }, children: [isLoaded ? null : (_jsx("span", { "data-testid": "iframe-shimmer-loader", style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: 1,
+                }, children: iframeMode !== "embedded" && (_jsx(SVGLoading, { backgroundColor: backgroundColor })) })), _jsx(IframeResizer, { ref: iframeRef, id: id, "data-testid": "civic-auth-iframe-with-resizer", initialHeight: iframeMode !== "embedded" ? "50px" : "max-content", animate: true, animationDuration: 250, checkOrigin: false, style: {
                     width: "100%",
                     border: "none",
                     minWidth: "100%",
                     backgroundColor,
-                    transition: "height 0.25s ease",
                     pointerEvents: "auto",
-                    borderRadius: "24px",
-                }, checkOrigin: false, onLoad: () => {
+                }, onLoad: () => {
                     setIsLoaded(true);
                     onLoad?.();
-                }, allow: "camera; screen-wake-lock", allowFullScreen: true, 
-                // iframe-resizer-react was downgraded due to a bug in the latest version
-                // direction="vertical"
-                // the 'direction' field is not valid for the downgraded version
-                warningTimeout: 0 })] }));
+                }, allow: "camera; screen-wake-lock", allowFullScreen: true })] }));
 });
 CivicAuthIframe.displayName = "CivicAuthIframe";
 export { CivicAuthIframe };

package/dist/shared/components/CivicAuthIframe.js.map

@@ -1 +1 @@
-{"version":3,"file":"CivicAuthIframe.js","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframe.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,qDAAqD;AACrD,OAAO,aAAa,MAAM,sBAAsB,CAAC;AACjD,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,eAAe,GAAG,UAAU,CAChC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;IACtB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,CAAC;IACpD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB;QACtB,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,8GAA8G;IAC9G,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxB,0BACG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,8BAAkB,uBAAuB,YACtC,UAAU,KAAK,UAAU,IAAI,CAC5B,KAAC,UAAU,IAAC,eAAe,EAAE,eAAe,GAAI,CACjD,GACI,CACR,EACD,KAAC,aAAa,IACZ,WAAW;gBACX,yEAAyE;gBACzE,4DAA4D;gBAC5D,8CAA8C;gBAC9C,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,GAAG,iBACF,gCAAgC,EAC7C,KAAK,EAAE;oBACL,sDAAsD;oBACtD,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpD,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,QAAQ,EAAE,MAAM;oBAChB,eAAe;oBACf,UAAU,EAAE,mBAAmB;oBAC/B,aAAa,EAAE,MAAM;oBACrB,YAAY,EAAE,MAAM;iBACrB,EACD,WAAW,EAAE,KAAK,EAClB,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,IAAI,CAAC,CAAC;oBAClB,MAAM,EAAE,EAAE,CAAC;gBACb,CAAC,EACD,KAAK,EAAC,0BAA0B,EAChC,eAAe;gBACf,yEAAyE;gBACzE,uBAAuB;gBACvB,gEAAgE;gBAChE,cAAc,EAAE,CAAC,GACjB,IACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAIhD,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["\"use client\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\n// import IframeResizer from \"@iframe-resizer/react\";\nimport IframeResizer from \"iframe-resizer-react\";\nimport SVGLoading from \"./SVGLoading.js\";\nimport { useIframe } from \"../hooks/useIframe.js\";\n\ntype CivicAuthIframeProps = {\n  onLoad?: () => void;\n  id: string;\n};\n\nconst CivicAuthIframe = forwardRef<HTMLIFrameElement, CivicAuthIframeProps>(\n  ({ onLoad, id }, ref) => {\n    const [isLoaded, setIsLoaded] = React.useState(false);\n    const { iframeMode, backgroundColor } = useIframe();\n    const [isClient, setIsClient] = useState(false);\n    useEffect(() => {\n      // only runs on client\n      setIsClient(true);\n    }, []);\n    // don't render on the server as the appearance changes when the iframe is loaded from login-app post-messages\n    return !isClient ? null : (\n      <div>\n        {isLoaded ? null : (\n          <span data-testid=\"iframe-shimmer-loader\">\n            {iframeMode !== \"embedded\" && (\n              <SVGLoading backgroundColor={backgroundColor} />\n            )}\n          </span>\n        )}\n        <IframeResizer\n          inPageLinks\n          // iframe-resizer-react was downgraded due to a bug in the latest version\n          // the license field is not valid for the downgraded version\n          // license=\"1jy4dww5qzv-s54r73oxcn-v59f4kfgfz\"\n          id={id}\n          forwardRef={ref}\n          data-testid={\"civic-auth-iframe-with-resizer\"}\n          style={{\n            // we don't want the letterbox effect in embedded mode\n            height: iframeMode !== \"embedded\" ? \"26px\" : \"24rem\",\n            width: \"100%\",\n            border: \"none\",\n            minWidth: \"100%\",\n            backgroundColor,\n            transition: \"height 0.25s ease\",\n            pointerEvents: \"auto\",\n            borderRadius: \"24px\",\n          }}\n          checkOrigin={false}\n          onLoad={() => {\n            setIsLoaded(true);\n            onLoad?.();\n          }}\n          allow=\"camera; screen-wake-lock\"\n          allowFullScreen\n          // iframe-resizer-react was downgraded due to a bug in the latest version\n          // direction=\"vertical\"\n          // the 'direction' field is not valid for the downgraded version\n          warningTimeout={0}\n        />\n      </div>\n    );\n  },\n);\n\nCivicAuthIframe.displayName = \"CivicAuthIframe\";\n\nexport type { CivicAuthIframeProps };\n\nexport { CivicAuthIframe };\n"]}
+{"version":3,"file":"CivicAuthIframe.js","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframe.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,eAAe,GAAG,UAAU,CAChC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;IACtB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,CAAC;IACpD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,SAAS,CAAC,GAAG,EAAE;QACb,sBAAsB;QACtB,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,8GAA8G;IAC9G,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxB,eACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,QAAQ,EAAE,wDAAwD;YAC5E,UAAU,EAAE,gBAAgB,EAAE,qCAAqC;SACpE,aAEA,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,8BACc,uBAAuB,EACnC,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,CAAC;oBACP,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,CAAC;iBACV,YAEA,UAAU,KAAK,UAAU,IAAI,CAC5B,KAAC,UAAU,IAAC,eAAe,EAAE,eAAe,GAAI,CACjD,GACI,CACR,EACD,KAAC,aAAa,IACZ,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,EAAE,iBACO,gCAAgC,EAC7C,aAAa,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,EACjE,OAAO,EAAE,IAAI,EACb,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,QAAQ,EAAE,MAAM;oBAChB,eAAe;oBACf,aAAa,EAAE,MAAM;iBACtB,EACD,MAAM,EAAE,GAAG,EAAE;oBACX,WAAW,CAAC,IAAI,CAAC,CAAC;oBAClB,MAAM,EAAE,EAAE,CAAC;gBACb,CAAC,EACD,KAAK,EAAC,0BAA0B,EAChC,eAAe,SACf,IACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAIhD,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["\"use client\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { IframeResizer } from \"@civic/iframe-resizer\";\nimport SVGLoading from \"./SVGLoading.js\";\nimport { useIframe } from \"../hooks/useIframe.js\";\n\ntype CivicAuthIframeProps = {\n  onLoad?: () => void;\n  id: string;\n};\n\nconst CivicAuthIframe = forwardRef<HTMLIFrameElement, CivicAuthIframeProps>(\n  ({ onLoad, id }, ref) => {\n    const [isLoaded, setIsLoaded] = React.useState(false);\n    const { iframeMode, backgroundColor } = useIframe();\n    const [isClient, setIsClient] = useState(false);\n    const iframeRef = ref;\n    useEffect(() => {\n      // only runs on client\n      setIsClient(true);\n    }, []);\n\n    // don't render on the server as the appearance changes when the iframe is loaded from login-app post-messages\n    return !isClient ? null : (\n      <div\n        style={{\n          position: \"relative\",\n          borderRadius: \"24px\",\n          overflow: \"hidden\", // This ensures content stays within the rounded corners\n          transition: \"all 250ms ease\", // Match the transition on the iframe\n        }}\n      >\n        {isLoaded ? null : (\n          <span\n            data-testid=\"iframe-shimmer-loader\"\n            style={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              zIndex: 1,\n            }}\n          >\n            {iframeMode !== \"embedded\" && (\n              <SVGLoading backgroundColor={backgroundColor} />\n            )}\n          </span>\n        )}\n        <IframeResizer\n          ref={iframeRef}\n          id={id}\n          data-testid={\"civic-auth-iframe-with-resizer\"}\n          initialHeight={iframeMode !== \"embedded\" ? \"50px\" : \"max-content\"} // Slightly larger initial height\n          animate={true}\n          animationDuration={250}\n          checkOrigin={false}\n          style={{\n            width: \"100%\",\n            border: \"none\",\n            minWidth: \"100%\",\n            backgroundColor,\n            pointerEvents: \"auto\",\n          }}\n          onLoad={() => {\n            setIsLoaded(true);\n            onLoad?.();\n          }}\n          allow=\"camera; screen-wake-lock\"\n          allowFullScreen\n        />\n      </div>\n    );\n  },\n);\n\nCivicAuthIframe.displayName = \"CivicAuthIframe\";\n\nexport type { CivicAuthIframeProps };\n\nexport { CivicAuthIframe };\n"]}

package/dist/shared/components/CivicAuthIframeContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CivicAuthIframeContainer.d.ts","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,KAAK,6BAA6B,GAAG;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAeF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACxB,oDAiFA;AAED,QAAA,MAAM,wBAAwB,GAAI,+BAG/B,6BAA6B,qDAuH/B,CAAC;AAEF,YAAY,EAAE,6BAA6B,EAAE,CAAC;AAE9C,OAAO,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"CivicAuthIframeContainer.d.ts","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframeContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,KAAK,6BAA6B,GAAG;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAeF,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;CACxB,oDAgEA;AAED,QAAA,MAAM,wBAAwB,GAAI,+BAG/B,6BAA6B,qDAkJ/B,CAAC;AAEF,YAAY,EAAE,6BAA6B,EAAE,CAAC;AAE9C,OAAO,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/shared/components/CivicAuthIframeContainer.js

@@ -13,22 +13,8 @@ function NoChrome({ children, }) {
     return (_jsx("div", { "data-testid": "civic-iframe-no-chrome", style: { position: "relative" }, children: children }));
 }
 export function IframeChrome({ children, onClose, isFrameLoaded, }) {
-    const { setIframeAborted, iframeMode } = useIframe();
-    const iframeContainerStyleOverrides = iframeMode === "embedded"
-        ? {
-            paddingTop: "1.5rem",
-            borderRadius: "1.5rem",
-        }
-        : {
-            ...(isFrameLoaded
-                ? {
-                    paddingTop: "1.5rem",
-                    borderRadius: "1.5rem",
-                }
-                : { borderRadius: "0.5rem", paddingTop: "0" }),
-        };
+    const { setIframeAborted } = useIframe();
     return (_jsx("div", { style: {
-            position: "fixed", // Change to fixed to stay in viewport
             left: 0,
             top: 0,
             zIndex: 50,
@@ -37,8 +23,8 @@ export function IframeChrome({ children, onClose, isFrameLoaded, }) {
             width: "100vw",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: "rgba(17, 24, 39, 0.5)", // Semi-transparent dark background
-            backdropFilter: "blur(4px)", // Optional: adds slight blur to background
+            backgroundColor: "rgba(17, 24, 39, 0.5)",
+            backdropFilter: "blur(4px)",
         }, onClick: () => {
             setIframeAborted(true);
             onClose?.();
@@ -48,15 +34,12 @@ export function IframeChrome({ children, onClose, isFrameLoaded, }) {
                 paddingLeft: "0",
                 paddingRight: "0",
                 paddingBottom: "0",
-                // paddingTop gets added in style overrides
-                ...iframeContainerStyleOverrides,
                 boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-                minWidth: "20rem",
+                width: "20rem",
             }, onClick: (e) => e.stopPropagation(), children: [isFrameLoaded && (_jsx("button", { style: {
                         position: "absolute",
                         right: "1rem",
-                        top: "2rem",
-                        display: "flex",
+                        top: "0.5rem",
                         cursor: "pointer",
                         alignItems: "center",
                         justifyContent: "center",
@@ -64,6 +47,7 @@ export function IframeChrome({ children, onClose, isFrameLoaded, }) {
                         backgroundColor: "transparent",
                         padding: "0.25rem",
                         color: "#9ca3af",
+                        zIndex: 100,
                     }, onClick: () => {
                         setIframeAborted(true);
                         onClose?.();
@@ -74,7 +58,10 @@ const CivicAuthIframeContainer = ({ onClose, closeOnRedirect = true, }) => {
     const [tokenExchangeUrl, setTokenExchangeUrl] = useState(null);
     const { doTokenExchange } = useClientTokenExchangeSession();
     const { iframeRef, iframeMode, backgroundColor, setIframeMounted } = useIframe();
+    const [isIframeContentLoaded, setIsIframeContentLoaded] = useState(false);
+    const [isClient, setIsClient] = useState(false);
     useEffect(() => {
+        setIsClient(true);
         setIframeMounted(true);
     }, [setIframeMounted]);
     useEffect(() => {
@@ -132,7 +119,6 @@ const CivicAuthIframeContainer = ({ onClose, closeOnRedirect = true, }) => {
         window.addEventListener("keydown", handleEscape);
         return () => window.removeEventListener("keydown", handleEscape);
     });
-    const [isIframeContentLoaded, setIsIframeContentLoaded] = useState(false);
     const handleIframeLoad = useCallback(() => {
         setIsIframeContentLoaded(true);
         const iframeHasUrl = processIframeUrl();
@@ -141,22 +127,39 @@ const CivicAuthIframeContainer = ({ onClose, closeOnRedirect = true, }) => {
         }
     }, [processIframeUrl, intervalId]);
     const WrapperComponent = iframeMode === "embedded" ? NoChrome : IframeChrome;
-    const showLoadingIcon = !isIframeContentLoaded && iframeMode === "embedded";
-    const [isClient, setIsClient] = useState(false);
-    useEffect(() => {
-        // only runs on client
-        setIsClient(true);
-    }, []);
-    // don't render the loading icon wrapper in server-mode as the appearance changes after load
-    return (_jsxs(WrapperComponent, { onClose: onClose, isFrameLoaded: isIframeContentLoaded, children: [showLoadingIcon && isClient ? (_jsx("div", { id: "civic-auth-loading-icon-wrapper", style: {
-                    position: "absolute",
-                    inset: 0,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor,
-                    borderRadius: "24px",
-                }, children: _jsx(LoadingIcon, {}) })) : null, _jsx(CivicAuthIframe, { ref: iframeRef, id: "civic-auth-iframe", onLoad: handleIframeLoad })] }));
+    return (_jsx(WrapperComponent, { onClose: onClose, isFrameLoaded: isIframeContentLoaded, children: _jsxs("div", { style: {
+                position: "relative",
+                height: isIframeContentLoaded ? "auto" : "225px",
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "center",
+                backgroundColor: isClient ? backgroundColor : "#8E949D",
+                borderRadius: "24px",
+                width: "100%",
+                transition: "all 0.5s ease-in-out",
+            }, children: [_jsx("div", { id: "civic-auth-loading-icon-wrapper", style: {
+                        position: "absolute",
+                        inset: 0,
+                        display: isIframeContentLoaded ? "none" : "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: isClient ? backgroundColor : "#8E949D",
+                        borderRadius: "24px",
+                        height: "225px",
+                        width: "100%",
+                        transition: "all 0.5s ease-in-out",
+                    }, children: _jsx(LoadingIcon, {}) }), isClient && (_jsx("div", { style: {
+                        visibility: isIframeContentLoaded ? "visible" : "hidden",
+                        height: "100%",
+                        width: "100%",
+                        minWidth: "100%",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: "24px",
+                        overflow: "hidden",
+                        backgroundColor,
+                        transition: "all 0.5s ease-in-out",
+                    }, children: _jsx(CivicAuthIframe, { ref: iframeRef, id: "civic-auth-iframe", onLoad: handleIframeLoad }) }))] }) }));
 };
 export { CivicAuthIframeContainer };
 //# sourceMappingURL=CivicAuthIframeContainer.js.map

package/dist/shared/components/CivicAuthIframeContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CivicAuthIframeContainer.js","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframeContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { LoadingIcon } from \"@/shared/components/LoadingIcon.js\";\nimport { CloseIcon } from \"@/shared/components/CloseIcon.js\";\nimport { CivicAuthIframe } from \"@/shared/components/CivicAuthIframe.js\";\nimport { useIframe } from \"@/shared/hooks/index.js\";\nimport { TOKEN_EXCHANGE_TRIGGER_TEXT } from \"@/constants.js\";\nimport { useCivicAuthConfig } from \"@/shared/hooks/index.js\";\nimport { useClientTokenExchangeSession } from \"@/shared/hooks/index.js\";\nimport { getIframeRef } from \"../lib/iframeUtils.js\";\n\ntype CivicAuthIframeContainerProps = {\n  onClose?: () => void;\n  closeOnRedirect?: boolean;\n};\n\nfunction NoChrome({\n  children,\n}: {\n  children: React.ReactNode;\n  onClose?: () => void;\n}) {\n  return (\n    <div data-testid=\"civic-iframe-no-chrome\" style={{ position: \"relative\" }}>\n      {children}\n    </div>\n  );\n}\n\nexport function IframeChrome({\n  children,\n  onClose,\n  isFrameLoaded,\n}: {\n  children: React.ReactNode;\n  onClose?: () => void;\n  isFrameLoaded: boolean;\n}) {\n  const { setIframeAborted, iframeMode } = useIframe();\n\n  const iframeContainerStyleOverrides =\n    iframeMode === \"embedded\"\n      ? {\n          paddingTop: \"1.5rem\",\n          borderRadius: \"1.5rem\",\n        }\n      : {\n          ...(isFrameLoaded\n            ? {\n                paddingTop: \"1.5rem\",\n                borderRadius: \"1.5rem\",\n              }\n            : { borderRadius: \"0.5rem\", paddingTop: \"0\" }),\n        };\n  return (\n    <div\n      style={{\n        position: \"fixed\", // Change to fixed to stay in viewport\n        left: 0,\n        top: 0,\n        zIndex: 50,\n        display: \"flex\",\n        height: \"100vh\",\n        width: \"100vw\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        backgroundColor: \"rgba(17, 24, 39, 0.5)\", // Semi-transparent dark background\n        backdropFilter: \"blur(4px)\", // Optional: adds slight blur to background\n      }}\n      onClick={() => {\n        setIframeAborted(true);\n        onClose?.();\n      }}\n    >\n      <div\n        data-testid=\"iframe-chrome\"\n        style={{\n          position: \"relative\",\n          overflow: \"hidden\",\n          paddingLeft: \"0\",\n          paddingRight: \"0\",\n          paddingBottom: \"0\",\n          // paddingTop gets added in style overrides\n          ...iframeContainerStyleOverrides,\n          boxShadow:\n            \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n          minWidth: \"20rem\",\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {isFrameLoaded && (\n          <button\n            style={{\n              position: \"absolute\",\n              right: \"1rem\",\n              top: \"2rem\",\n              display: \"flex\",\n              cursor: \"pointer\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              border: \"none\",\n              backgroundColor: \"transparent\",\n              padding: \"0.25rem\",\n              color: \"#9ca3af\",\n            }}\n            onClick={() => {\n              setIframeAborted(true);\n              onClose?.();\n            }}\n          >\n            <CloseIcon />\n          </button>\n        )}\n\n        {children}\n      </div>\n    </div>\n  );\n}\n\nconst CivicAuthIframeContainer = ({\n  onClose,\n  closeOnRedirect = true,\n}: CivicAuthIframeContainerProps) => {\n  const config = useCivicAuthConfig();\n  const [tokenExchangeUrl, setTokenExchangeUrl] = useState<string | null>(null);\n  const { doTokenExchange } = useClientTokenExchangeSession();\n  const { iframeRef, iframeMode, backgroundColor, setIframeMounted } =\n    useIframe();\n\n  useEffect(() => {\n    setIframeMounted(true);\n  }, [setIframeMounted]);\n\n  useEffect(() => {\n    if (tokenExchangeUrl) {\n      doTokenExchange?.(tokenExchangeUrl);\n    }\n  }, [doTokenExchange, tokenExchangeUrl]);\n\n  const processIframeUrl = useCallback(() => {\n    if (!config) return;\n    if (iframeRef && iframeRef.current) {\n      const ref = getIframeRef(iframeRef.current)!;\n      if (ref.contentWindow) {\n        try {\n          const iframeUrl = ref.contentWindow.location.href;\n          // we know that oauth has finished when the iframe redirects to our redirectUrl\n          if (iframeUrl.startsWith(config.redirectUrl)) {\n            const iframeBody = ref.contentWindow.document.body.innerHTML;\n\n            // If we're doing a server token exchange, we need to call the server a second time\n            // using a fetch so that we're on the same domain and cookies can be sent and read\n            // The server will use the presence of the code_verifier cookie to determine whether to do a token exchange or not.\n            // On the initial (3rd party) redirect from the auth server, the cookie won't be sent, so the server-side callback route will just render a blank page,\n            // and we'll do the exchange request from here, which will include the cookies.\n            if (iframeBody.includes(TOKEN_EXCHANGE_TRIGGER_TEXT)) {\n              const params = new URL(iframeUrl).searchParams;\n              const appUrl = globalThis.window?.location?.origin;\n              fetch(\n                `${config.redirectUrl}?${params.toString()}&appUrl=${appUrl}`,\n              );\n            } else {\n              // if we're doing token-exchange in the client, we can just set the authResponseUrl\n              // to be handled by the auth provider\n              // iframeRef.current.setAttribute(\"src\", \"\");\n              setTokenExchangeUrl(iframeUrl);\n            }\n\n            if (closeOnRedirect) onClose?.();\n            return true; // Successfully processed the URL\n          }\n        } catch {\n          // ignore errors while waiting for redirect\n        }\n      }\n    }\n    return false; // Haven't processed the URL yet\n  }, [closeOnRedirect, config, iframeRef, onClose]);\n\n  const intervalId = useRef<NodeJS.Timeout>();\n\n  const handleEscape = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose?.();\n      }\n    },\n    [onClose],\n  );\n\n  // handle Escape\n  useEffect(() => {\n    window.addEventListener(\"keydown\", handleEscape);\n\n    return () => window.removeEventListener(\"keydown\", handleEscape);\n  });\n\n  const [isIframeContentLoaded, setIsIframeContentLoaded] = useState(false);\n  const handleIframeLoad = useCallback(() => {\n    setIsIframeContentLoaded(true);\n\n    const iframeHasUrl = processIframeUrl();\n    if (iframeHasUrl && intervalId.current) {\n      clearInterval(intervalId.current);\n    }\n  }, [processIframeUrl, intervalId]);\n\n  const WrapperComponent = iframeMode === \"embedded\" ? NoChrome : IframeChrome;\n\n  const showLoadingIcon = !isIframeContentLoaded && iframeMode === \"embedded\";\n  const [isClient, setIsClient] = useState(false);\n  useEffect(() => {\n    // only runs on client\n    setIsClient(true);\n  }, []);\n  // don't render the loading icon wrapper in server-mode as the appearance changes after load\n  return (\n    <WrapperComponent onClose={onClose} isFrameLoaded={isIframeContentLoaded}>\n      {showLoadingIcon && isClient ? (\n        <div\n          id=\"civic-auth-loading-icon-wrapper\"\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            backgroundColor,\n            borderRadius: \"24px\",\n          }}\n        >\n          <LoadingIcon />\n        </div>\n      ) : null}\n      <CivicAuthIframe\n        ref={iframeRef}\n        id={\"civic-auth-iframe\"}\n        onLoad={handleIframeLoad}\n      />\n    </WrapperComponent>\n  );\n};\n\nexport type { CivicAuthIframeContainerProps };\n\nexport { CivicAuthIframeContainer };\n"]}
+{"version":3,"file":"CivicAuthIframeContainer.js","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframeContainer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,2BAA2B,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,6BAA6B,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOrD,SAAS,QAAQ,CAAC,EAChB,QAAQ,GAIT;IACC,OAAO,CACL,6BAAiB,wBAAwB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YACtE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,aAAa,GAKd;IACC,MAAM,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAE,CAAC;IAEzC,OAAO,CACL,cACE,KAAK,EAAE;YACL,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;YACd,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,eAAe,EAAE,uBAAuB;YACxC,cAAc,EAAE,WAAW;SAC5B,EACD,OAAO,EAAE,GAAG,EAAE;YACZ,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,OAAO,EAAE,EAAE,CAAC;QACd,CAAC,YAED,8BACc,eAAe,EAC3B,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,WAAW,EAAE,GAAG;gBAChB,YAAY,EAAE,GAAG;gBACjB,aAAa,EAAE,GAAG;gBAClB,SAAS,EACP,yEAAyE;gBAC3E,KAAK,EAAE,OAAO;aACf,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAElC,aAAa,IAAI,CAChB,iBACE,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,KAAK,EAAE,MAAM;wBACb,GAAG,EAAE,QAAQ;wBACb,MAAM,EAAE,SAAS;wBACjB,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,MAAM,EAAE,MAAM;wBACd,eAAe,EAAE,aAAa;wBAC9B,OAAO,EAAE,SAAS;wBAClB,KAAK,EAAE,SAAS;wBAChB,MAAM,EAAE,GAAG;qBACZ,EACD,OAAO,EAAE,GAAG,EAAE;wBACZ,gBAAgB,CAAC,IAAI,CAAC,CAAC;wBACvB,OAAO,EAAE,EAAE,CAAC;oBACd,CAAC,YAED,KAAC,SAAS,KAAG,GACN,CACV,EAEA,QAAQ,IACL,GACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAAG,CAAC,EAChC,OAAO,EACP,eAAe,GAAG,IAAI,GACQ,EAAE,EAAE;IAClC,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAC;IACpC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC9E,MAAM,EAAE,eAAe,EAAE,GAAG,6BAA6B,EAAE,CAAC;IAC5D,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,GAChE,SAAS,EAAE,CAAC;IACd,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,IAAI,CAAC,CAAC;QAClB,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,EAAE,CAAC;YACrB,eAAe,EAAE,CAAC,gBAAgB,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAExC,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACnC,MAAM,GAAG,GAAG,YAAY,CAAC,SAAS,CAAC,OAAO,CAAE,CAAC;YAC7C,IAAI,GAAG,CAAC,aAAa,EAAE,CAAC;gBACtB,IAAI,CAAC;oBACH,MAAM,SAAS,GAAG,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC;oBAClD,+EAA+E;oBAC/E,IAAI,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;wBAC7C,MAAM,UAAU,GAAG,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;wBAE7D,mFAAmF;wBACnF,kFAAkF;wBAClF,mHAAmH;wBACnH,uJAAuJ;wBACvJ,+EAA+E;wBAC/E,IAAI,UAAU,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE,CAAC;4BACrD,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC;4BAC/C,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC;4BACnD,KAAK,CACH,GAAG,MAAM,CAAC,WAAW,IAAI,MAAM,CAAC,QAAQ,EAAE,WAAW,MAAM,EAAE,CAC9D,CAAC;wBACJ,CAAC;6BAAM,CAAC;4BACN,mFAAmF;4BACnF,qCAAqC;4BACrC,6CAA6C;4BAC7C,mBAAmB,CAAC,SAAS,CAAC,CAAC;wBACjC,CAAC;wBAED,IAAI,eAAe;4BAAE,OAAO,EAAE,EAAE,CAAC;wBACjC,OAAO,IAAI,CAAC,CAAC,iCAAiC;oBAChD,CAAC;gBACH,CAAC;gBAAC,MAAM,CAAC;oBACP,2CAA2C;gBAC7C,CAAC;YACH,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC,CAAC,gCAAgC;IAChD,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAElD,MAAM,UAAU,GAAG,MAAM,EAAkB,CAAC;IAE5C,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,KAAoB,EAAE,EAAE;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,OAAO,EAAE,EAAE,CAAC;QACd,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,gBAAgB;IAChB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QAEjD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAE/B,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;QACxC,IAAI,YAAY,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvC,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,MAAM,gBAAgB,GAAG,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;IAE7E,OAAO,CACL,KAAC,gBAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,qBAAqB,YACtE,eACE,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gBAChD,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK;gBACpB,cAAc,EAAE,QAAQ;gBACxB,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS;gBACvD,YAAY,EAAE,MAAM;gBACpB,KAAK,EAAE,MAAM;gBACb,UAAU,EAAE,sBAAsB;aACnC,aAED,cACE,EAAE,EAAC,iCAAiC,EACpC,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,KAAK,EAAE,CAAC;wBACR,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;wBAChD,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS;wBACvD,YAAY,EAAE,MAAM;wBACpB,MAAM,EAAE,OAAO;wBACf,KAAK,EAAE,MAAM;wBACb,UAAU,EAAE,sBAAsB;qBACnC,YAED,KAAC,WAAW,KAAG,GACX,EACL,QAAQ,IAAI,CACX,cACE,KAAK,EAAE;wBACL,UAAU,EAAE,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;wBACxD,MAAM,EAAE,MAAM;wBACd,KAAK,EAAE,MAAM;wBACb,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,YAAY,EAAE,MAAM;wBACpB,QAAQ,EAAE,QAAQ;wBAClB,eAAe;wBACf,UAAU,EAAE,sBAAsB;qBACnC,YAED,KAAC,eAAe,IACd,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,gBAAgB,GACxB,GACE,CACP,IACG,GACW,CACpB,CAAC;AACJ,CAAC,CAAC;AAIF,OAAO,EAAE,wBAAwB,EAAE,CAAC","sourcesContent":["\"use client\";\n\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { LoadingIcon } from \"@/shared/components/LoadingIcon.js\";\nimport { CloseIcon } from \"@/shared/components/CloseIcon.js\";\nimport { CivicAuthIframe } from \"@/shared/components/CivicAuthIframe.js\";\nimport { useIframe } from \"@/shared/hooks/index.js\";\nimport { TOKEN_EXCHANGE_TRIGGER_TEXT } from \"@/constants.js\";\nimport { useCivicAuthConfig } from \"@/shared/hooks/index.js\";\nimport { useClientTokenExchangeSession } from \"@/shared/hooks/index.js\";\nimport { getIframeRef } from \"../lib/iframeUtils.js\";\n\ntype CivicAuthIframeContainerProps = {\n  onClose?: () => void;\n  closeOnRedirect?: boolean;\n};\n\nfunction NoChrome({\n  children,\n}: {\n  children: React.ReactNode;\n  onClose?: () => void;\n}) {\n  return (\n    <div data-testid=\"civic-iframe-no-chrome\" style={{ position: \"relative\" }}>\n      {children}\n    </div>\n  );\n}\n\nexport function IframeChrome({\n  children,\n  onClose,\n  isFrameLoaded,\n}: {\n  children: React.ReactNode;\n  onClose?: () => void;\n  isFrameLoaded: boolean;\n}) {\n  const { setIframeAborted } = useIframe();\n\n  return (\n    <div\n      style={{\n        left: 0,\n        top: 0,\n        zIndex: 50,\n        display: \"flex\",\n        height: \"100vh\",\n        width: \"100vw\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        backgroundColor: \"rgba(17, 24, 39, 0.5)\",\n        backdropFilter: \"blur(4px)\",\n      }}\n      onClick={() => {\n        setIframeAborted(true);\n        onClose?.();\n      }}\n    >\n      <div\n        data-testid=\"iframe-chrome\"\n        style={{\n          position: \"relative\",\n          overflow: \"hidden\",\n          paddingLeft: \"0\",\n          paddingRight: \"0\",\n          paddingBottom: \"0\",\n          boxShadow:\n            \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n          width: \"20rem\",\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {isFrameLoaded && (\n          <button\n            style={{\n              position: \"absolute\",\n              right: \"1rem\",\n              top: \"0.5rem\",\n              cursor: \"pointer\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              border: \"none\",\n              backgroundColor: \"transparent\",\n              padding: \"0.25rem\",\n              color: \"#9ca3af\",\n              zIndex: 100,\n            }}\n            onClick={() => {\n              setIframeAborted(true);\n              onClose?.();\n            }}\n          >\n            <CloseIcon />\n          </button>\n        )}\n\n        {children}\n      </div>\n    </div>\n  );\n}\n\nconst CivicAuthIframeContainer = ({\n  onClose,\n  closeOnRedirect = true,\n}: CivicAuthIframeContainerProps) => {\n  const config = useCivicAuthConfig();\n  const [tokenExchangeUrl, setTokenExchangeUrl] = useState<string | null>(null);\n  const { doTokenExchange } = useClientTokenExchangeSession();\n  const { iframeRef, iframeMode, backgroundColor, setIframeMounted } =\n    useIframe();\n  const [isIframeContentLoaded, setIsIframeContentLoaded] = useState(false);\n  const [isClient, setIsClient] = useState(false);\n\n  useEffect(() => {\n    setIsClient(true);\n    setIframeMounted(true);\n  }, [setIframeMounted]);\n\n  useEffect(() => {\n    if (tokenExchangeUrl) {\n      doTokenExchange?.(tokenExchangeUrl);\n    }\n  }, [doTokenExchange, tokenExchangeUrl]);\n\n  const processIframeUrl = useCallback(() => {\n    if (!config) return;\n    if (iframeRef && iframeRef.current) {\n      const ref = getIframeRef(iframeRef.current)!;\n      if (ref.contentWindow) {\n        try {\n          const iframeUrl = ref.contentWindow.location.href;\n          // we know that oauth has finished when the iframe redirects to our redirectUrl\n          if (iframeUrl.startsWith(config.redirectUrl)) {\n            const iframeBody = ref.contentWindow.document.body.innerHTML;\n\n            // If we're doing a server token exchange, we need to call the server a second time\n            // using a fetch so that we're on the same domain and cookies can be sent and read\n            // The server will use the presence of the code_verifier cookie to determine whether to do a token exchange or not.\n            // On the initial (3rd party) redirect from the auth server, the cookie won't be sent, so the server-side callback route will just render a blank page,\n            // and we'll do the exchange request from here, which will include the cookies.\n            if (iframeBody.includes(TOKEN_EXCHANGE_TRIGGER_TEXT)) {\n              const params = new URL(iframeUrl).searchParams;\n              const appUrl = globalThis.window?.location?.origin;\n              fetch(\n                `${config.redirectUrl}?${params.toString()}&appUrl=${appUrl}`,\n              );\n            } else {\n              // if we're doing token-exchange in the client, we can just set the authResponseUrl\n              // to be handled by the auth provider\n              // iframeRef.current.setAttribute(\"src\", \"\");\n              setTokenExchangeUrl(iframeUrl);\n            }\n\n            if (closeOnRedirect) onClose?.();\n            return true; // Successfully processed the URL\n          }\n        } catch {\n          // ignore errors while waiting for redirect\n        }\n      }\n    }\n    return false; // Haven't processed the URL yet\n  }, [closeOnRedirect, config, iframeRef, onClose]);\n\n  const intervalId = useRef<NodeJS.Timeout>();\n\n  const handleEscape = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose?.();\n      }\n    },\n    [onClose],\n  );\n\n  // handle Escape\n  useEffect(() => {\n    window.addEventListener(\"keydown\", handleEscape);\n\n    return () => window.removeEventListener(\"keydown\", handleEscape);\n  });\n\n  const handleIframeLoad = useCallback(() => {\n    setIsIframeContentLoaded(true);\n\n    const iframeHasUrl = processIframeUrl();\n    if (iframeHasUrl && intervalId.current) {\n      clearInterval(intervalId.current);\n    }\n  }, [processIframeUrl, intervalId]);\n\n  const WrapperComponent = iframeMode === \"embedded\" ? NoChrome : IframeChrome;\n\n  return (\n    <WrapperComponent onClose={onClose} isFrameLoaded={isIframeContentLoaded}>\n      <div\n        style={{\n          position: \"relative\",\n          height: isIframeContentLoaded ? \"auto\" : \"225px\",\n          display: \"flex\",\n          flexDirection: \"row\",\n          justifyContent: \"center\",\n          backgroundColor: isClient ? backgroundColor : \"#8E949D\",\n          borderRadius: \"24px\",\n          width: \"100%\",\n          transition: \"all 0.5s ease-in-out\",\n        }}\n      >\n        <div\n          id=\"civic-auth-loading-icon-wrapper\"\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: isIframeContentLoaded ? \"none\" : \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            backgroundColor: isClient ? backgroundColor : \"#8E949D\",\n            borderRadius: \"24px\",\n            height: \"225px\",\n            width: \"100%\",\n            transition: \"all 0.5s ease-in-out\",\n          }}\n        >\n          <LoadingIcon />\n        </div>\n        {isClient && (\n          <div\n            style={{\n              visibility: isIframeContentLoaded ? \"visible\" : \"hidden\",\n              height: \"100%\",\n              width: \"100%\",\n              minWidth: \"100%\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              borderRadius: \"24px\",\n              overflow: \"hidden\",\n              backgroundColor,\n              transition: \"all 0.5s ease-in-out\",\n            }}\n          >\n            <CivicAuthIframe\n              ref={iframeRef}\n              id={\"civic-auth-iframe\"}\n              onLoad={handleIframeLoad}\n            />\n          </div>\n        )}\n      </div>\n    </WrapperComponent>\n  );\n};\n\nexport type { CivicAuthIframeContainerProps };\n\nexport { CivicAuthIframeContainer };\n"]}

package/dist/shared/components/LoadingIcon.d.ts

@@ -1,6 +1,9 @@
-declare const LoadingIcon: ({ width, height }: {
-    width?: string | undefined;
-    height?: string | undefined;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+import React from "react";
+type LoadingIconProps = {
+    width?: string;
+    height?: string;
+    style?: React.CSSProperties;
+};
+declare const LoadingIcon: ({ width, height, style, }: LoadingIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export { LoadingIcon };
 //# sourceMappingURL=LoadingIcon.d.ts.map

package/dist/shared/components/LoadingIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIcon.d.ts","sourceRoot":"","sources":["../../../src/shared/components/LoadingIcon.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,GAAI;;;CAAiC,qDAgDrD,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"LoadingIcon.d.ts","sourceRoot":"","sources":["../../../src/shared/components/LoadingIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,2BAIlB,gBAAgB,qDAkDlB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}