@civic/auth 0.4.3 → 0.4.4-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/shared/components/CivicAuthIframe.d.ts.map +1 -1
- package/dist/shared/components/CivicAuthIframe.js +33 -26
- package/dist/shared/components/CivicAuthIframe.js.map +1 -1
- package/dist/shared/components/CivicAuthIframeContainer.d.ts.map +1 -1
- package/dist/shared/components/CivicAuthIframeContainer.js +42 -38
- package/dist/shared/components/CivicAuthIframeContainer.js.map +1 -1
- package/dist/shared/lib/iframeUtils.d.ts +1 -5
- package/dist/shared/lib/iframeUtils.d.ts.map +1 -1
- package/dist/shared/lib/iframeUtils.js +3 -1
- package/dist/shared/lib/iframeUtils.js.map +1 -1
- package/dist/shared/providers/IframeProvider.js +1 -1
- package/dist/shared/providers/IframeProvider.js.map +1 -1
- package/dist/shared/version.d.ts +1 -1
- package/dist/shared/version.d.ts.map +1 -1
- package/dist/shared/version.js +1 -1
- package/dist/shared/version.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
# 0.4.4 Custom civic iframe resizer (fix)
|
|
2
|
+
- use a custom civic-iframe-resizer to avoid the problems and warnings with the commercial resizer
|
|
3
|
+
- fix positioning of iframe overlay
|
|
4
|
+
|
|
5
|
+
# 0.4.3 Custom civic iframe resizer
|
|
6
|
+
- use a custom civic-iframe-resizer to avoid the problems and warnings with the commercial resizer
|
|
7
|
+
|
|
8
|
+
# 0.4.2 Download iframe-resizer & fix infinite redirect loop in NextJS
|
|
9
|
+
- download iframe-resizer lib as it was failing to resize on load
|
|
10
|
+
- don't use dynamic API in NextJS middleware as it's not supported
|
|
11
|
+
|
|
1
12
|
# 0.4.1 NextJS server function token validation
|
|
2
13
|
- add existing validation to NextJS server functions, getUser and getTokens. Also exposes a new NextJS server function 'isLoggedIn'
|
|
3
14
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CivicAuthIframe.d.ts","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframe.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;
|
|
1
|
+
{"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,gGA6EpB,CAAC;AAIF,YAAY,EAAE,oBAAoB,EAAE,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,44 +1,51 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
3
3
|
import React, { forwardRef, useEffect, useState } from "react";
|
|
4
|
-
|
|
5
|
-
import IframeResizer from "iframe-resizer-react";
|
|
4
|
+
import { IframeResizer } from "@civic/iframe-resizer";
|
|
6
5
|
import SVGLoading from "./SVGLoading.js";
|
|
7
6
|
import { useIframe } from "../hooks/useIframe.js";
|
|
8
7
|
const CivicAuthIframe = forwardRef(({ onLoad, id }, ref) => {
|
|
9
8
|
const [isLoaded, setIsLoaded] = React.useState(false);
|
|
10
9
|
const { iframeMode, backgroundColor } = useIframe();
|
|
11
10
|
const [isClient, setIsClient] = useState(false);
|
|
11
|
+
const iframeRef = ref;
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
// only runs on client
|
|
14
14
|
setIsClient(true);
|
|
15
15
|
}, []);
|
|
16
16
|
// don't render on the server as the appearance changes when the iframe is loaded from login-app post-messages
|
|
17
|
-
return !isClient ? null : (_jsxs("div", {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
minHeight: "225px",
|
|
26
|
-
maxHeight: "600px",
|
|
17
|
+
return !isClient ? null : (_jsxs("div", { style: {
|
|
18
|
+
position: "relative",
|
|
19
|
+
borderRadius: isLoaded ? "24px" : 0,
|
|
20
|
+
overflow: "hidden",
|
|
21
|
+
transition: "all 250ms ease",
|
|
22
|
+
backgroundColor: isLoaded ? backgroundColor : "transparent",
|
|
23
|
+
minHeight: iframeMode !== "embedded" ? "26px" : "auto",
|
|
24
|
+
}, children: [!isLoaded ? (_jsx("div", { "data-testid": "iframe-shimmer-loader", style: {
|
|
27
25
|
width: "100%",
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
26
|
+
height: "26px",
|
|
27
|
+
display: "flex",
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
justifyContent: "center",
|
|
30
|
+
position: "absolute",
|
|
31
|
+
top: "50%",
|
|
32
|
+
left: "50%",
|
|
33
|
+
transform: "translate(-50%, -50%)",
|
|
34
|
+
borderRadius: "13px",
|
|
35
|
+
overflow: "hidden",
|
|
36
|
+
}, children: iframeMode !== "embedded" && (_jsx(SVGLoading, { backgroundColor: backgroundColor })) })) : null, _jsx("div", { style: {
|
|
37
|
+
opacity: isLoaded ? 1 : 0,
|
|
38
|
+
transition: "opacity 250ms ease",
|
|
39
|
+
}, children: _jsx(IframeResizer, { ref: iframeRef, id: id, "data-testid": "civic-auth-iframe-with-resizer", initialHeight: iframeMode !== "embedded" ? "26px" : "max-content", animate: true, animationDuration: 250, checkOrigin: false, style: {
|
|
40
|
+
width: "100%",
|
|
41
|
+
border: "none",
|
|
42
|
+
minWidth: "100%",
|
|
43
|
+
backgroundColor: isLoaded ? backgroundColor : "transparent",
|
|
44
|
+
pointerEvents: "auto",
|
|
45
|
+
}, onLoad: () => {
|
|
46
|
+
setIsLoaded(true);
|
|
47
|
+
onLoad?.();
|
|
48
|
+
}, allow: "camera; screen-wake-lock", allowFullScreen: true }) })] }));
|
|
42
49
|
});
|
|
43
50
|
CivicAuthIframe.displayName = "CivicAuthIframe";
|
|
44
51
|
export { CivicAuthIframe };
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"CivicAuthIframe.js","sourceRoot":"","sources":["../../../src/shared/components/CivicAuthIframe.tsx"],"names":[],"mappings":"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","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: isLoaded ? \"24px\" : 0,\n overflow: \"hidden\",\n transition: \"all 250ms ease\",\n backgroundColor: isLoaded ? backgroundColor : \"transparent\",\n minHeight: iframeMode !== \"embedded\" ? \"26px\" : \"auto\",\n }}\n >\n {!isLoaded ? (\n <div\n data-testid=\"iframe-shimmer-loader\"\n style={{\n width: \"100%\",\n height: \"26px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n borderRadius: \"13px\",\n overflow: \"hidden\",\n }}\n >\n {iframeMode !== \"embedded\" && (\n <SVGLoading backgroundColor={backgroundColor} />\n )}\n </div>\n ) : null}\n <div\n style={{\n opacity: isLoaded ? 1 : 0,\n transition: \"opacity 250ms ease\",\n }}\n >\n <IframeResizer\n ref={iframeRef}\n id={id}\n data-testid={\"civic-auth-iframe-with-resizer\"}\n initialHeight={iframeMode !== \"embedded\" ? \"26px\" : \"max-content\"}\n animate={true}\n animationDuration={250}\n checkOrigin={false}\n style={{\n width: \"100%\",\n border: \"none\",\n minWidth: \"100%\",\n backgroundColor: isLoaded ? backgroundColor : \"transparent\",\n pointerEvents: \"auto\",\n }}\n onLoad={() => {\n setIsLoaded(true);\n onLoad?.();\n }}\n allow=\"camera; screen-wake-lock\"\n allowFullScreen\n />\n </div>\n </div>\n );\n },\n);\n\nCivicAuthIframe.displayName = \"CivicAuthIframe\";\n\nexport type { CivicAuthIframeProps };\n\nexport { CivicAuthIframe };\n"]}
|
|
@@ -1 +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,
|
|
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,oDA+DA;AAED,QAAA,MAAM,wBAAwB,GAAI,+BAG/B,6BAA6B,qDAwK/B,CAAC;AAEF,YAAY,EAAE,6BAA6B,EAAE,CAAC;AAE9C,OAAO,EAAE,wBAAwB,EAAE,CAAC"}
|
|
@@ -15,6 +15,7 @@ function NoChrome({ children, }) {
|
|
|
15
15
|
export function IframeChrome({ children, onClose, isFrameLoaded, }) {
|
|
16
16
|
const { setIframeAborted } = useIframe();
|
|
17
17
|
return (_jsx("div", { style: {
|
|
18
|
+
position: "absolute",
|
|
18
19
|
left: 0,
|
|
19
20
|
top: 0,
|
|
20
21
|
zIndex: 50,
|
|
@@ -34,20 +35,19 @@ export function IframeChrome({ children, onClose, isFrameLoaded, }) {
|
|
|
34
35
|
paddingLeft: "0",
|
|
35
36
|
paddingRight: "0",
|
|
36
37
|
paddingBottom: "0",
|
|
37
|
-
boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
38
38
|
width: "20rem",
|
|
39
39
|
}, onClick: (e) => e.stopPropagation(), children: [isFrameLoaded && (_jsx("button", { style: {
|
|
40
40
|
position: "absolute",
|
|
41
41
|
right: "1rem",
|
|
42
|
-
top: "
|
|
43
|
-
display: "flex",
|
|
42
|
+
top: "0.5rem",
|
|
44
43
|
cursor: "pointer",
|
|
45
44
|
alignItems: "center",
|
|
46
45
|
justifyContent: "center",
|
|
47
46
|
border: "none",
|
|
48
|
-
backgroundColor: "
|
|
47
|
+
backgroundColor: "transparent",
|
|
49
48
|
padding: "0.25rem",
|
|
50
49
|
color: "#9ca3af",
|
|
50
|
+
zIndex: 100,
|
|
51
51
|
}, onClick: () => {
|
|
52
52
|
setIframeAborted(true);
|
|
53
53
|
onClose?.();
|
|
@@ -60,6 +60,9 @@ const CivicAuthIframeContainer = ({ onClose, closeOnRedirect = true, }) => {
|
|
|
60
60
|
const { iframeRef, iframeMode, backgroundColor, setIframeMounted } = useIframe();
|
|
61
61
|
const [isIframeContentLoaded, setIsIframeContentLoaded] = useState(false);
|
|
62
62
|
const [isClient, setIsClient] = useState(false);
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
console.log("State Change - isClient:", isClient, "isIframeContentLoaded:", isIframeContentLoaded, "iframeMode:", iframeMode);
|
|
65
|
+
}, [isClient, isIframeContentLoaded, iframeMode]);
|
|
63
66
|
useEffect(() => {
|
|
64
67
|
setIsClient(true);
|
|
65
68
|
setIframeMounted(true);
|
|
@@ -127,40 +130,41 @@ const CivicAuthIframeContainer = ({ onClose, closeOnRedirect = true, }) => {
|
|
|
127
130
|
}
|
|
128
131
|
}, [processIframeUrl, intervalId]);
|
|
129
132
|
const WrapperComponent = iframeMode === "embedded" ? NoChrome : IframeChrome;
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
133
|
+
// if the iframe is embedded, we need to handle the loading state differently
|
|
134
|
+
if (iframeMode === "embedded") {
|
|
135
|
+
return (_jsx(WrapperComponent, { onClose: onClose, isFrameLoaded: isIframeContentLoaded, children: _jsxs("div", { style: {
|
|
136
|
+
minHeight: isIframeContentLoaded ? "auto" : "225px",
|
|
137
|
+
backgroundColor: isClient ? backgroundColor : "#8E949D",
|
|
138
|
+
borderRadius: "24px",
|
|
139
|
+
position: "relative",
|
|
140
|
+
transition: "all 0.5s ease-in-out",
|
|
141
|
+
display: "flex",
|
|
142
|
+
alignItems: "center",
|
|
143
|
+
justifyContent: "center",
|
|
144
|
+
overflow: "hidden",
|
|
145
|
+
}, children: [!isIframeContentLoaded && (_jsx("div", { style: {
|
|
146
|
+
position: "absolute",
|
|
147
|
+
top: 0,
|
|
148
|
+
left: 0,
|
|
149
|
+
right: 0,
|
|
150
|
+
bottom: 0,
|
|
151
|
+
display: "flex",
|
|
152
|
+
alignItems: "center",
|
|
153
|
+
justifyContent: "center",
|
|
154
|
+
}, children: _jsx(LoadingIcon, {}) })), _jsx("div", { style: {
|
|
155
|
+
width: "100%",
|
|
156
|
+
minWidth: "100%",
|
|
157
|
+
display: "flex",
|
|
158
|
+
alignItems: "center",
|
|
159
|
+
justifyContent: "center",
|
|
160
|
+
borderRadius: "24px",
|
|
161
|
+
overflow: "hidden",
|
|
162
|
+
opacity: isIframeContentLoaded ? 1 : 0,
|
|
163
|
+
transition: "opacity 0.5s ease-in-out",
|
|
164
|
+
}, children: _jsx(CivicAuthIframe, { ref: iframeRef, id: "civic-auth-iframe", onLoad: handleIframeLoad }) })] }) }));
|
|
165
|
+
}
|
|
166
|
+
// if the iframe is not embedded, we can just render the iframe directly
|
|
167
|
+
return (_jsx(WrapperComponent, { onClose: onClose, isFrameLoaded: isIframeContentLoaded, children: _jsx(CivicAuthIframe, { ref: iframeRef, id: "civic-auth-iframe", onLoad: handleIframeLoad }) }));
|
|
164
168
|
};
|
|
165
169
|
export { CivicAuthIframeContainer };
|
|
166
170
|
//# sourceMappingURL=CivicAuthIframeContainer.js.map
|
|
@@ -1 +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 } = 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: \"2rem\",\n display: \"flex\",\n cursor: \"pointer\",\n alignItems: \"center\",\n justifyContent: \"center\",\n border: \"none\",\n backgroundColor: \"white\",\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 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 display: \"flex\",\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"]}
|
|
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 } = useIframe();\n\n return (\n <div\n style={{\n position: \"absolute\",\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 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 console.log(\n \"State Change - isClient:\",\n isClient,\n \"isIframeContentLoaded:\",\n isIframeContentLoaded,\n \"iframeMode:\",\n iframeMode,\n );\n }, [isClient, isIframeContentLoaded, iframeMode]);\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 // if the iframe is embedded, we need to handle the loading state differently\n if (iframeMode === \"embedded\") {\n return (\n <WrapperComponent onClose={onClose} isFrameLoaded={isIframeContentLoaded}>\n <div\n style={{\n minHeight: isIframeContentLoaded ? \"auto\" : \"225px\",\n backgroundColor: isClient ? backgroundColor : \"#8E949D\",\n borderRadius: \"24px\",\n position: \"relative\",\n transition: \"all 0.5s ease-in-out\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n }}\n >\n {/* always load the loading spinner in the center of the iframe */}\n {!isIframeContentLoaded && (\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n }}\n >\n <LoadingIcon />\n </div>\n )}\n <div\n style={{\n width: \"100%\",\n minWidth: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n borderRadius: \"24px\",\n overflow: \"hidden\",\n opacity: isIframeContentLoaded ? 1 : 0,\n transition: \"opacity 0.5s ease-in-out\",\n }}\n >\n <CivicAuthIframe\n ref={iframeRef}\n id={\"civic-auth-iframe\"}\n onLoad={handleIframeLoad}\n />\n </div>\n </div>\n </WrapperComponent>\n );\n }\n\n // if the iframe is not embedded, we can just render the iframe directly\n return (\n <WrapperComponent onClose={onClose} isFrameLoaded={isIframeContentLoaded}>\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"]}
|
|
@@ -1,6 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
getIframeElement: () => HTMLIFrameElement;
|
|
3
|
-
};
|
|
4
|
-
export declare const getIframeRef: (iframeRef: HTMLIFrameElement | ExtendedIframeElement | null | undefined, allowNull?: boolean) => HTMLIFrameElement;
|
|
5
|
-
export {};
|
|
1
|
+
export declare const getIframeRef: (iframeRef: HTMLIFrameElement | null | undefined, allowNull?: boolean) => HTMLIFrameElement;
|
|
6
2
|
//# sourceMappingURL=iframeUtils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iframeUtils.d.ts","sourceRoot":"","sources":["../../../src/shared/lib/iframeUtils.ts"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"iframeUtils.d.ts","sourceRoot":"","sources":["../../../src/shared/lib/iframeUtils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,GACvB,WAAW,iBAAiB,GAAG,IAAI,GAAG,SAAS,EAC/C,mBAAiB,KAChB,iBAKF,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
// Our custom iframe resizer doesn't add any special methods to the iframe element
|
|
2
|
+
// so we can just return the iframe element directly
|
|
1
3
|
export const getIframeRef = (iframeRef, allowNull = false) => {
|
|
2
4
|
if (!iframeRef && !allowNull) {
|
|
3
5
|
throw new Error("iframeRef is required for displayMode 'iframe'");
|
|
4
6
|
}
|
|
5
|
-
return
|
|
7
|
+
return iframeRef;
|
|
6
8
|
};
|
|
7
9
|
//# sourceMappingURL=iframeUtils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iframeUtils.js","sourceRoot":"","sources":["../../../src/shared/lib/iframeUtils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"iframeUtils.js","sourceRoot":"","sources":["../../../src/shared/lib/iframeUtils.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,oDAAoD;AACpD,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,SAA+C,EAC/C,SAAS,GAAG,KAAK,EACE,EAAE;IACrB,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IACD,OAAO,SAA8B,CAAC;AACxC,CAAC,CAAC","sourcesContent":["// Our custom iframe resizer doesn't add any special methods to the iframe element\n// so we can just return the iframe element directly\nexport const getIframeRef = (\n iframeRef: HTMLIFrameElement | null | undefined,\n allowNull = false,\n): HTMLIFrameElement => {\n if (!iframeRef && !allowNull) {\n throw new Error(\"iframeRef is required for displayMode 'iframe'\");\n }\n return iframeRef as HTMLIFrameElement;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IframeProvider.js","sourceRoot":"","sources":["../../../src/shared/providers/IframeProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAiB/E,MAAM,aAAa,GAAyB;IAC1C,SAAS,EAAE,IAAI;IACf,eAAe,EAAE,IAAI;IACrB,kBAAkB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC5B,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC1B,wBAAwB,EAAE,GAAG,EAAE,GAAE,CAAC;IAClC,eAAe,EAAE,KAAK;IACtB,aAAa,EAAE,KAAK;IACpB,qBAAqB,EAAE,KAAK;IAC5B,UAAU,EAAE,OAAO;IACnB,YAAY,EAAE,KAAK;IACnB,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"IframeProvider.js","sourceRoot":"","sources":["../../../src/shared/providers/IframeProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport type { Dispatch, ReactNode, RefObject, SetStateAction } from \"react\";\nimport React, { createContext, useMemo, useRef, useState } from \"react\";\nimport { useIsInIframe } from \"@/shared/hooks/useIsInIframe.js\";\nimport type { IframeMode, LoginAppDesignOptions } from \"@/types.js\";\nimport { useLocalStorage, useDarkMode } from \"usehooks-ts\";\nimport { DARK_BACKGROUND_COLOR, LIGHT_BACKGROUND_COLOR } from \"@/constants.js\";\n\nexport type IframeProviderOutput = {\n iframeRef: RefObject<HTMLIFrameElement> | null;\n logoutIframeRef: RefObject<HTMLIFrameElement> | null;\n setIframeIsVisible: Dispatch<SetStateAction<boolean>>;\n setIframeAborted: Dispatch<SetStateAction<boolean>>;\n iframeAborted: boolean;\n setLogoutIframeIsVisible: Dispatch<SetStateAction<boolean>>;\n iframeIsVisible: boolean;\n logoutIframeIsVisible: boolean;\n iframeMode: IframeMode;\n renderIframe: boolean;\n backgroundColor: string;\n isIframeMounted: boolean;\n setIframeMounted: Dispatch<SetStateAction<boolean>>;\n};\nconst defaultIframe: IframeProviderOutput = {\n iframeRef: null,\n logoutIframeRef: null,\n setIframeIsVisible: () => {},\n setIframeAborted: () => {},\n setLogoutIframeIsVisible: () => {},\n iframeIsVisible: false,\n iframeAborted: false,\n logoutIframeIsVisible: false,\n iframeMode: \"modal\",\n renderIframe: false,\n backgroundColor: \"transparent\",\n isIframeMounted: false,\n setIframeMounted: () => {},\n};\n\n// Context for exposing Iframe specifically to the TokenProvider\nconst IframeContext = createContext<IframeProviderOutput>(defaultIframe);\n\ntype IframeContextType = {\n children: ReactNode;\n iframeMode?: IframeMode;\n onIframeMounted?: () => void;\n};\n\nconst IframeProvider = ({\n children,\n iframeMode = \"modal\",\n}: IframeContextType) => {\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const logoutIframeRef = useRef<HTMLIFrameElement>(null);\n const isInIframe = useIsInIframe();\n const [isIframeMounted, setIframeMounted] = useState(false);\n const [iframeIsVisible, setIframeIsVisible] = useState(false);\n const [iframeAborted, setIframeAborted] = useState(false);\n const [logoutIframeIsVisible, setLogoutIframeIsVisible] = useState(false);\n const [designOptions] = useLocalStorage<LoginAppDesignOptions>(\n `loginAppDesign`,\n { colorMode: \"auto\" },\n );\n const { isDarkMode } = useDarkMode();\n const loginAppBackgroundColor = useMemo(() => {\n const colorFromWindow = isDarkMode\n ? DARK_BACKGROUND_COLOR\n : LIGHT_BACKGROUND_COLOR;\n\n const colorMode = designOptions?.colorMode;\n const colorFromStorage =\n colorMode === \"dark\" ? DARK_BACKGROUND_COLOR : LIGHT_BACKGROUND_COLOR;\n\n // if the color mode is auto then use the window matchMedia to determine the color mode\n // otherwise use the stored local color mode set from the login-app\n return colorMode && colorMode !== \"auto\"\n ? colorFromStorage\n : colorFromWindow;\n }, [designOptions, isDarkMode]);\n\n const renderIframe = iframeMode === \"modal\" && !isInIframe;\n\n return (\n <IframeContext.Provider\n value={{\n iframeRef,\n logoutIframeRef,\n setIframeIsVisible,\n iframeAborted,\n setIframeAborted,\n setLogoutIframeIsVisible,\n iframeIsVisible,\n logoutIframeIsVisible,\n iframeMode,\n renderIframe,\n backgroundColor: loginAppBackgroundColor,\n setIframeMounted,\n isIframeMounted,\n }}\n >\n {children}\n </IframeContext.Provider>\n );\n};\n\nexport type { IframeContextType };\nexport { IframeProvider, IframeContext };\n"]}
|
package/dist/shared/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const VERSION = "@civic/auth:0.4.
|
|
1
|
+
export declare const VERSION = "@civic/auth:0.4.4-beta.0";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/shared/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/shared/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,6BAA6B,CAAC"}
|
package/dist/shared/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/shared/version.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAE/C,MAAM,CAAC,MAAM,OAAO,GAAG,
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/shared/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.4.4-beta.0\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@civic/auth",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.4-beta.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"@emotion/react": "^11.14.0",
|
|
42
|
-
"iframe-resizer-react": "1.1.1",
|
|
43
42
|
"debug": "^4.3.7",
|
|
44
43
|
"eventemitter3": "^5.0.1",
|
|
45
44
|
"jose": "^5.9.4",
|
|
@@ -47,7 +46,8 @@
|
|
|
47
46
|
"picomatch": "^4.0.2",
|
|
48
47
|
"ts-deepmerge": "^7.0.2",
|
|
49
48
|
"usehooks-ts": "^3.1.0",
|
|
50
|
-
"uuid": "^10.0.0"
|
|
49
|
+
"uuid": "^10.0.0",
|
|
50
|
+
"@civic/iframe-resizer": "0.1.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@rollup/plugin-typescript": "^12.1.1",
|