feat(react): Implement support for identifier first authenticator

.changeset/fluffy-colts-rest.md

@@ -0,0 +1,5 @@
+---
+"@asgardeo/react": minor
+---
+
+Implement support for identifier first authenticator

packages/react/src/components/SignIn/SignIn.tsx

@@ -50,6 +50,7 @@ import {SignIn as UISignIn} from '../../oxygen-ui-react-auth-components';
 import generateThemeSignIn from '../../theme/generate-theme-sign-in';
 import SPACryptoUtils from '../../utils/crypto-utils';
 import './sign-in.scss';
+import IdentifierFirst from './fragments/IdentifierFirst';
 
 /**
  * This component provides the sign-in functionality.
@@ -63,7 +64,6 @@ import './sign-in.scss';
 const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
   const {brandingProps, showFooter = true, showLogo = true, showSignUp} = props;
 
-  const [authResponse, setAuthResponse] = useState<AuthApiResponse>();
   const [isComponentLoading, setIsComponentLoading] = useState<boolean>(true);
   const [alert, setAlert] = useState<AlertType>();
   const [showSelfSignUp, setShowSelfSignUp] = useState<boolean>(showSignUp);
@@ -93,7 +93,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
      */
     authorize()
       .then((response: AuthApiResponse) => {
-        setAuthResponse(response);
+        authContext?.setAuthResponse(response);
         setIsComponentLoading(false);
       })
       .catch((error: Error) => {
@@ -111,14 +111,14 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
   const handleAuthenticate = async (authenticatorId: string, authParams?: {[key: string]: string}): Promise<void> => {
     setAlert(undefined);
 
-    if (authResponse === undefined) {
+    if (authContext?.authResponse === undefined) {
       throw new AsgardeoUIException('REACT_UI-SIGN_IN-HA-IV02', 'Auth response is undefined.');
     }
 
     authContext.setIsAuthLoading(true);
 
     const resp: AuthApiResponse = await authenticate({
-      flowId: authResponse.flowId,
+      flowId: authContext?.authResponse.flowId,
       selectedAuthenticator: {
         authenticatorId,
         params: authParams,
@@ -162,13 +162,13 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
           window.removeEventListener('message', messageEventHandler);
         });
       } else if (metaData.promptType === PromptType.UserPrompt) {
-        setAuthResponse(resp);
+        authContext?.setAuthResponse(resp);
       }
     } else if (resp.flowStatus === FlowStatus.SuccessCompleted && resp.authData) {
       /**
        * when the authentication is successful, generate the token
        */
-      setAuthResponse(resp);
+      authContext?.setAuthResponse(resp);
 
       const authInstance: UIAuthClient = AuthClient.getInstance();
       const state: string = (await authInstance.getDataLayer().getTemporaryDataParameter('state')).toString();
@@ -177,14 +177,14 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
 
       authContext.setAuthentication();
     } else if (resp.flowStatus === FlowStatus.FailIncomplete) {
-      setAuthResponse({
+      authContext?.setAuthResponse({
         ...resp,
-        nextStep: authResponse.nextStep,
+        nextStep: authContext?.authResponse.nextStep,
       });
 
       setAlert({alertType: {error: true}, key: keys.common.error});
     } else {
-      setAuthResponse(resp);
+      authContext?.setAuthResponse(resp);
       setShowSelfSignUp(false);
     }
 
@@ -211,7 +211,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
   };
 
   const renderSignIn = (): ReactElement => {
-    const authenticators: Authenticator[] = authResponse?.nextStep?.authenticators;
+    const authenticators: Authenticator[] = authContext?.authResponse?.nextStep?.authenticators;
 
     if (authenticators) {
       const usernamePasswordAuthenticator: Authenticator = authenticators.find(
@@ -235,6 +235,27 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         );
       }
 
+      const identifierFirstAuthenticator: Authenticator = authenticators.find(
+        (authenticator: Authenticator) => authenticator.authenticator === 'Identifier First',
+      );
+
+      if (identifierFirstAuthenticator) {
+        return (
+          <IdentifierFirst
+            brandingProps={brandingProps}
+            authenticator={identifierFirstAuthenticator}
+            handleAuthenticate={handleAuthenticate}
+            showSelfSignUp={showSelfSignUp}
+            alert={alert}
+            renderLoginOptions={renderLoginOptions(
+              authenticators.filter(
+                (auth: Authenticator) => auth.authenticatorId !== identifierFirstAuthenticator.authenticatorId,
+              ),
+            )}
+          />
+        );
+      }
+
       if (authenticators.length === 1) {
         if (authenticators[0].authenticator === 'TOTP') {
           return (
@@ -249,7 +270,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         if (
           // TODO: change after api based auth gets fixed
           new SPACryptoUtils()
-            .base64URLDecode(authResponse.nextStep.authenticators[0].authenticatorId)
+            .base64URLDecode(authContext?.authResponse.nextStep.authenticators[0].authenticatorId)
             .split(':')[0] === 'email-otp-authenticator'
         ) {
           return (
@@ -265,7 +286,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         if (
           // TODO: change after api based auth gets fixed
           new SPACryptoUtils()
-            .base64URLDecode(authResponse.nextStep.authenticators[0].authenticatorId)
+            .base64URLDecode(authContext?.authResponse.nextStep.authenticators[0].authenticatorId)
             .split(':')[0] === 'sms-otp-authenticator'
         ) {
           return (
@@ -326,7 +347,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
         {showLogo && !(isLoading || isComponentLoading) && (
           <UISignIn.Image className="asgardeo-sign-in-logo" src={imgUrl} />
         )}
-        {authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isAuthenticated && (
+        {authContext?.authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isAuthenticated && (
           <>
             {renderSignIn()}
 
@@ -355,7 +376,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
             )}
           </>
         )}
-        {(authResponse?.flowStatus === FlowStatus.SuccessCompleted || isAuthenticated) && (
+        {(authContext?.authResponse?.flowStatus === FlowStatus.SuccessCompleted || isAuthenticated) && (
           <div style={{backgroundColor: 'white', padding: '1rem'}}>Successfully Authenticated</div>
         )}
       </UISignIn>

packages/react/src/components/SignIn/fragments/IdentifierFirst.tsx

@@ -0,0 +1,132 @@
+/**
+ * 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 {ScreenType, keys} from '@asgardeo/js';
+import {CircularProgress, Grid, Skeleton} from '@oxygen-ui/react';
+import {ReactElement, useContext, useState} from 'react';
+import AsgardeoContext from '../../../contexts/asgardeo-context';
+import useTranslations from '../../../hooks/use-translations';
+import BasicAuthProps from '../../../models/basic-auth-props';
+import {SignIn as UISignIn} from '../../../oxygen-ui-react-auth-components';
+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}
+ */
+const IdentifierFirst = ({
+  handleAuthenticate,
+  authenticator,
+  alert,
+  brandingProps,
+  showSelfSignUp,
+  renderLoginOptions,
+}: BasicAuthProps): ReactElement => {
+  const [username, setUsername] = useState<string>('');
+
+  const {isAuthLoading} = useContext(AsgardeoContext);
+
+  const {t, isLoading} = useTranslations({
+    componentLocaleOverride: brandingProps?.locale,
+    componentTextOverrides: brandingProps?.preference?.text,
+    screen: ScreenType.Login,
+  });
+
+  if (isLoading) {
+    return (
+      <UISignIn.Paper className="asgardeo-basic-auth-skeleton">
+        <Skeleton className="skeleton-title" variant="text" width={100} height={55} />
+        <Skeleton className="skeleton-text-field-label" variant="text" width={70} />
+        <Skeleton variant="rectangular" width={300} height={40} />
+        <Skeleton className="skeleton-text-field-label" variant="text" width={70} />
+        <Skeleton variant="rectangular" width={300} height={40} />
+        <Skeleton className="skeleton-submit-button" variant="rectangular" width={270} height={40} />
+      </UISignIn.Paper>
+    );
+  }
+
+  return (
+    <UISignIn.Paper className="Paper-basicAuth">
+      <UISignIn.Typography title className="Typography-basicAuthTitle">
+        {t(keys.login.login.heading)}
+      </UISignIn.Typography>
+
+      {alert && (
+        <UISignIn.Alert className="asgardeo-basic-auth-alert" {...alert?.alertType}>
+          {t(alert.key)}
+        </UISignIn.Alert>
+      )}
+
+      <UISignIn.TextField
+        fullWidth
+        autoComplete="off"
+        label={t(keys.login.username)}
+        name="text"
+        value={username}
+        placeholder={t(keys.login.enter.your.username)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setUsername(e.target.value)}
+      />
+
+      <UISignIn.Button
+        color="primary"
+        variant="contained"
+        type="submit"
+        fullWidth
+        disabled={isAuthLoading}
+        onClick={(): void => {
+          handleAuthenticate(authenticator.authenticatorId, {
+            username,
+          });
+          setUsername('');
+        }}
+      >
+        {t(keys.login.button)}
+      </UISignIn.Button>
+
+      {isAuthLoading && (
+        <div className="circular-progress-holder-authn">
+          <CircularProgress className="sign-in-button-progress" />
+        </div>
+      )}
+
+      {showSelfSignUp && (
+        <Grid container>
+          <UISignIn.Typography>{t(keys.common.prefix.register)}</UISignIn.Typography>
+          <UISignIn.Link href="./register" className="asgardeo-register-link">
+            {t(keys.common.register)}
+          </UISignIn.Link>
+        </Grid>
+      )}
+
+      {renderLoginOptions.length !== 0 && <UISignIn.Divider> {t(keys.common.or)} </UISignIn.Divider>}
+
+      {renderLoginOptions}
+    </UISignIn.Paper>
+  );
+};
+
+export default IdentifierFirst;

packages/react/src/hooks/use-authentication.ts

@@ -32,7 +32,7 @@ import UseAuthentication from '../models/use-authentication';
 const useAuthentication = (): UseAuthentication => {
   const contextValue: AuthContext = useContext(AsgardeoContext);
 
-  const {user, isAuthenticated, accessToken} = contextValue;
+  const {user, isAuthenticated, accessToken, authResponse} = contextValue;
 
   const signOut: () => void = () => {
     signOutApiCall().then(() => {
@@ -43,7 +43,13 @@ const useAuthentication = (): UseAuthentication => {
     });
   };
 
-  return {accessToken, isAuthenticated, signOut, user};
+  return {
+    accessToken,
+    authResponse,
+    isAuthenticated,
+    signOut,
+    user,
+  };
 };
 
 export default useAuthentication;

packages/react/src/models/auth-context.ts

@@ -16,17 +16,19 @@
  * under the License.
  */
 
-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;
   isBrandingLoading: boolean;
   isGlobalLoading: boolean;
   isTextLoading: boolean;
   onSignOutRef: React.MutableRefObject<Function>;
+  setAuthResponse: (response: AuthApiResponse) => void;
   setAuthentication: () => void;
   setIsAuthLoading: (value: boolean) => void;
   setIsBrandingLoading: (value: boolean) => void;

packages/react/src/models/use-authentication.ts

@@ -16,10 +16,11 @@
  * 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;