feat(react): Add support to passing react elements as child props to components

Author: DonOmalVindula

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

@@ -62,7 +62,17 @@ import IdentifierFirst from './fragments/IdentifierFirst';
  * @returns {ReactElement} - React element.
  */
 const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
-  const {brandingProps, showFooter = true, showLogo = true, showSignUp} = props;
+  const {
+    basicAuthChildren,
+    brandingProps,
+    emailOtpChildren,
+    identifierFirstChildren,
+    showFooter = true,
+    showLogo = true,
+    showSignUp,
+    smsOtpChildren,
+    totpChildren,
+  } = props;
 
   const [isComponentLoading, setIsComponentLoading] = useState<boolean>(true);
   const [alert, setAlert] = useState<AlertType>();
@@ -231,7 +241,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
                 (auth: Authenticator) => auth.authenticatorId !== usernamePasswordAuthenticator.authenticatorId,
               ),
             )}
-          />
+          >
+            {basicAuthChildren}
+          </BasicAuth>
         );
       }
 
@@ -252,7 +264,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
                 (auth: Authenticator) => auth.authenticatorId !== identifierFirstAuthenticator.authenticatorId,
               ),
             )}
-          />
+          >
+            {identifierFirstChildren}
+          </IdentifierFirst>
         );
       }
 
@@ -264,7 +278,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
               authenticator={authenticators[0]}
               alert={alert}
               handleAuthenticate={handleAuthenticate}
-            />
+            >
+              {totpChildren}
+            </Totp>
           );
         }
         if (
@@ -279,7 +295,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
               brandingProps={brandingProps}
               authenticator={authenticators[0]}
               handleAuthenticate={handleAuthenticate}
-            />
+            >
+              {emailOtpChildren}
+            </EmailOtp>
           );
         }
 
@@ -295,7 +313,9 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
               brandingProps={brandingProps}
               authenticator={authenticators[0]}
               handleAuthenticate={handleAuthenticate}
-            />
+            >
+              {smsOtpChildren}
+            </SmsOtp>
           );
         }
       }

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

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Grid, Skeleton} from '@oxygen-ui/react';
-import {ReactElement, useContext, useState} from 'react';
+import {PropsWithChildren, ReactElement, useContext, useState} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import BasicAuthProps from '../../../models/basic-auth-props';
@@ -41,11 +41,12 @@ import './basic-auth.scss';
 const BasicAuth = ({
   handleAuthenticate,
   authenticator,
+  children,
   alert,
   brandingProps,
   showSelfSignUp,
   renderLoginOptions,
-}: BasicAuthProps): ReactElement => {
+}: PropsWithChildren<BasicAuthProps>): ReactElement => {
   const [password, setPassword] = useState<string>('');
 
   const {isAuthLoading, username, setUsername} = useContext(AsgardeoContext);
@@ -102,6 +103,8 @@ const BasicAuth = ({
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setPassword(e.target.value)}
       />
 
+      {children}
+
       <UISignIn.Button
         color="primary"
         variant="contained"

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

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Skeleton} from '@oxygen-ui/react';
-import {ReactElement, useContext, useState} from 'react';
+import {PropsWithChildren, ReactElement, useContext, useState} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import EmailOtpProps from '../../../models/email-otp-props';
@@ -35,7 +35,7 @@ import './email-otp.scss';
  * @param {AlertType} props.alert - Alert type.
  * @return {ReactElement}
  */
-const EmailOtp = ({alert, brandingProps, authenticator, handleAuthenticate}: EmailOtpProps): ReactElement => {
+const EmailOtp = ({alert, brandingProps, authenticator, children, handleAuthenticate}: PropsWithChildren<EmailOtpProps>): ReactElement => {
   const [inputValue, setInputValue] = useState<string>();
   const [isContinueLoading, setIsContinueLoading] = useState<boolean>(false);
   const [isResendLoading, setIsResendLoading] = useState<boolean>(false);
@@ -90,6 +90,8 @@ const EmailOtp = ({alert, brandingProps, authenticator, handleAuthenticate}: Ema
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setInputValue(e.target.value)}
       />
 
+      { children }
+
       <UISignIn.Button
         fullWidth
         variant="contained"

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

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Grid, Skeleton} from '@oxygen-ui/react';
-import {ReactElement, useContext, useState} from 'react';
+import {PropsWithChildren, ReactElement, useContext, useState} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import BasicAuthProps from '../../../models/basic-auth-props';
@@ -43,9 +43,10 @@ const IdentifierFirst = ({
   authenticator,
   alert,
   brandingProps,
+  children,
   showSelfSignUp,
   renderLoginOptions,
-}: BasicAuthProps): ReactElement => {
+}: PropsWithChildren<BasicAuthProps>): ReactElement => {
   const {isAuthLoading, username, setUsername} = useContext(AsgardeoContext);
 
   const {t, isLoading} = useTranslations({
@@ -89,6 +90,8 @@ const IdentifierFirst = ({
         onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setUsername(e.target.value)}
       />
 
+      {children}
+
       <UISignIn.Button
         color="primary"
         variant="contained"

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

@@ -18,12 +18,18 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress} from '@oxygen-ui/react';
-import {ReactElement, useState} from 'react';
+import {PropsWithChildren, ReactElement, useState} from 'react';
 import useTranslations from '../../../hooks/use-translations';
 import EmailOtpProps from '../../../models/email-otp-props';
 import {SignIn as UISignIn} from '../../../oxygen-ui-react-auth-components';
 
-const SmsOtp = ({alert, brandingProps, authenticator, handleAuthenticate}: EmailOtpProps): ReactElement => {
+const SmsOtp = ({
+  alert,
+  brandingProps,
+  authenticator,
+  children,
+  handleAuthenticate,
+}: PropsWithChildren<EmailOtpProps>): ReactElement => {
   const [otp, setOtp] = useState<string>();
 
   const {isLoading, t} = useTranslations({
@@ -50,6 +56,8 @@ const SmsOtp = ({alert, brandingProps, authenticator, handleAuthenticate}: Email
 
       <UISignIn.PinInput length={6} onPinChange={setOtp} />
 
+      {children}
+
       <UISignIn.Button
         fullWidth
         variant="contained"

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

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Grid, Skeleton} from '@oxygen-ui/react';
-import {useState, ReactElement, useContext} from 'react';
+import {useState, ReactElement, useContext, PropsWithChildren} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import TotpProps from '../../../models/totp-props';
@@ -36,7 +36,13 @@ import './totp.scss';
  *
  * @return {ReactElement}
  */
-const Totp = ({brandingProps, authenticator, handleAuthenticate, alert}: TotpProps): ReactElement => {
+const Totp = ({
+  brandingProps,
+  authenticator,
+  children,
+  handleAuthenticate,
+  alert,
+}: PropsWithChildren<TotpProps>): ReactElement => {
   const [totp, setTotp] = useState<string>();
 
   const {isAuthLoading} = useContext(AsgardeoContext);
@@ -79,6 +85,8 @@ const Totp = ({brandingProps, authenticator, handleAuthenticate, alert}: TotpPro
 
       <UISignIn.PinInput length={6} onPinChange={setTotp} pinValue={totp} />
 
+      {children}
+
       <UISignIn.Button
         color="primary"
         variant="contained"

packages/react/src/models/sign-in.ts

@@ -20,10 +20,15 @@ import {BrandingProps} from '@asgardeo/js';
 import {ReactElement} from 'react';
 
 export interface SignInProps {
+  basicAuthChildren?: ReactElement;
   brandingProps?: BrandingProps;
+  emailOtpChildren?: ReactElement;
+  identifierFirstChildren?: ReactElement;
   showFooter?: boolean;
   showLogo?: boolean;
   showSignUp?: boolean;
+  smsOtpChildren?: ReactElement;
+  totpChildren?: ReactElement;
 }
 
 export type AlertType = {