@asgardeo/react 0.2.2 → 0.2.4

package/dist/esm/index.js

@@ -39979,13 +39979,18 @@ const I18nContext = createContext(undefined);
 const useTranslations = (props) => {
     const { componentLocaleOverride, componentTextOverrides, screen } = props;
     const [isLoading, setIsLoading] = useState(true);
+    const { setIsTextLoading } = useContext(AsgardeoContext);
     const contextValue = useContext(I18nContext);
     const { text, setTranslations } = contextValue;
     useEffect(() => {
         setTranslations({ componentLocaleOverride, componentTextOverrides, screen }).then((response) => {
             setIsLoading(!response);
+            setIsTextLoading(!response);
         });
-    }, [componentLocaleOverride, componentTextOverrides, screen, setTranslations]);
+    }, [componentLocaleOverride, componentTextOverrides, screen, setIsTextLoading, setTranslations]);
+    useEffect(() => {
+        setIsTextLoading(isLoading);
+    }, [isLoading, setIsTextLoading]);
     /**
      * `t` is a function that retrieves a specific translation from the fetched translations.
      * It takes a key as an argument, which is a string that represents a path to the desired translation.
@@ -40315,7 +40320,7 @@ n(css$3,{});
  * @param {AlertType} props.alert - Alert type.
  * @return {ReactElement}
  */
-const EmailOtp = ({ alert, brandingProps, authenticator, children, handleAuthenticate }) => {
+const EmailOtp = ({ alert, brandingProps, authenticator, children, handleAuthenticate, }) => {
     var _a, _b, _c, _d;
     const [inputValue, setInputValue] = useState();
     const [isContinueLoading, setIsContinueLoading] = useState(false);
@@ -40355,6 +40360,37 @@ const EmailOtp = ({ alert, brandingProps, authenticator, children, handleAuthent
                 }, children: [t(keys.emailOtp.resend.code), isAuthLoading && isResendLoading && jsxRuntimeExports.jsx(ae, { className: "sign-in-button-progress" })] }))] }));
 };
 
+/**
+ * This component renders the IdentifierFirst authentication form.
+ *
+ * @param {IdentifierFirstProps} props - Props injected to the IdentifierFirst authentication component.
+ * @param {BrandingProps} props.brandingProps - Branding props.
+ * @param {Function} props.handleAuthenticate - Callback to handle authentication.
+ * @param {Authenticator} props.authenticator - Authenticator.
+ * @param {AlertType} props.alert - Alert type.
+ * @param {ReactElement[]} props.renderLoginOptions - Login options.
+ * @param {boolean} props.showSelfSignUp - Show self sign up.
+ *
+ * @return {ReactElement}
+ */
+const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingProps, children, showSelfSignUp, renderLoginOptions, }) => {
+    var _a;
+    const { isAuthLoading, username, setUsername } = useContext(AsgardeoContext);
+    const { t, isLoading } = useTranslations({
+        componentLocaleOverride: brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.locale,
+        componentTextOverrides: (_a = brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.preference) === null || _a === void 0 ? void 0 : _a.text,
+        screen: ScreenType.Login,
+    });
+    if (isLoading) {
+        return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-basic-auth-skeleton", children: [jsxRuntimeExports.jsx(Pi, { className: "skeleton-title", variant: "text", width: 100, height: 55 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-submit-button", variant: "rectangular", width: 270, height: 40 })] }));
+    }
+    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "Paper-basicAuth", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, className: "Typography-basicAuthTitle", children: t(keys.login.login.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-basic-auth-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: t(keys.login.username), name: "text", value: username, placeholder: t(keys.login.enter.your.username), onChange: (e) => setUsername(e.target.value) }), children, jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", type: "submit", fullWidth: true, disabled: isAuthLoading, onClick: () => {
+                    handleAuthenticate(authenticator.authenticatorId, {
+                        username,
+                    });
+                }, children: t(keys.login.button) }), isAuthLoading && (jsxRuntimeExports.jsx("div", { className: "circular-progress-holder-authn", children: jsxRuntimeExports.jsx(ae, { className: "sign-in-button-progress" }) })), showSelfSignUp && (jsxRuntimeExports.jsxs(je, { container: true, children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { children: t(keys.common.prefix.register) }), jsxRuntimeExports.jsx(SignIn$1.Link, { href: "./register", className: "asgardeo-register-link", children: t(keys.common.register) })] })), renderLoginOptions.length !== 0 && jsxRuntimeExports.jsxs(SignIn$1.Divider, { children: [" ", t(keys.common.or), " "] }), renderLoginOptions] }));
+};
+
 var img$7 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='iso-8859-1'%3f%3e%3c!-- * Copyright (c) 2024%2c WSO2 Inc. (http://www.wso2.org) All Rights Reserved. * * WSO2 Inc. licenses this file to you under the Apache License%2c * Version 2.0 (the 'License')%3b you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing%2c * software distributed under the License is distributed on an * 'AS IS' BASIS%2c WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND%2c either express or implied. See the License for the * specific language governing permissions and limitations * under the License.--%3e%3csvg xmlns='http://www.w3.org/2000/svg' id='building-icon' class='icon' width='14' height='14' viewBox='0 0 12.601 14'%3e %3cpath id='ldap-outline' class='path fill primary' d='M7.1%2c14H.4a.4.4%2c0%2c0%2c1-.4-.4V.4A.4.4%2c0%2c0%2c1%2c.4%2c0H6.7a.4.4%2c0%2c0%2c1%2c.4.4V3.2h5.1a.4.4%2c0%2c0%2c1%2c.4.4V14Zm0-.6h4.7a.2.2%2c0%2c0%2c0%2c.2-.2V11.32H7.1Zm-.6%2c0V.8A.2.2%2c0%2c0%2c0%2c6.3.6H.8A.2.2%2c0%2c0%2c0%2c.6.8V13.2a.2.2%2c0%2c0%2c0%2c.2.2H2.191V11.12a.4.4%2c0%2c0%2c1%2c.4-.4h1.95a.4.4%2c0%2c0%2c1%2c.4.4V13.4Zm-2.16%2c0V11.32H2.79V13.4ZM12%2c10.72V4a.2.2%2c0%2c0%2c0-.2-.2H7.1v6.92ZM10.471%2c9.1V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-2.989%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm8.99-1.2V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-2.989%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm8.99-1.2V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-2.989%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm8.99-1.2V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-2.989%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm3.6-1.2V3.7h.6v.6Zm-1.2%2c0V3.7h.6v.6Zm-1.2%2c0V3.7h.6v.6Zm-1.2%2c0V3.7h.6v.6Zm3.6-1.2V2.5h.6v.6Zm-1.2%2c0V2.5h.6v.6Zm-1.2%2c0V2.5h.6v.6Zm-1.2%2c0V2.5h.6v.6Zm3.6-1.2V1.3h.6v.6Zm-1.2%2c0V1.3h.6v.6Zm-1.2%2c0V1.3h.6v.6Zm-1.2%2c0V1.3h.6v.6Z' fill='%23464646'/%3e%3c/svg%3e";
 
 var img$6 = "data:image/svg+xml,%3c!-- * Copyright (c) 2024%2c WSO2 Inc. (http://www.wso2.org). * * WSO2 Inc. licenses this file to you under the Apache License%2c * Version 2.0 (the 'License')%3b you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing%2c * software distributed under the License is distributed on an * 'AS IS' BASIS%2c WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND%2c either express or implied. See the License for the * specific language governing permissions and limitations * under the License.--%3e%3csvg id='email-solid-icon' class='icon' width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 4C0 2.89543 0.895431 2 2 2H14C15.1046 2 16 2.89561 16 4.00013V4.00476V4.00939V4.01402V4.01865V4.02328V4.02791V4.03253V4.03715V4.04177V4.04639V4.05101V4.05563V4.06024V4.06485V4.06947V4.07408V4.07868V4.08329V4.0879V4.0925V4.09711V4.10171V4.10631V4.11091V4.1155V4.1201V4.12469V4.12929V4.13388V4.13847V4.14306V4.14765V4.15224V4.15682V4.16141V4.16599V4.17057V4.17516V4.17974V4.18431V4.18889V4.19347V4.19805V4.20262V4.20719V4.21177V4.21634V4.22091V4.22548V4.23005V4.23462V4.23918V4.24375V4.24832V4.25288V4.25744V4.26201V4.26657V4.27113V4.27569V4.28025V4.28481V4.28937V4.29392V4.29848V4.30304V4.30759V4.31215V4.3167V4.32125V4.32581V4.33036V4.33491V4.33946V4.34401V4.34856V4.35311V4.35766V4.36221V4.36675V4.3713V4.37585V4.38039V4.38494V4.38949V4.39403V4.39858V4.40312V4.40767V4.41221V4.41675V4.4213V4.42584V4.43038V4.43492V4.43947V4.44401V4.44855V4.45309V4.45763V4.46217V4.46672V4.47126V4.4758V4.48034V4.48488V4.48942V4.49396V4.4985V4.50304V4.50758V4.51212V4.51667V4.52121V4.52575V4.53029V4.53483V4.53937V4.54391V4.54845V4.553V4.55754V4.56208V4.56662V4.57116V4.57571V4.58025V4.58479V4.58934V4.59388V4.59843V4.60297V4.60752V4.61206V4.61661V4.62115V4.6257V4.63025V4.63479V4.63934V4.64389V4.64844V4.65299V4.65754V4.66209V4.66664V4.67119V4.67574V4.6803V4.68485V4.6894V4.69396V4.69851V4.70307V4.70763V4.71219V4.71674V4.7213V4.72586V4.73042V4.73498V4.73955V4.74411V4.74867V4.75324V4.7578V4.76237V4.76694V4.77151V4.77608V4.78065V4.78522V4.78979V4.79436V4.79894V4.80351V4.80809V4.81267V4.81724V4.82182V4.8264V4.83099V4.83557V4.84015V4.84474V4.84933V4.85391V4.8585V4.86309V4.86768V4.87228V4.87687V4.88147V4.88606V4.89066V4.89526V4.89986V4.90446V4.90907V4.91367V4.91828V4.92288V4.92749V4.9321V4.93672V4.94133V4.94595V4.95056V4.95518V4.9598V4.96442V4.96904V4.97367V4.9783V4.98292V4.98755V4.99218V4.99682V5.00145V5.00609V5.01073V5.01537V5.02001V5.02465V5.0293V5.03394V5.03859V5.04324V5.0479V5.05255V5.05721V5.06187V5.06653V5.07119V5.07585V5.08052V5.08519V5.08986V5.09453V5.0992V5.10388V5.10856V5.11324V5.11792V5.12261V5.12729V5.13198V5.13667V5.14137V5.14606V5.15076V5.15546V5.16016V5.16487V5.16958V5.17428V5.179V5.18371V5.18843V5.19315V5.19787V5.20259V5.20731V5.21204V5.21677V5.22151V5.22624V5.23098V5.23572V5.24046V5.24521V5.24996V5.25471V5.25946V5.26422V5.26898V5.27374V5.2785V5.28327V5.28804V5.29281V5.29758V5.30236V5.30714V5.31192V5.31671V5.3215V5.32629V5.33108V5.33588V5.34068V5.34548V5.35028V5.35509V5.3599V5.36472V5.36953V5.37435V5.37918V5.384V5.38883V5.39366V5.3985V5.40334V5.40818V5.41302V5.41787V5.42272V5.42757V5.43243V5.43729V5.44215V5.44702V5.45189V5.45676V5.46164V5.46652V5.4714V5.47628V5.48117V5.48606V5.49096V5.49586V5.50076V5.50567V5.51058V5.51549V5.52041V5.52532V5.53025V5.53517V5.5401V5.54504V5.54997V5.55491V5.55986V5.56481V5.56976V5.57471V5.57967V5.58463V5.5896V5.59457V5.59954V5.60452V5.6095V5.61448V5.61947V5.62446V5.62946V5.63446V5.63946V5.64447V5.64948V5.65449V5.65951V5.66453V5.66956V5.67459V5.67962V5.68466V5.6897V5.69475V5.6998V5.70485V5.70991V5.71497V5.72004V5.72511V5.73019V5.73526V5.74035V5.74543V5.75052V5.75562V5.76072V5.76582V5.77093V5.77604V5.78116V5.78628V5.7914V5.79653V5.80167V5.8068V5.81194V5.81709V5.82224V5.8274V5.83256V5.83772V5.84289V5.84806V5.85324V5.85842V5.86361V5.8688V5.87399V5.87919V5.8844V5.88961V5.89482V5.90004V5.90526V5.91049V5.91572V5.92096V5.9262V5.93145V5.9367V5.94195V5.94721V5.95248V5.95775V5.96303V5.96831V5.97359V5.97888V5.98417V5.98947V5.99478V6.00009V6.0054V6.01072V6.01604V6.02137V6.0267V6.03204V6.03739V6.04274V6.04809V6.05345V6.05881V6.06418V6.06956V6.07494V6.08032V6.08571V6.09111V6.09651V6.10191V6.10732V6.11274V6.11816V6.12359V6.12902V6.13445V6.1399V6.14534V6.1508V6.15626V6.16172V6.16719V6.17266V6.17814V6.18363V6.18912V6.19462V6.20012V6.20563V6.21114V6.21666V6.22218V6.22771V6.23325V6.23879V6.24433V6.24989V6.25544V6.26101V6.26658V6.27215V6.27773V6.28332V6.28891V6.29451V6.30011V6.30572V6.31133V6.31696V6.32258V6.32822V6.33385V6.3395V6.34515V6.35081V6.35647V6.36214V6.36781V6.37349V6.37918V6.38487V6.39057V6.39627V6.40198V6.4077V6.41342V6.41915V6.42488V6.43062V6.43637V6.44212V6.44788V6.45365V6.45942V6.4652V6.47098V6.47677V6.48257V6.48837V6.49418V6.5V9C16 9.27614 15.7761 9.5 15.5 9.5C15.2239 9.5 15 9.27614 15 9V6.5V6.49418V6.48837V6.48257V6.47677V6.47098V6.4652V6.45942V6.45365V6.44788V6.44212V6.43637V6.43062V6.42488V6.41915V6.41342V6.4077V6.40198V6.39627V6.39057V6.38487V6.37918V6.37349V6.36781V6.36214V6.35647V6.35081V6.34515V6.3395V6.33385V6.32822V6.32258V6.31696V6.31133V6.30572V6.30011V6.29451V6.28891V6.28332V6.27773V6.27215V6.26658V6.26101V6.25544V6.24989V6.24433V6.23879V6.23325V6.22771V6.22218V6.21666V6.21114V6.20563V6.20012V6.19462V6.18912V6.18363V6.17814V6.17266V6.16719V6.16172V6.15626V6.1508V6.14534V6.1399V6.13445V6.12902V6.12359V6.11816V6.11274V6.10732V6.10191V6.09651V6.09111V6.08571V6.08032V6.07494V6.06956V6.06418V6.05881V6.05345V6.04809V6.04274V6.03739V6.03204V6.0267V6.02137V6.01604V6.01072V6.0054V6.00009V5.99478V5.98947V5.98417V5.97888V5.97359V5.96831V5.96303V5.95775V5.95248V5.94721V5.94195V5.9367V5.93145V5.9262V5.92096V5.91572V5.91049V5.90526V5.90004V5.89482V5.88961V5.8844V5.87919V5.87399V5.8688V5.86361V5.85842V5.85324V5.84806V5.84289V5.83772V5.83256V5.8274V5.82224V5.81709V5.81194V5.8068V5.80167V5.79653V5.7914V5.78628V5.78116V5.77604V5.77093V5.76582V5.76072V5.75562V5.75052V5.74543V5.74035V5.73526V5.73019V5.72511V5.72004V5.71497V5.70991V5.70485V5.6998V5.69475V5.6897V5.68466V5.67962V5.67459V5.66956V5.66453V5.65951V5.65449V5.64948V5.64447V5.63946V5.63446V5.62946V5.62446V5.61947V5.61448V5.6095V5.60452V5.59954V5.59457V5.5896V5.58463V5.57967V5.57471V5.56976V5.56481V5.55986V5.55491V5.54997V5.54504V5.5401V5.53517V5.53025V5.52532V5.52041V5.51549V5.51058V5.50567V5.50076V5.49586V5.49096V5.48606V5.48117V5.47628V5.4714V5.46652V5.46164V5.45676V5.45189V5.44702V5.44215V5.43729V5.43243V5.42757V5.42272V5.41787V5.41302V5.40818V5.40334V5.3985V5.39366V5.38883V5.384V5.37918V5.37435V5.36953V5.36472V5.3599V5.35509V5.35028V5.34548V5.34068V5.33588V5.33108V5.32629V5.3215V5.31671V5.31192V5.30714V5.30236V5.29758V5.29281V5.28804V5.28327V5.2785V5.27374V5.26898V5.26422V5.25946V5.25471V5.24996V5.24521V5.24046V5.23572V5.23098V5.22624V5.22151V5.21677V5.21204V5.20731V5.20259V5.19787V5.19315V5.18843V5.18371V5.179V5.17428V5.16958V5.16487V5.16016V5.15546V5.15076V5.14606V5.14137V5.13667V5.13198V5.12729V5.12261V5.11792V5.11324V5.10856V5.10388V5.0992V5.09453V5.08986V5.08519V5.08052V5.07585V5.07119V5.06653V5.06187V5.05721V5.05255V5.0479V5.04324V5.03859V5.03394V5.0293V5.02465V5.02001V5.01537V5.01073V5.00609V5.00145V4.99682V4.99218V4.98755V4.98292V4.9783V4.97367V4.96904V4.96442V4.9598V4.95518V4.95056V4.94595V4.94133V4.93672V4.9321V4.92749V4.92288V4.91828V4.91367V4.90907V4.90446V4.89986V4.89526V4.89066V4.88606V4.88147V4.87687V4.87228V4.86768V4.86309V4.8585V4.85391V4.84933V4.84474V4.84015V4.83557V4.83099V4.8264V4.82182V4.81724V4.81267V4.80809V4.80351V4.79894V4.79436V4.78979V4.78522V4.78065V4.77608V4.77151V4.76694V4.76237V4.7578V4.75324V4.74867V4.74411V4.73955V4.73498V4.73042V4.72586V4.7213V4.71674V4.71219V4.70763V4.70307V4.69851V4.69396V4.6894V4.68485V4.6803V4.67574V4.67119V4.66664V4.66209V4.65754V4.65299V4.64844V4.64389V4.63934V4.63479V4.63025V4.6257V4.62115V4.61661V4.61206V4.60752V4.60297V4.59843V4.59388V4.58934V4.58479V4.58025V4.57571V4.57116V4.56662V4.56208V4.55754V4.553V4.54845V4.54391V4.53937V4.53483V4.53029V4.52575V4.52121V4.51667V4.51212V4.50758V4.50304V4.4985V4.49396V4.48942V4.48488V4.48034V4.4758V4.47126V4.46672V4.46217V4.45763V4.45309V4.44855V4.44401V4.43947V4.43492V4.43038V4.42584V4.4213V4.41675V4.41221V4.40767V4.40312V4.39858V4.39403V4.38949V4.38494V4.38039V4.37585V4.3713V4.36675V4.36221V4.35766V4.35311V4.34856V4.34401V4.33946V4.33491V4.33036V4.32581V4.32125V4.3167V4.31215V4.30759V4.30304V4.29848V4.29392V4.28937V4.28481V4.28025V4.27569V4.27113V4.26657V4.26201V4.25744V4.25288V4.24832V4.24375V4.23918V4.23462V4.23005V4.22548V4.22091V4.21634V4.21177V4.20719V4.20262V4.19805V4.19347V4.18889V4.18431V4.17974V4.17516V4.17057V4.16599V4.16141V4.15682V4.15224V4.14765V4.14306V4.13847V4.13388V4.12929V4.12469V4.1201V4.1155V4.11445L8.58124 8.69928C8.23354 8.94764 7.76646 8.94764 7.41876 8.69928L1 4.11445V12C1 12.5523 1.44772 13 2 13H4C4.27614 13 4.5 13.2239 4.5 13.5C4.5 13.7761 4.27614 14 4 14H2C0.89543 14 0 13.1046 0 12V4ZM14 3C14.2163 3 14.4165 3.06869 14.5802 3.18544L8 7.88555L1.41982 3.18542C1.58343 3.06868 1.78369 3 2 3H14ZM8.62718 11.3369C8.58208 10.8877 7.91792 10.8877 7.87282 11.3369L7.74264 12.6336L6.53863 12.0964C6.12154 11.9103 5.78945 12.4774 6.16145 12.7405L7.23528 13.5L6.16145 14.2595C5.78945 14.5226 6.12154 15.0897 6.53863 14.9036L7.74264 14.3664L7.87282 15.6631C7.91792 16.1123 8.58208 16.1123 8.62718 15.6631L8.75736 14.3664L9.96137 14.9036C10.3785 15.0897 10.7105 14.5226 10.3385 14.2595L9.26472 13.5L10.3385 12.7405C10.7105 12.4774 10.3785 11.9103 9.96137 12.0964L8.75736 12.6336L8.62718 11.3369ZM14.1272 11.3369C14.0821 10.8877 13.4179 10.8877 13.3728 11.3369L13.2426 12.6336L12.0386 12.0964C11.6215 11.9103 11.2895 12.4774 11.6615 12.7405L12.7353 13.5L11.6615 14.2595C11.2895 14.5226 11.6215 15.0897 12.0386 14.9036L13.2426 14.3664L13.3728 15.6631C13.4179 16.1123 14.0821 16.1123 14.1272 15.6631L14.2574 14.3664L15.4614 14.9036C15.8785 15.0897 16.2105 14.5226 15.8385 14.2595L14.7647 13.5L15.8385 12.7405C16.2105 12.4774 15.8785 11.9103 15.4614 12.0964L14.2574 12.6336L14.1272 11.3369Z' fill='black'/%3e%3c/svg%3e";
@@ -40373,12 +40409,12 @@ var img = "data:image/svg+xml,%3c!-- * Copyright (c) 2024%2c WSO2 Inc. (http://w
 
 const images = {
     'Email OTP': img$6,
-    facebook: img$4,
     Github: img$3,
     Google: img$2,
     Microsoft: img$1,
     'SMS OTP': img$5,
     TOTP: img,
+    facebook: img$4,
 };
 /**
  * This component renders the login options box.
@@ -44375,7 +44411,7 @@ class SPACryptoUtils {
             keys: [jwk],
         }), jwtVerifyOptions)
             .then(() => Promise.resolve(true))
-            .catch(error => {
+            .catch((error) => {
             var _a;
             return Promise.reject(new AsgardeoUIException('REACT_UI-CRYPTO-UTILS-VJ-IV01', (_a = error === null || error === void 0 ? void 0 : error.reason) !== null && _a !== void 0 ? _a : JSON.stringify(error), `${error === null || error === void 0 ? void 0 : error.code} ${error === null || error === void 0 ? void 0 : error.claim}`));
         });
@@ -44385,37 +44421,6 @@ class SPACryptoUtils {
 var css$1 = "/**\n * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.Box-asgardeoSignIn {\n  min-width: 350px;\n  min-height: 75vh;\n}\n.Box-asgardeoSignIn .email-otp-resend-button {\n  margin-top: 0;\n}\n.Box-asgardeoSignIn .multiple-otions-title {\n  margin: 16px 0 34px;\n}\n.Box-asgardeoSignIn .asgardeo-multiple-options-paper {\n  padding-bottom: 64px;\n}\n.Box-asgardeoSignIn .asgardeo-multiple-options-paper .asgardeo-sign-in-alert {\n  margin-bottom: 24px;\n}\n\n.Box-circularProgressHolder {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 75vh;\n}\n.Box-circularProgressHolder .circular-progress {\n  color: rgb(214, 211, 211) !important;\n}\n\n.asgardeo-sign-in-footer,\n.asgardeo-sign-in-logo {\n  opacity: 0.5;\n  animation: fade-in 0.7s ease-in-out forwards;\n}\n\n@keyframes fade-in {\n  to {\n    opacity: 1;\n  }\n}\n.circular-progress-holder-authn {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n}\n.circular-progress-holder-authn .sign-in-button-progress {\n  color: var(--oxygen-palette-primary-main);\n  margin: 0 auto !important;\n  max-height: 25px;\n  max-width: 25px;\n  margin-left: 12px;\n}";
 n(css$1,{});
 
-/**
- * This component renders the IdentifierFirst authentication form.
- *
- * @param {IdentifierFirstProps} props - Props injected to the IdentifierFirst authentication component.
- * @param {BrandingProps} props.brandingProps - Branding props.
- * @param {Function} props.handleAuthenticate - Callback to handle authentication.
- * @param {Authenticator} props.authenticator - Authenticator.
- * @param {AlertType} props.alert - Alert type.
- * @param {ReactElement[]} props.renderLoginOptions - Login options.
- * @param {boolean} props.showSelfSignUp - Show self sign up.
- *
- * @return {ReactElement}
- */
-const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingProps, children, showSelfSignUp, renderLoginOptions, }) => {
-    var _a;
-    const { isAuthLoading, username, setUsername } = useContext(AsgardeoContext);
-    const { t, isLoading } = useTranslations({
-        componentLocaleOverride: brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.locale,
-        componentTextOverrides: (_a = brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.preference) === null || _a === void 0 ? void 0 : _a.text,
-        screen: ScreenType.Login,
-    });
-    if (isLoading) {
-        return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-basic-auth-skeleton", children: [jsxRuntimeExports.jsx(Pi, { className: "skeleton-title", variant: "text", width: 100, height: 55 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-submit-button", variant: "rectangular", width: 270, height: 40 })] }));
-    }
-    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "Paper-basicAuth", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, className: "Typography-basicAuthTitle", children: t(keys.login.login.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-basic-auth-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: t(keys.login.username), name: "text", value: username, placeholder: t(keys.login.enter.your.username), onChange: (e) => setUsername(e.target.value) }), children, jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", type: "submit", fullWidth: true, disabled: isAuthLoading, onClick: () => {
-                    handleAuthenticate(authenticator.authenticatorId, {
-                        username,
-                    });
-                }, children: t(keys.login.button) }), isAuthLoading && (jsxRuntimeExports.jsx("div", { className: "circular-progress-holder-authn", children: jsxRuntimeExports.jsx(ae, { className: "sign-in-button-progress" }) })), showSelfSignUp && (jsxRuntimeExports.jsxs(je, { container: true, children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { children: t(keys.common.prefix.register) }), jsxRuntimeExports.jsx(SignIn$1.Link, { href: "./register", className: "asgardeo-register-link", children: t(keys.common.register) })] })), renderLoginOptions.length !== 0 && jsxRuntimeExports.jsxs(SignIn$1.Divider, { children: [" ", t(keys.common.or), " "] }), renderLoginOptions] }));
-};
-
 /**
  * This component provides the sign-in functionality.
  *
@@ -44428,13 +44433,13 @@ const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingPro
 const SignIn = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { basicAuthChildren, brandingProps, emailOtpChildren, identifierFirstChildren, showFooter = true, showLogo = true, showSignUp, smsOtpChildren, totpChildren, } = props;
-    const [isComponentLoading, setIsComponentLoading] = useState(true);
     const [alert, setAlert] = useState();
     const [showSelfSignUp, setShowSelfSignUp] = useState(showSignUp);
     const [componentBranding, setComponentBranding] = useState();
     const { isAuthenticated } = useAuthentication();
     const { config } = useConfig();
     const authContext = useContext(AsgardeoContext);
+    const { setAuthResponse, setIsComponentLoading } = authContext;
     const brandingPreference = useContext(BrandingPreferenceContext);
     const { isLoading, t } = useTranslations({
         componentLocaleOverride: brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.locale,
@@ -44452,15 +44457,16 @@ const SignIn = (props) => {
          */
         authorize()
             .then((response) => {
-            authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(response);
-            setIsComponentLoading(false);
+            setAuthResponse(response);
         })
             .catch((error) => {
             setAlert({ alertType: { error: true }, key: keys.common.error });
-            setIsComponentLoading(false);
             throw new AsgardeoUIException('REACT_UI-SIGN_IN-SI-SE01', 'Authorization failed', error.stack);
+        })
+            .finally(() => {
+            setIsComponentLoading(false);
         });
-    }, []);
+    }, [setAuthResponse, setIsComponentLoading]);
     /**
      * Handles the generalized authentication process.
      * @param {string} authenticatorId - Authenticator ID.
@@ -44472,7 +44478,7 @@ const SignIn = (props) => {
         if ((authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === undefined) {
             throw new AsgardeoUIException('REACT_UI-SIGN_IN-HA-IV02', 'Auth response is undefined.');
         }
-        authContext.setIsAuthLoading(true);
+        authContext === null || authContext === void 0 ? void 0 : authContext.setIsAuthLoading(true);
         const resp = yield authenticate({
             flowId: authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.flowId,
             selectedAuthenticator: {
@@ -44481,7 +44487,7 @@ const SignIn = (props) => {
             },
         }).catch((authnError) => {
             setAlert({ alertType: { error: true }, key: keys.common.error });
-            authContext.setIsAuthLoading(false);
+            authContext === null || authContext === void 0 ? void 0 : authContext.setIsAuthLoading(false);
             throw new AsgardeoUIException('REACT_UI-SIGN_IN-HA-SE03', 'Authentication failed.', authnError.stack);
         });
         if (!authParams) {
@@ -44523,7 +44529,7 @@ const SignIn = (props) => {
             const authInstance = AuthClient.getInstance();
             const state = (yield authInstance.getDataLayer().getTemporaryDataParameter('state')).toString();
             yield authInstance.requestAccessToken(resp.authData.code, resp.authData.session_state, state);
-            authContext.setAuthentication();
+            authContext === null || authContext === void 0 ? void 0 : authContext.setAuthentication();
         }
         else if (resp.flowStatus === FlowStatus.FailIncomplete) {
             authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(Object.assign(Object.assign({}, resp), { nextStep: authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.nextStep }));
@@ -44533,13 +44539,13 @@ const SignIn = (props) => {
             authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(resp);
             setShowSelfSignUp(false);
         }
-        authContext.setIsAuthLoading(false);
+        authContext === null || authContext === void 0 ? void 0 : authContext.setIsAuthLoading(false);
     });
     const renderLoginOptions = (authenticators) => {
         const LoginOptions = [];
         authenticators.forEach((authenticator) => {
             const displayName = authenticator.idp === 'LOCAL' ? authenticator.authenticator : authenticator.idp;
-            LoginOptions.push(jsxRuntimeExports.jsx(LoginOptionsBox, { isAuthLoading: authContext.isAuthLoading, socialName: authenticator.authenticator, displayName: `${t(keys.common.multiple.options.prefix)} ${displayName}`, handleOnClick: () => handleAuthenticate(authenticator.authenticatorId) }, authenticator.authenticatorId));
+            LoginOptions.push(jsxRuntimeExports.jsx(LoginOptionsBox, { isAuthLoading: authContext === null || authContext === void 0 ? void 0 : authContext.isAuthLoading, socialName: authenticator.authenticator, displayName: `${t(keys.common.multiple.options.prefix)} ${displayName}`, handleOnClick: () => handleAuthenticate(authenticator.authenticatorId) }, authenticator.authenticatorId));
         });
         return LoginOptions;
     };
@@ -44586,7 +44592,7 @@ const SignIn = (props) => {
     /**
      * Renders the circular progress component while the component or text is loading.
      */
-    if (isComponentLoading || isLoading || authContext.isBrandingLoading) {
+    if ((authContext === null || authContext === void 0 ? void 0 : authContext.isComponentLoading) || isLoading || (authContext === null || authContext === void 0 ? void 0 : authContext.isBrandingLoading)) {
         return (jsxRuntimeExports.jsx("div", { className: "Box-circularProgressHolder", children: jsxRuntimeExports.jsx(ae, { className: "circular-progress" }) }));
     }
     const imgUrl = (_f = (_e = (_d = (_c = (_b = brandingPreference === null || brandingPreference === void 0 ? void 0 : brandingPreference.preference) === null || _b === void 0 ? void 0 : _b.theme) === null || _c === void 0 ? void 0 : _c.LIGHT) === null || _d === void 0 ? void 0 : _d.images) === null || _e === void 0 ? void 0 : _e.logo) === null || _f === void 0 ? void 0 : _f.imgURL;
@@ -44595,7 +44601,7 @@ const SignIn = (props) => {
     if (showFooter && copyrightText.includes('{{currentYear}}')) {
         copyrightText = copyrightText.replace('{{currentYear}}', new Date().getFullYear().toString());
     }
-    return (jsxRuntimeExports.jsx(eo, { theme: generateThemeSignIn(componentBranding === null || componentBranding === void 0 ? void 0 : componentBranding.preference.theme), children: jsxRuntimeExports.jsxs(SignIn$1, { className: "Box-asgardeoSignIn", children: [showLogo && !(isLoading || isComponentLoading) && (jsxRuntimeExports.jsx(SignIn$1.Image, { className: "asgardeo-sign-in-logo", src: imgUrl })), ((_g = authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === null || _g === void 0 ? void 0 : _g.flowStatus) !== FlowStatus.SuccessCompleted && !isAuthenticated && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderSignIn(), showFooter && !(isLoading || isComponentLoading) && (jsxRuntimeExports.jsx(SignIn$1.Footer, { className: "asgardeo-sign-in-footer", copyrights: { children: copyrightText }, items: [
+    return (jsxRuntimeExports.jsx(eo, { theme: generateThemeSignIn(componentBranding === null || componentBranding === void 0 ? void 0 : componentBranding.preference.theme), children: jsxRuntimeExports.jsxs(SignIn$1, { className: "Box-asgardeoSignIn", children: [showLogo && !(isLoading || (authContext === null || authContext === void 0 ? void 0 : authContext.isComponentLoading)) && (jsxRuntimeExports.jsx(SignIn$1.Image, { className: "asgardeo-sign-in-logo", src: imgUrl })), ((_g = authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === null || _g === void 0 ? void 0 : _g.flowStatus) !== FlowStatus.SuccessCompleted && !isAuthenticated && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderSignIn(), showFooter && !(isLoading || (authContext === null || authContext === void 0 ? void 0 : authContext.isComponentLoading)) && (jsxRuntimeExports.jsx(SignIn$1.Footer, { className: "asgardeo-sign-in-footer", copyrights: { children: copyrightText }, items: [
                                 {
                                     children: (jsxRuntimeExports.jsx(SignIn$1.Link, { href: componentBranding.preference.urls.privacyPolicyURL, children: t(keys.common.privacy.policy) })),
                                 },
@@ -45014,6 +45020,7 @@ const AsgardeoProvider = (props) => {
     const [isBrandingLoading, setIsBrandingLoading] = useState(true);
     const [isTextLoading, setIsTextLoading] = useState(true);
     const [isAuthLoading, setIsAuthLoading] = useState(false);
+    const [isComponentLoading, setIsComponentLoading] = useState(true);
     const [authResponse, setAuthResponse] = useState();
     const [username, setUsername] = useState('');
     const onSignInRef = useRef();
@@ -45071,13 +45078,15 @@ const AsgardeoProvider = (props) => {
         isAuthLoading,
         isAuthenticated,
         isBrandingLoading,
-        isGlobalLoading: isBrandingLoading || isTextLoading || isAuthLoading,
+        isComponentLoading,
+        isGlobalLoading: isAuthLoading || isBrandingLoading || isComponentLoading || isTextLoading,
         isTextLoading,
         onSignOutRef,
         setAuthResponse,
         setAuthentication,
         setIsAuthLoading,
         setIsBrandingLoading,
+        setIsComponentLoading,
         setIsTextLoading,
         setOnSignIn,
         setOnSignOut,
@@ -45091,9 +45100,11 @@ const AsgardeoProvider = (props) => {
         isAuthLoading,
         isAuthenticated,
         isBrandingLoading,
+        isComponentLoading,
         isTextLoading,
         setAuthResponse,
         setAuthentication,
+        setIsComponentLoading,
         setOnSignIn,
         setOnSignOut,
         setUsername,
@@ -45134,8 +45145,134 @@ const useOn = (props) => {
             default:
                 throw new AsgardeoUIException('REACT-USE_ON-UO-IV-01', 'Invalid event type provided.');
         }
-    }, []);
+    }, [callback, contextValue, event]);
 };
 
 export { AsgardeoProvider, Hooks, SignIn, SignInButton, SignOutButton, SignedIn, SignedOut, useAuthentication, useOn };
 //# sourceMappingURL=index.js.map
+re || new SessionStore();
+    const spaUtils = new SPACryptoUtils();
+    const authClient = AuthClient.getInstance(config, storeInstance, spaUtils);
+    /**
+     * Sets the authentication status and access token.
+     */
+    const setAuthentication = React$1.useCallback(() => {
+        authClient.isAuthenticated().then((isAuth) => {
+            setIsAuthenticated(isAuth);
+            if (isAuth) {
+                authClient.getAccessToken().then((accessTokenFromClient) => {
+                    if (accessTokenFromClient) {
+                        setAccessToken(accessTokenFromClient);
+                        getProfileInformation().then((response) => {
+                            setUser(response);
+                        });
+                        if (onSignInRef.current) {
+                            onSignInRef.current();
+                        }
+                    }
+                });
+            }
+        });
+    }, [authClient]);
+    React$1.useEffect(() => {
+        setAuthentication();
+        /**
+         * This script is added so that the popup window can send the code and state to the parent window
+         */
+        const url = new URL(window.location.href);
+        if (url.searchParams.has('code') && url.searchParams.has('state')) {
+            const code = url.searchParams.get('code');
+            const state = url.searchParams.get('state');
+            /**
+             * Send the 'code' and 'state' to the parent window and close the current window (popup)
+             */
+            window.opener.postMessage({ code, state }, config.signInRedirectURL);
+            window.close();
+        }
+    }, [config.signInRedirectURL, setAuthentication]);
+    const value = React$1.useMemo(() => ({
+        accessToken,
+        authResponse,
+        config,
+        isAuthLoading,
+        isAuthenticated,
+        isBrandingLoading,
+        isComponentLoading,
+        isGlobalLoading: isAuthLoading || isBrandingLoading || isComponentLoading || isTextLoading,
+        isTextLoading,
+        onSignOutRef,
+        setAuthResponse,
+        setAuthentication,
+        setIsAuthLoading,
+        setIsBrandingLoading,
+        setIsComponentLoading,
+        setIsTextLoading,
+        setOnSignIn,
+        setOnSignOut,
+        setUsername,
+        user,
+        username,
+    }), [
+        accessToken,
+        authResponse,
+        config,
+        isAuthLoading,
+        isAuthenticated,
+        isBrandingLoading,
+        isComponentLoading,
+        isTextLoading,
+        setAuthResponse,
+        setAuthentication,
+        setIsComponentLoading,
+        setOnSignIn,
+        setOnSignOut,
+        setUsername,
+        user,
+        username,
+    ]);
+    return (jsxRuntimeExports.jsx(AsgardeoContext.Provider, { value: value, children: jsxRuntimeExports.jsx(BrandingPreferenceProvider, { branding: branding, children: jsxRuntimeExports.jsx(I18nProvider, { providerLocaleOverride: branding === null || branding === void 0 ? void 0 : branding.locale, providerTextOverrides: (_a = branding === null || branding === void 0 ? void 0 : branding.preference) === null || _a === void 0 ? void 0 : _a.text, children: children }) }) }));
+};
+
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+const useOn = (props) => {
+    const { callback, event } = props;
+    const contextValue = React$1.useContext(AsgardeoContext);
+    React$1.useEffect(() => {
+        switch (event) {
+            case exports.Hooks.SignIn:
+                contextValue.setOnSignIn(callback);
+                break;
+            case exports.Hooks.SignOut:
+                contextValue.setOnSignOut(callback);
+                break;
+            default:
+                throw new AsgardeoUIException('REACT-USE_ON-UO-IV-01', 'Invalid event type provided.');
+        }
+    }, [callback, contextValue, event]);
+};
+
+exports.AsgardeoProvider = AsgardeoProvider;
+exports.SignIn = SignIn;
+exports.SignInButton = SignInButton;
+exports.SignOutButton = SignOutButton;
+exports.SignedIn = SignedIn;
+exports.SignedOut = SignedOut;
+exports.useAuthentication = useAuthentication;
+exports.useOn = useOn;
+//# sourceMappingURL=index.js.map