@asgardeo/react 0.1.1 → 0.2.0

package/dist/cjs/types/components/SignIn/fragments/IdentifierFirst.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+import { ReactElement } from 'react';
+import BasicAuthProps from '../../../models/basic-auth-props';
+import './basic-auth.scss';
+/**
+ * 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}
+ */
+declare const IdentifierFirst: ({ handleAuthenticate, authenticator, alert, brandingProps, showSelfSignUp, renderLoginOptions, }: BasicAuthProps) => ReactElement;
+export default IdentifierFirst;

package/dist/cjs/types/models/auth-context.d.ts

@@ -16,9 +16,10 @@
  * under the License.
  */
 /// <reference types="react" />
-import { UIAuthConfig, MeAPIResponse } from '@asgardeo/js';
+import { UIAuthConfig, MeAPIResponse, AuthApiResponse } from '@asgardeo/js';
 interface AuthContext {
     accessToken: string;
+    authResponse: AuthApiResponse;
     config: UIAuthConfig;
     isAuthLoading: boolean;
     isAuthenticated: boolean | undefined;
@@ -26,6 +27,7 @@ interface AuthContext {
     isGlobalLoading: boolean;
     isTextLoading: boolean;
     onSignOutRef: React.MutableRefObject<Function>;
+    setAuthResponse: (response: AuthApiResponse) => void;
     setAuthentication: () => void;
     setIsAuthLoading: (value: boolean) => void;
     setIsBrandingLoading: (value: boolean) => void;

package/dist/cjs/types/models/use-authentication.d.ts

@@ -15,9 +15,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { MeAPIResponse } from '@asgardeo/js';
+import { AuthApiResponse, MeAPIResponse } from '@asgardeo/js';
 interface UseAuthentication {
     accessToken: string;
+    authResponse: AuthApiResponse;
     isAuthenticated: Promise<boolean> | boolean;
     signOut: () => void;
     user: MeAPIResponse;

package/dist/esm/index.js

@@ -40380,7 +40380,7 @@ const BrandingPreferenceContext = createContext(undefined);
  */
 const useAuthentication = () => {
     const contextValue = useContext(AsgardeoContext);
-    const { user, isAuthenticated, accessToken } = contextValue;
+    const { user, isAuthenticated, accessToken, authResponse } = contextValue;
     const signOut$1 = () => {
         signOut().then(() => {
             sessionStorage.clear();
@@ -40389,7 +40389,13 @@ const useAuthentication = () => {
             }
         });
     };
-    return { accessToken, isAuthenticated, signOut: signOut$1, user };
+    return {
+        accessToken,
+        authResponse,
+        isAuthenticated,
+        signOut: signOut$1,
+        user,
+    };
 };
 
 /**
@@ -44268,6 +44274,39 @@ 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, showSelfSignUp, renderLoginOptions, }) => {
+    var _a;
+    const [username, setUsername] = useState('');
+    const { isAuthLoading } = 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) }), jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", type: "submit", fullWidth: true, disabled: isAuthLoading, onClick: () => {
+                    handleAuthenticate(authenticator.authenticatorId, {
+                        username,
+                    });
+                    setUsername('');
+                }, 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.
  *
@@ -44278,9 +44317,8 @@ n(css$1,{});
  * @returns {ReactElement} - React element.
  */
 const SignIn = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { brandingProps, showFooter = true, showLogo = true, showSignUp } = props;
-    const [authResponse, setAuthResponse] = useState();
     const [isComponentLoading, setIsComponentLoading] = useState(true);
     const [alert, setAlert] = useState();
     const [showSelfSignUp, setShowSelfSignUp] = useState(showSignUp);
@@ -44305,7 +44343,7 @@ const SignIn = (props) => {
          */
         authorize()
             .then((response) => {
-            setAuthResponse(response);
+            authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(response);
             setIsComponentLoading(false);
         })
             .catch((error) => {
@@ -44320,14 +44358,14 @@ const SignIn = (props) => {
      * @param {object} [authParams] - Authentication parameters.
      */
     const handleAuthenticate = (authenticatorId, authParams) => __awaiter$1(void 0, void 0, void 0, function* () {
-        var _h, _j, _k;
+        var _k, _l, _m;
         setAlert(undefined);
-        if (authResponse === undefined) {
+        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);
         const resp = yield authenticate({
-            flowId: authResponse.flowId,
+            flowId: authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.flowId,
             selectedAuthenticator: {
                 authenticatorId,
                 params: authParams,
@@ -44338,12 +44376,12 @@ const SignIn = (props) => {
             throw new AsgardeoUIException('REACT_UI-SIGN_IN-HA-SE03', 'Authentication failed.', authnError.stack);
         });
         if (!authParams) {
-            const metaData = (_j = (_h = resp.nextStep) === null || _h === void 0 ? void 0 : _h.authenticators[0]) === null || _j === void 0 ? void 0 : _j.metadata;
+            const metaData = (_l = (_k = resp.nextStep) === null || _k === void 0 ? void 0 : _k.authenticators[0]) === null || _l === void 0 ? void 0 : _l.metadata;
             if (metaData.promptType === PromptType.RedirectionPromt) {
                 /**
                  * Open a popup window to handle redirection prompts
                  */
-                window.open((_k = metaData.additionalData) === null || _k === void 0 ? void 0 : _k.redirectUrl, resp.nextStep.authenticators[0].authenticator, 'width=500,height=600');
+                window.open((_m = metaData.additionalData) === null || _m === void 0 ? void 0 : _m.redirectUrl, resp.nextStep.authenticators[0].authenticator, 'width=500,height=600');
                 /**
                  * Add an event listener to the window to capture the message from the popup
                  */
@@ -44365,25 +44403,25 @@ const SignIn = (props) => {
                 });
             }
             else if (metaData.promptType === PromptType.UserPrompt) {
-                setAuthResponse(resp);
+                authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(resp);
             }
         }
         else if (resp.flowStatus === FlowStatus.SuccessCompleted && resp.authData) {
             /**
              * when the authentication is successful, generate the token
              */
-            setAuthResponse(resp);
+            authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(resp);
             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();
         }
         else if (resp.flowStatus === FlowStatus.FailIncomplete) {
-            setAuthResponse(Object.assign(Object.assign({}, resp), { nextStep: authResponse.nextStep }));
+            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 }));
             setAlert({ alertType: { error: true }, key: keys.common.error });
         }
         else {
-            setAuthResponse(resp);
+            authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(resp);
             setShowSelfSignUp(false);
         }
         authContext.setIsAuthLoading(false);
@@ -44397,13 +44435,17 @@ const SignIn = (props) => {
         return LoginOptions;
     };
     const renderSignIn = () => {
-        var _a;
-        const authenticators = (_a = authResponse === null || authResponse === void 0 ? void 0 : authResponse.nextStep) === null || _a === void 0 ? void 0 : _a.authenticators;
+        var _a, _b;
+        const authenticators = (_b = (_a = authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === null || _a === void 0 ? void 0 : _a.nextStep) === null || _b === void 0 ? void 0 : _b.authenticators;
         if (authenticators) {
             const usernamePasswordAuthenticator = authenticators.find((authenticator) => authenticator.authenticator === 'Username & Password');
             if (usernamePasswordAuthenticator) {
                 return (jsxRuntimeExports.jsx(BasicAuth, { brandingProps: brandingProps, authenticator: usernamePasswordAuthenticator, handleAuthenticate: handleAuthenticate, showSelfSignUp: showSelfSignUp, alert: alert, renderLoginOptions: renderLoginOptions(authenticators.filter((auth) => auth.authenticatorId !== usernamePasswordAuthenticator.authenticatorId)) }));
             }
+            const identifierFirstAuthenticator = authenticators.find((authenticator) => authenticator.authenticator === 'Identifier First');
+            if (identifierFirstAuthenticator) {
+                return (jsxRuntimeExports.jsx(IdentifierFirst, { brandingProps: brandingProps, authenticator: identifierFirstAuthenticator, handleAuthenticate: handleAuthenticate, showSelfSignUp: showSelfSignUp, alert: alert, renderLoginOptions: renderLoginOptions(authenticators.filter((auth) => auth.authenticatorId !== identifierFirstAuthenticator.authenticatorId)) }));
+            }
             if (authenticators.length === 1) {
                 if (authenticators[0].authenticator === 'TOTP') {
                     return (jsxRuntimeExports.jsx(Totp, { brandingProps: brandingProps, authenticator: authenticators[0], alert: alert, handleAuthenticate: handleAuthenticate }));
@@ -44411,14 +44453,14 @@ const SignIn = (props) => {
                 if (
                 // TODO: change after api based auth gets fixed
                 new SPACryptoUtils()
-                    .base64URLDecode(authResponse.nextStep.authenticators[0].authenticatorId)
+                    .base64URLDecode(authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.nextStep.authenticators[0].authenticatorId)
                     .split(':')[0] === 'email-otp-authenticator') {
                     return (jsxRuntimeExports.jsx(EmailOtp, { alert: alert, brandingProps: brandingProps, authenticator: authenticators[0], handleAuthenticate: handleAuthenticate }));
                 }
                 if (
                 // TODO: change after api based auth gets fixed
                 new SPACryptoUtils()
-                    .base64URLDecode(authResponse.nextStep.authenticators[0].authenticatorId)
+                    .base64URLDecode(authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.nextStep.authenticators[0].authenticatorId)
                     .split(':')[0] === 'sms-otp-authenticator') {
                     return (jsxRuntimeExports.jsx(SmsOtp, { alert: alert, brandingProps: brandingProps, authenticator: authenticators[0], handleAuthenticate: handleAuthenticate }));
                 }
@@ -44444,15 +44486,15 @@ 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 })), (authResponse === null || authResponse === void 0 ? void 0 : authResponse.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 || 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: [
                                 {
                                     children: (jsxRuntimeExports.jsx(SignIn$1.Link, { href: componentBranding.preference.urls.privacyPolicyURL, children: t(keys.common.privacy.policy) })),
                                 },
                                 {
                                     children: (jsxRuntimeExports.jsx(SignIn$1.Link, { href: componentBranding.preference.urls.termsOfUseURL, children: t(keys.common.terms.of.service) })),
                                 },
-                                { children: jsxRuntimeExports.jsx(SignIn$1.Typography, { children: (_g = componentBranding === null || componentBranding === void 0 ? void 0 : componentBranding.locale) !== null && _g !== void 0 ? _g : DEFAULT_LOCALE }) },
-                            ] }))] })), ((authResponse === null || authResponse === void 0 ? void 0 : authResponse.flowStatus) === FlowStatus.SuccessCompleted || isAuthenticated) && (jsxRuntimeExports.jsx("div", { style: { backgroundColor: 'white', padding: '1rem' }, children: "Successfully Authenticated" }))] }) }));
+                                { children: jsxRuntimeExports.jsx(SignIn$1.Typography, { children: (_h = componentBranding === null || componentBranding === void 0 ? void 0 : componentBranding.locale) !== null && _h !== void 0 ? _h : DEFAULT_LOCALE }) },
+                            ] }))] })), (((_j = authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === null || _j === void 0 ? void 0 : _j.flowStatus) === FlowStatus.SuccessCompleted || isAuthenticated) && (jsxRuntimeExports.jsx("div", { style: { backgroundColor: 'white', padding: '1rem' }, children: "Successfully Authenticated" }))] }) }));
 };
 
 /**
@@ -44863,6 +44905,7 @@ const AsgardeoProvider = (props) => {
     const [isBrandingLoading, setIsBrandingLoading] = useState(true);
     const [isTextLoading, setIsTextLoading] = useState(true);
     const [isAuthLoading, setIsAuthLoading] = useState(false);
+    const [authResponse, setAuthResponse] = useState();
     const onSignInRef = useRef();
     const onSignOutRef = useRef();
     const setOnSignIn = useCallback((newOnSignIn) => {
@@ -44913,6 +44956,7 @@ const AsgardeoProvider = (props) => {
     }, [config.signInRedirectURL, setAuthentication]);
     const value = useMemo(() => ({
         accessToken,
+        authResponse,
         config,
         isAuthLoading,
         isAuthenticated,
@@ -44920,6 +44964,7 @@ const AsgardeoProvider = (props) => {
         isGlobalLoading: isBrandingLoading || isTextLoading || isAuthLoading,
         isTextLoading,
         onSignOutRef,
+        setAuthResponse,
         setAuthentication,
         setIsAuthLoading,
         setIsBrandingLoading,
@@ -44929,11 +44974,13 @@ const AsgardeoProvider = (props) => {
         user,
     }), [
         accessToken,
+        authResponse,
         config,
         isAuthLoading,
         isAuthenticated,
         isBrandingLoading,
         isTextLoading,
+        setAuthResponse,
         setAuthentication,
         setOnSignIn,
         setOnSignOut,