diff --git a/.vscode/settings.json b/.vscode/settings.json
index 522634ab..2e34a441 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,7 +3,8 @@
         "workspace",
         "core",
         "react",
-        "auth-components"
+        "auth-components",
+        "sample-app"
     ],
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit"
diff --git a/package.json b/package.json
index 220637cb..10cd326a 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "nx": "18.2.4"
   },
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "recipes/*"
   ]
 }
diff --git a/packages/core/src/api/sign-out.ts b/packages/core/src/api/sign-out.ts
index c5f4b771..54235386 100644
--- a/packages/core/src/api/sign-out.ts
+++ b/packages/core/src/api/sign-out.ts
@@ -18,6 +18,7 @@
 
 import {AuthClient, ResponseMode} from '../auth-client';
 import AsgardeoUIException from '../exception';
+import {UIAuthClient} from '../models/auth-config';
 
 /**
  * Sign out the user.
@@ -45,9 +46,11 @@ const signOut = async (): Promise<void> => {
 
   const formBody: URLSearchParams = new URLSearchParams();
 
+  const authClient: UIAuthClient = AuthClient.getInstance();
+
   try {
-    formBody.append('id_token_hint', await AuthClient.getInstance().getIDToken());
-    formBody.append('client_id', (await AuthClient.getInstance().getDataLayer().getConfigData()).clientID);
+    formBody.append('id_token_hint', await authClient.getIDToken());
+    formBody.append('client_id', (await authClient.getDataLayer().getConfigData()).clientID);
     formBody.append('response_mode', ResponseMode.direct);
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-IV', 'Failed to build the body of the signout request.');
@@ -60,7 +63,8 @@ const signOut = async (): Promise<void> => {
   };
 
   try {
-    signOutUrl = (await AuthClient.getInstance().getOIDCServiceEndpoints()).endSessionEndpoint;
+    const {endSessionEndpoint} = await authClient.getOIDCServiceEndpoints();
+    signOutUrl = endSessionEndpoint;
   } catch (error) {
     throw new AsgardeoUIException('JS_UI_CORE-SIGNOUT-SO-NF', 'Failed to retrieve the sign out endpoint.');
   }
diff --git a/packages/core/src/branding/get-branding.ts b/packages/core/src/branding/get-branding.ts
index 0f63c92c..81c051ec 100644
--- a/packages/core/src/branding/get-branding.ts
+++ b/packages/core/src/branding/get-branding.ts
@@ -41,8 +41,14 @@ const getBranding = async (props: GetBrandingProps): Promise<Branding> => {
   if (!merged) {
     let brandingFromConsole: BrandingPreferenceAPIResponse;
 
-    if ((await AuthClient.getInstance().getDataLayer().getConfigData()).enableConsoleBranding ?? true) {
-      brandingFromConsole = await getBrandingPreference();
+    try {
+      if ((await AuthClient.getInstance().getDataLayer().getConfigData()).enableConsoleBranding ?? true) {
+        brandingFromConsole = await getBrandingPreference();
+      }
+    } catch {
+      /**
+       * If the branding from the console cannot be fetched, proceed with the default branding.
+       */
     }
 
     if (brandingFromConsole?.preference?.configs?.isBrandingEnabled) {
diff --git a/packages/core/src/i18n/get-localization.ts b/packages/core/src/i18n/get-localization.ts
index 84844730..fc708692 100644
--- a/packages/core/src/i18n/get-localization.ts
+++ b/packages/core/src/i18n/get-localization.ts
@@ -21,7 +21,6 @@ import merge from 'lodash.merge';
 import {TextObject} from './screens/model';
 import getBrandingPreferenceText from '../api/get-branding-preference-text';
 import {AuthClient} from '../auth-client';
-import AsgardeoUIException from '../exception';
 import {UIAuthConfig} from '../models/auth-config';
 import {BrandingPreferenceTypes} from '../models/branding-api-response';
 import {BrandingPreferenceTextAPIResponse} from '../models/branding-text-api-response';
@@ -42,21 +41,21 @@ const getLocalization = async (props: GetLocalizationProps): Promise<TextObject>
 
   const configData: AuthClientConfig<UIAuthConfig> = await AuthClient.getInstance().getDataLayer().getConfigData();
 
+  const DEFAULT_NAME: string = 'carbon.super';
+
   try {
     if (configData.enableConsoleTextBranding ?? true) {
       textFromConsoleBranding = await getBrandingPreferenceText({
         locale,
-        name: configData.name ?? 'carbon.super',
+        name: configData.name ?? DEFAULT_NAME,
         screen,
         type: configData.type ?? BrandingPreferenceTypes.Org,
       });
     }
   } catch (error) {
-    throw new AsgardeoUIException(
-      'JS_UI_CORE-LOCALIZATION-IV',
-      'Error occurred while fetching text from console branding.',
-      error.stack,
-    );
+    /**
+     * If the branding from the console cannot be fetched, proceed with the default branding.
+     */
   }
 
   /**
diff --git a/packages/core/src/i18n/screens/common/en-US.ts b/packages/core/src/i18n/screens/common/en-US.ts
index 9a57d9c6..0d732c12 100644
--- a/packages/core/src/i18n/screens/common/en-US.ts
+++ b/packages/core/src/i18n/screens/common/en-US.ts
@@ -20,7 +20,11 @@ import {Common} from './model';
 
 export const common: Common = {
   copyright: '© {{currentYear}} WSO2 LLC.',
+  error: 'Something went wrong. Please try again.',
+  or: 'OR',
+  'prefix.register': "Don't have an account?",
   'privacy.policy': 'Privacy Policy',
+  register: 'Register',
   'site.title': 'WSO2 Identity Server',
   'terms.of.service': 'Terms of Servicet',
 };
diff --git a/packages/core/src/i18n/screens/common/fr-FR.ts b/packages/core/src/i18n/screens/common/fr-FR.ts
index 6cac3ee7..fe34a940 100644
--- a/packages/core/src/i18n/screens/common/fr-FR.ts
+++ b/packages/core/src/i18n/screens/common/fr-FR.ts
@@ -20,7 +20,11 @@ import {Common} from './model';
 
 export const common: Common = {
   copyright: '© {{currentYear}} WSO2 LLC.',
+  error: "Quelque chose s'est mal passé. Veuillez réessayer.",
+  or: 'OU',
+  'prefix.register': "Vous n'avez pas de compte?",
   'privacy.policy': 'Politique de confidentialité',
+  register: "S'inscrire",
   'site.title': 'Identity Server WSO2',
   'terms.of.service': 'Conditions de service',
 };
diff --git a/packages/core/src/i18n/screens/common/model.ts b/packages/core/src/i18n/screens/common/model.ts
index d63ac8dd..d2aaadc0 100644
--- a/packages/core/src/i18n/screens/common/model.ts
+++ b/packages/core/src/i18n/screens/common/model.ts
@@ -21,7 +21,11 @@
  */
 export interface Common {
   copyright: string;
+  error: string;
+  or: string;
+  'prefix.register': string;
   'privacy.policy': string;
+  register: string;
   'site.title': string;
   'terms.of.service': string;
 }
diff --git a/packages/core/src/i18n/screens/emailOtp/en-US.ts b/packages/core/src/i18n/screens/emailOtp/en-US.ts
new file mode 100644
index 00000000..cc0c43fe
--- /dev/null
+++ b/packages/core/src/i18n/screens/emailOtp/en-US.ts
@@ -0,0 +1,26 @@
+/**
+ * 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 {EmailOTP} from './model';
+
+export const emailOtp: EmailOTP = {
+  continue: 'Continue',
+  'email.otp.heading': 'OTP Verification',
+  'enter.verification.code.got.by.device': 'Enter the code sent to your email ID.',
+  'resend.code': 'Resend code',
+};
diff --git a/packages/core/src/i18n/screens/emailOtp/model.ts b/packages/core/src/i18n/screens/emailOtp/model.ts
new file mode 100644
index 00000000..8b8b9b41
--- /dev/null
+++ b/packages/core/src/i18n/screens/emailOtp/model.ts
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+/**
+ * Interface for the TOTP text.
+ */
+export interface EmailOTP {
+  continue: string;
+  'email.otp.heading': string;
+  'enter.verification.code.got.by.device': string;
+  'resend.code': string;
+}
diff --git a/packages/core/src/i18n/screens/keys.ts b/packages/core/src/i18n/screens/keys.ts
index 52a63054..52f34777 100644
--- a/packages/core/src/i18n/screens/keys.ts
+++ b/packages/core/src/i18n/screens/keys.ts
@@ -22,9 +22,15 @@
 interface Keys {
   common: {
     copyright: string;
+    error: string;
+    or: string;
+    prefix: {
+      register: string;
+    };
     privacy: {
       policy: string;
     };
+    register: string;
     site: {
       title: string;
     };
@@ -34,6 +40,28 @@ interface Keys {
       };
     };
   };
+  emailOtp: {
+    continue: string;
+    email: {
+      otp: {
+        heading: string;
+      };
+    };
+    enter: {
+      verification: {
+        code: {
+          got: {
+            by: {
+              device: string;
+            };
+          };
+        };
+      };
+    };
+    resend: {
+      code: string;
+    };
+  };
   login: {
     button: string;
     enter: {
@@ -49,8 +77,22 @@ interface Keys {
     remember: {
       me: string;
     };
+    retry: string;
     username: string;
   };
+  smsOtp: {
+    continue: string;
+    resend: {
+      code: string;
+    };
+
+    sms: {
+      otp: {
+        heading: string;
+        subheading: string;
+      };
+    };
+  };
   totp: {
     continue: string;
     enroll: {
@@ -75,9 +117,15 @@ interface Keys {
 export const keys: Keys = {
   common: {
     copyright: 'common.copyright',
+    error: 'common.error',
+    or: 'common.or',
+    prefix: {
+      register: 'common.prefix.register',
+    },
     privacy: {
       policy: 'common.privacy.policy',
     },
+    register: 'common.register',
     site: {
       title: 'common.site.title',
     },
@@ -87,6 +135,28 @@ export const keys: Keys = {
       },
     },
   },
+  emailOtp: {
+    continue: 'emailOtp.continue',
+    email: {
+      otp: {
+        heading: 'emailOtp.email.otp.heading',
+      },
+    },
+    enter: {
+      verification: {
+        code: {
+          got: {
+            by: {
+              device: 'emailOtp.enter.verification.code.got.by.device',
+            },
+          },
+        },
+      },
+    },
+    resend: {
+      code: 'emailOtp.resend.code',
+    },
+  },
   login: {
     button: 'login.login.button',
     enter: {
@@ -102,8 +172,22 @@ export const keys: Keys = {
     remember: {
       me: 'login.remember.me',
     },
+    retry: 'login.retry',
     username: 'login.username',
   },
+  smsOtp: {
+    continue: 'smsOtp.continue',
+    resend: {
+      code: 'smsOtp.resend.code',
+    },
+
+    sms: {
+      otp: {
+        heading: 'smsOtp.sms.otp.heading',
+        subheading: 'smsOtp.sms.otp.subheading',
+      },
+    },
+  },
   totp: {
     continue: 'totp.continue',
     enroll: {
diff --git a/packages/core/src/i18n/screens/login/en-US.ts b/packages/core/src/i18n/screens/login/en-US.ts
index 173742de..dff3ce0d 100644
--- a/packages/core/src/i18n/screens/login/en-US.ts
+++ b/packages/core/src/i18n/screens/login/en-US.ts
@@ -25,5 +25,6 @@ export const login: Login = {
   'login.heading': 'Sign In',
   password: 'Password',
   'remember.me': 'Remember me on this computer',
+  retry: 'Login failed! Please check your username and password and try again.',
   username: 'Username',
 };
diff --git a/packages/core/src/i18n/screens/login/fr-FR.ts b/packages/core/src/i18n/screens/login/fr-FR.ts
index f5277a65..571b8c15 100644
--- a/packages/core/src/i18n/screens/login/fr-FR.ts
+++ b/packages/core/src/i18n/screens/login/fr-FR.ts
@@ -25,5 +25,6 @@ export const login: Login = {
   'login.heading': 'Se connecter',
   password: 'Mot de passe',
   'remember.me': 'Se souvenir de moi sur cet ordinateur',
+  retry: "Échec de la connexion! Veuillez vérifier votre nom d'utilisateur et votre mot de passe et réessayer.",
   username: "Nom d'utilisateur",
 };
diff --git a/packages/core/src/i18n/screens/login/model.ts b/packages/core/src/i18n/screens/login/model.ts
index b550eb90..e9e51dc7 100644
--- a/packages/core/src/i18n/screens/login/model.ts
+++ b/packages/core/src/i18n/screens/login/model.ts
@@ -26,5 +26,6 @@ export interface Login {
   'login.heading': string;
   password: string;
   'remember.me': string;
+  retry: string;
   username: string;
 }
diff --git a/packages/core/src/i18n/screens/smsOtp/en-US.ts b/packages/core/src/i18n/screens/smsOtp/en-US.ts
new file mode 100644
index 00000000..39078995
--- /dev/null
+++ b/packages/core/src/i18n/screens/smsOtp/en-US.ts
@@ -0,0 +1,26 @@
+/**
+ * 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 {SmsOTP} from './model';
+
+export const smsOtp: SmsOTP = {
+  continue: 'Continue',
+  'resend.code': 'Resend code',
+  'sms.otp.heading': 'OTP Verification',
+  'sms.otp.subheading': 'Enter the code sent to your mobile device.',
+};
diff --git a/packages/core/src/i18n/screens/smsOtp/model.ts b/packages/core/src/i18n/screens/smsOtp/model.ts
new file mode 100644
index 00000000..b44b4646
--- /dev/null
+++ b/packages/core/src/i18n/screens/smsOtp/model.ts
@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+/**
+ * Interface for the TOTP text.
+ */
+export interface SmsOTP {
+  continue: string;
+  'resend.code': string;
+  'sms.otp.heading': string;
+  'sms.otp.subheading': string;
+}
diff --git a/packages/core/src/models/screen-type.ts b/packages/core/src/models/screen-type.ts
index 686add22..078ee062 100644
--- a/packages/core/src/models/screen-type.ts
+++ b/packages/core/src/models/screen-type.ts
@@ -21,6 +21,8 @@
  */
 export enum ScreenType {
   Common = 'common',
+  EmailOTP = 'emailOtp',
   Login = 'login',
+  SMSOTP = 'smsOtp',
   TOTP = 'totp',
 }
diff --git a/packages/react/declarations.d.ts b/packages/react/declarations.d.ts
new file mode 100644
index 00000000..875a50f8
--- /dev/null
+++ b/packages/react/declarations.d.ts
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/packages/react/src/assets/email-solid.svg b/packages/react/src/assets/email-solid.svg
new file mode 100644
index 00000000..a7a67eb4
--- /dev/null
+++ b/packages/react/src/assets/email-solid.svg
@@ -0,0 +1,21 @@
+<!--
+ * Copyright (c) 2021-2024, WSO2 Inc. (http://www.wso2.org).
+ *
+ * WSO2 Inc. 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.
+-->
+
+<svg id="email-solid-icon" class="icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path 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"/>
+</svg>
diff --git a/packages/react/src/assets/social-logins/facebook.svg b/packages/react/src/assets/social-logins/facebook.svg
new file mode 100644
index 00000000..b217c013
--- /dev/null
+++ b/packages/react/src/assets/social-logins/facebook.svg
@@ -0,0 +1,24 @@
+<!--
+ * 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.
+-->
+
+<svg version="1.1" id="facebook-logo" class="icon" width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
+    <path style="fill:#1976D2;" d="M448,0H64C28.704,0,0,28.704,0,64v384c0,35.296,28.704,64,64,64h384c35.296,0,64-28.704,64-64V64
+        C512,28.704,483.296,0,448,0z" />
+    <path style="fill:#FAFAFA;" d="M432,256h-80v-64c0-17.664,14.336-16,32-16h32V96h-64l0,0c-53.024,0-96,42.976-96,96v64h-64v80h64
+        v176h96V336h48L432,256z" />
+</svg>
diff --git a/packages/react/src/assets/social-logins/github.svg b/packages/react/src/assets/social-logins/github.svg
new file mode 100644
index 00000000..e1b19871
--- /dev/null
+++ b/packages/react/src/assets/social-logins/github.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+ * 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.
+-->
+
+<svg id="github-idp-illustration" class="icon" xmlns="http://www.w3.org/2000/svg" width="67.91" height="66.233" viewBox="0 0 67.91 66.233">
+    <g id="github-idp-illustration" transform="translate(-386.96 658.072)">
+        <path id="path18" d="M420.915-658.072a33.956,33.956,0,0,0-33.955,33.955,33.963,33.963,0,0,0,23.221,32.22c1.7.314,2.32-.737,2.32-1.633,0-.81-.031-3.484-.046-6.322-9.446,2.054-11.44-4.006-11.44-4.006-1.545-3.925-3.77-4.968-3.77-4.968-3.081-2.107.232-2.064.232-2.064,3.41.239,5.205,3.5,5.205,3.5,3.028,5.19,7.943,3.69,9.881,2.822a7.23,7.23,0,0,1,2.156-4.54c-7.542-.859-15.47-3.77-15.47-16.781a13.141,13.141,0,0,1,3.5-9.114,12.2,12.2,0,0,1,.329-8.986s2.851-.913,9.34,3.48a32.545,32.545,0,0,1,8.5-1.143,32.629,32.629,0,0,1,8.506,1.143c6.481-4.393,9.328-3.48,9.328-3.48a12.185,12.185,0,0,1,.333,8.986,13.115,13.115,0,0,1,3.495,9.114c0,13.042-7.943,15.913-15.5,16.754,1.218,1.054,2.3,3.12,2.3,6.288,0,4.543-.039,8.2-.039,9.318,0,.9.611,1.962,2.332,1.629a33.959,33.959,0,0,0,23.2-32.215,33.955,33.955,0,0,0-33.955-33.955" transform="translate(0)" fill="#1b1817" fill-rule="evenodd" />
+        <path id="path20" d="M416.209-543.256c-.075.169-.34.219-.582.1s-.385-.341-.3-.51.339-.222.585-.106.387.344.3.513h0" transform="translate(-16.388 -66.064)" fill="#1b1817" />
+        <path id="path22" d="M419.493-540.12c-.162.15-.478.08-.693-.157a.519.519,0,0,1-.1-.706c.167-.149.474-.079.7.157s.265.554.1.706h0" transform="translate(-18.297 -67.666)" fill="#1b1817" />
+        <path id="path24" d="M422.639-535.785c-.208.145-.548.009-.759-.293s-.208-.664,0-.809.546-.014.759.285.208.669-.005.817h0" transform="translate(-20.104 -70.045)" fill="#1b1817" />
+        <path id="path26" d="M426.644-531.249c-.186.205-.583.15-.873-.13a.653.653,0,0,1-.193-.868c.188-.206.587-.148.879.13s.385.665.186.868h0" transform="translate(-22.275 -72.692)" fill="#1b1817" />
+        <path id="path28" d="M432.294-528.128c-.082.266-.464.387-.848.274s-.635-.428-.558-.7.463-.394.851-.273.635.425.556.7h0" transform="translate(-25.394 -74.716)" fill="#1b1817" />
+        <path id="path30" d="M438.83-527.308c.01.28-.317.512-.72.517s-.734-.218-.739-.493.319-.513.725-.52.734.217.734.5h0" transform="translate(-29.152 -75.333)" fill="#1b1817" />
+        <path id="path32" d="M444.978-528.2c.048.273-.232.554-.633.629s-.759-.1-.809-.368.237-.561.63-.633.761.094.812.372h0" transform="translate(-32.713 -74.876)" fill="#1b1817" />
+    </g>
+</svg>
diff --git a/packages/react/src/assets/social-logins/google.svg b/packages/react/src/assets/social-logins/google.svg
new file mode 100644
index 00000000..6375b41b
--- /dev/null
+++ b/packages/react/src/assets/social-logins/google.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+ * 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.
+-->
+
+<svg id="google-idp-illustration" class="icon" xmlns="http://www.w3.org/2000/svg" width="67.91" height="67.901" viewBox="0 0 67.91 67.901">
+    <g id="google-idp-illustration" transform="translate(-0.001 -0.001)">
+        <path id="Path_10" data-name="Path 10" d="M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z" transform="translate(0 -119.93)" fill="#fbbb00" />
+        <path id="Path_11" data-name="Path 11" d="M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z" transform="translate(-226.93 -180.567)" fill="#518ef8" />
+        <path id="Path_12" data-name="Path 12" d="M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z" transform="translate(-26.463 -268.374)" fill="#28b446" />
+        <path id="Path_13" data-name="Path 13" d="M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z" transform="translate(-24.828)" fill="#f14336" />
+    </g>
+</svg>
diff --git a/packages/react/src/assets/social-logins/microsoft.svg b/packages/react/src/assets/social-logins/microsoft.svg
new file mode 100644
index 00000000..431b21e9
--- /dev/null
+++ b/packages/react/src/assets/social-logins/microsoft.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+ * 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.
+-->
+
+<svg version="1.1" id="microsoft-logo" class="icon" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
+    <path fill="#f3f3f3" d="M0 0h23v23H0z" />
+    <path fill="#f35325" d="M1 1h10v10H1z" />
+    <path fill="#81bc06" d="M12 1h10v10H12z" />
+    <path fill="#05a6f0" d="M1 12h10v10H1z" />
+    <path fill="#ffba08" d="M12 12h10v10H12z" />
+</svg>
diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx
new file mode 100644
index 00000000..215699ca
--- /dev/null
+++ b/packages/react/src/components/SignIn/SignIn.tsx
@@ -0,0 +1,347 @@
+/**
+ * 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 {
+  AsgardeoUIException,
+  AuthApiResponse,
+  AuthClient,
+  Authenticator,
+  Branding,
+  FlowStatus,
+  Metadata,
+  PromptType,
+  ScreenType,
+  UIAuthClient,
+  authenticate,
+  authorize,
+  getBranding,
+  keys,
+} from '@asgardeo/js-ui-core';
+import {CircularProgress, ThemeProvider} from '@oxygen-ui/react';
+import {FC, ReactElement, useContext, useEffect, useState} from 'react';
+import BasicAuth from './fragments/BasicAuth';
+import EmailOtp from './fragments/EmailOtp';
+import LoginOptionsBox from './fragments/LoginOptionsBox';
+import SmsOtp from './fragments/SmsOtp';
+import Totp from './fragments/Totp';
+import AsgardeoContext from '../../contexts/asgardeo-context';
+import BrandingPreferenceContext from '../../contexts/branding-preference-context';
+import useAuthentication from '../../hooks/use-authentication';
+import {useConfig} from '../../hooks/use-config';
+import useTranslations from '../../hooks/use-translations';
+import AuthContext from '../../models/auth-context';
+import {AlertType, SignInProps} from '../../models/sign-in';
+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';
+
+/**
+ * This component provides the sign-in functionality.
+ *
+ * @param {SignInProps} props - Props injected to the component.
+ * @param {BrandingProps} props.brandingProps - Branding related props.
+ *
+ * @returns {ReactElement} - React element.
+ */
+const SignIn: FC<SignInProps> = (props: SignInProps) => {
+  const {brandingProps} = props;
+  const [authResponse, setAuthResponse] = useState<AuthApiResponse>();
+  const [isComponentLoading, setIsComponentLoading] = useState(true);
+  const [alert, setAlert] = useState<AlertType>();
+  const [showSelfSignUp, setShowSelfSignUp] = useState(true);
+  const [componentBranding, setComponentBranding] = useState<Branding>();
+
+  const {isAuthenticated} = useAuthentication();
+
+  const authContext: AuthContext | undefined = useContext(AsgardeoContext);
+
+  const {config} = useConfig();
+
+  const brandingPreference: Branding = useContext(BrandingPreferenceContext);
+
+  const {isLoading, t} = useTranslations({
+    componentLocaleOverride: brandingProps?.locale,
+    componentTextOverrides: brandingProps?.preference?.text,
+    screen: ScreenType.Common,
+  });
+
+  useEffect(() => {
+    getBranding({branding: brandingProps, merged: brandingPreference}).then((response: Branding) => {
+      setComponentBranding(response);
+    });
+
+    /**
+     * Calling authorize function and initiating the flow
+     */
+    authorize()
+      .then((response: AuthApiResponse) => {
+        setAuthResponse(response);
+        setIsComponentLoading(false);
+      })
+      .catch((error: Error) => {
+        setAlert({alertType: {error: true}, key: keys.common.error});
+        setIsComponentLoading(false);
+        throw new AsgardeoUIException('REACT_UI-SIGN_IN-SI-SE01', 'Authorization failed', error.stack);
+      });
+  }, [brandingPreference, brandingProps]);
+
+  /**
+   * Handles the generalized authentication process.
+   * @param {string} authenticatorId - Authenticator ID.
+   * @param {object} [authParams] - Authentication parameters.
+   */
+  const handleAuthenticate = async (authenticatorId: string, authParams?: {[key: string]: string}): Promise<void> => {
+    setAlert(undefined);
+
+    if (authResponse === undefined) {
+      throw new AsgardeoUIException('REACT_UI-SIGN_IN-HA-IV02', 'Auth response is undefined.');
+    }
+
+    setIsComponentLoading(true);
+
+    const resp: AuthApiResponse = await authenticate({
+      flowId: authResponse.flowId,
+      selectedAuthenticator: {
+        authenticatorId,
+        params: authParams,
+      },
+    });
+
+    if (!authParams) {
+      const metaData: Metadata = resp.nextStep.authenticators[0].metadata;
+      if (metaData.promptType === PromptType.RedirectionPromt) {
+        /**
+         * Open a popup window to handle redirection prompts
+         */
+        window.open(
+          metaData.additionalData?.redirectUrl,
+          resp.nextStep.authenticators[0].authenticator,
+          'width=500,height=600',
+        );
+
+        /**
+         * Add an event listener to the window to capture the message from the popup
+         */
+        window.addEventListener('message', function messageEventHandler(event: MessageEvent) {
+          /**
+           * Check the origin of the message to ensure it's from the popup window
+           */
+          if (event.origin !== config.signInRedirectURL) return;
+
+          const {code, state} = event.data;
+
+          if (code && state) {
+            handleAuthenticate(resp.nextStep.authenticators[0].authenticatorId, {code, state});
+          }
+
+          /**
+           * Remove the event listener
+           */
+          window.removeEventListener('message', messageEventHandler);
+        });
+      } else if (metaData.promptType === PromptType.UserPrompt) {
+        setAuthResponse(resp);
+      }
+    } else if (resp.flowStatus === FlowStatus.SuccessCompleted && resp.authData) {
+      /**
+       * when the authentication is successful, generate the token
+       */
+      setAuthResponse(resp);
+
+      const authInstance: UIAuthClient = AuthClient.getInstance();
+      const state: string = (await authInstance.getDataLayer().getTemporaryDataParameter('state')).toString();
+
+      await authInstance.requestAccessToken(resp.authData.code, resp.authData.session_state, state);
+
+      authContext.setAuthentication();
+    } else if (resp.flowStatus === FlowStatus.FailIncomplete) {
+      setAuthResponse({
+        ...resp,
+        nextStep: authResponse.nextStep,
+      });
+
+      setAlert({alertType: {error: true}, key: keys.login.retry});
+    } else {
+      setAuthResponse(resp);
+      setShowSelfSignUp(false);
+    }
+
+    setIsComponentLoading(false);
+  };
+
+  const renderLoginOptions = (authenticators: Authenticator[]): ReactElement[] => {
+    const LoginOptions: ReactElement[] = [];
+
+    authenticators.forEach((authenticator: Authenticator) => {
+      LoginOptions.push(
+        <LoginOptionsBox
+          socialName={authenticator.authenticator}
+          displayName={authenticator.idp}
+          handleOnClick={(): Promise<void> => handleAuthenticate(authenticator.authenticatorId)}
+          key={authenticator.authenticatorId}
+        />,
+      );
+    });
+
+    return LoginOptions;
+  };
+
+  const renderSignIn = (): ReactElement => {
+    const {authenticators} = authResponse.nextStep;
+
+    if (authenticators) {
+      const usernamePasswordAuthenticator: Authenticator = authenticators.find(
+        (authenticator: Authenticator) => authenticator.authenticator === 'Username & Password',
+      );
+
+      if (usernamePasswordAuthenticator) {
+        return (
+          <BasicAuth
+            brandingProps={brandingProps}
+            authenticator={usernamePasswordAuthenticator}
+            handleAuthenticate={handleAuthenticate}
+            showSelfSignUp={showSelfSignUp}
+            alert={alert}
+            renderLoginOptions={renderLoginOptions(
+              authenticators.filter(
+                (auth: Authenticator) => auth.authenticatorId !== usernamePasswordAuthenticator.authenticatorId,
+              ),
+            )}
+          />
+        );
+      }
+
+      if (authenticators.length === 1) {
+        if (authenticators[0].authenticator === 'TOTP') {
+          return (
+            <Totp
+              brandingProps={brandingProps}
+              authenticator={authenticators[0]}
+              alert={alert}
+              handleAuthenticate={handleAuthenticate}
+            />
+          );
+        }
+        if (
+          // TODO: change after api based auth gets fixed
+          new SPACryptoUtils()
+            .base64URLDecode(authResponse.nextStep.authenticators[0].authenticatorId)
+            .split(':')[0] === 'email-otp-authenticator'
+        ) {
+          return (
+            <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)
+            .split(':')[0] === 'sms-otp-authenticator'
+        ) {
+          return (
+            <SmsOtp
+              alert={alert}
+              brandingProps={brandingProps}
+              authenticator={authenticators[0]}
+              handleAuthenticate={handleAuthenticate}
+            />
+          );
+        }
+      }
+
+      /**
+       * If there are multiple authenticators without Username and password, render the multiple options screen
+       */
+      if (authenticators.length > 1) {
+        return (
+          <UISignIn.Paper className="multiple-options-paper">
+            <UISignIn.Typography title className="multiple-otions-title">
+              Sign In
+            </UISignIn.Typography>
+            {renderLoginOptions(authenticators)}
+          </UISignIn.Paper>
+        );
+      }
+    }
+    return null;
+  };
+
+  /**
+   * Renders the circular progress component while the component or text is loading.
+   */
+  if (isComponentLoading || isLoading) {
+    return (
+      <div className="circular-progress-holder">
+        <CircularProgress className="circular-progress" />
+      </div>
+    );
+  }
+
+  const imgUrl: string = brandingPreference?.preference?.theme?.LIGHT?.images?.logo?.imgURL;
+  let copyrightText: string = t(keys.common.copyright);
+
+  if (copyrightText.includes('{{currentYear}}')) {
+    copyrightText = copyrightText.replace('{{currentYear}}', new Date().getFullYear().toString());
+  }
+
+  return (
+    <ThemeProvider theme={generateThemeSignIn(componentBranding?.preference.theme)}>
+      <UISignIn className="asgardeo-sign-in">
+        <UISignIn.Image src={imgUrl} />
+        {authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isAuthenticated && (
+          <>
+            {renderSignIn()}
+
+            <UISignIn.Footer
+              copyrights={{children: copyrightText}}
+              items={[
+                {
+                  children: (
+                    <UISignIn.Link href={componentBranding.preference.urls.termsOfUseURL}>
+                      {t(keys.common.terms.of.service)}
+                    </UISignIn.Link>
+                  ),
+                },
+                {
+                  children: (
+                    <UISignIn.Link href={componentBranding.preference.urls.privacyPolicyURL}>
+                      {t(keys.common.privacy.policy)}
+                    </UISignIn.Link>
+                  ),
+                },
+                {children: <UISignIn.Typography>{componentBranding?.locale ?? 'en-US'}</UISignIn.Typography>},
+              ]}
+            />
+          </>
+        )}
+        {(authResponse?.flowStatus === FlowStatus.SuccessCompleted || isAuthenticated) && (
+          <div style={{backgroundColor: 'white', padding: '1rem'}}>Successfully Authenticated</div>
+        )}
+      </UISignIn>
+    </ThemeProvider>
+  );
+};
+
+export default SignIn;
diff --git a/packages/react/src/components/SignIn/fragments/BasicAuth.tsx b/packages/react/src/components/SignIn/fragments/BasicAuth.tsx
new file mode 100644
index 00000000..a70ea66a
--- /dev/null
+++ b/packages/react/src/components/SignIn/fragments/BasicAuth.tsx
@@ -0,0 +1,121 @@
+/**
+ * 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-ui-core';
+import {CircularProgress, Grid} from '@oxygen-ui/react';
+import {useState} from 'react';
+import useTranslations from '../../../hooks/use-translations';
+import BasicAuthProps from '../../../models/basic-auth-props';
+import {SignIn as UISignIn} from '../../../oxygen-ui-react-auth-components';
+
+/**
+ * This component renders the basic authentication form.
+ *
+ * @param {BasicAuthProps} props - Props injected to the basic 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 {JSX.Element}
+ */
+const BasicAuth = ({
+  handleAuthenticate,
+  authenticator,
+  alert,
+  brandingProps,
+  showSelfSignUp,
+  renderLoginOptions,
+}: BasicAuthProps): JSX.Element => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const {t, isLoading} = useTranslations({
+    componentLocaleOverride: brandingProps?.locale,
+    componentTextOverrides: brandingProps?.preference?.text,
+    screen: ScreenType.Login,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="circular-progress-holder">
+        <CircularProgress className="circular-progress" />
+      </div>
+    );
+  }
+
+  return (
+    <UISignIn.Paper>
+      <UISignIn.Typography title>{t(keys.login.login.heading)}</UISignIn.Typography>
+
+      {alert && <UISignIn.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.TextField
+        fullWidth
+        name="password"
+        autoComplete="new-password"
+        label={t(keys.login.password)}
+        type="password"
+        value={password}
+        placeholder={t(keys.login.enter.your.password)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setPassword(e.target.value)}
+      />
+
+      <UISignIn.Button
+        color="primary"
+        variant="contained"
+        type="submit"
+        fullWidth
+        onClick={(): void => {
+          handleAuthenticate(authenticator.authenticatorId, {password, username});
+          setUsername('');
+          setPassword('');
+        }}
+      >
+        {t(keys.login.button)}
+      </UISignIn.Button>
+
+      {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 BasicAuth;
diff --git a/packages/react/src/components/SignIn/fragments/EmailOtp.tsx b/packages/react/src/components/SignIn/fragments/EmailOtp.tsx
new file mode 100644
index 00000000..ab6718cb
--- /dev/null
+++ b/packages/react/src/components/SignIn/fragments/EmailOtp.tsx
@@ -0,0 +1,93 @@
+/**
+ * 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-ui-core';
+import {CircularProgress} from '@oxygen-ui/react';
+import {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';
+
+/**
+ * Email OTP component.
+ *
+ * @param {EmailOtpProps} props - Props injected to the component.
+ * @param {BrandingProps} props.brandingProps - Branding props.
+ * @param {Authenticator} props.authenticator - Authenticator.
+ * @param {Function} props.handleAuthenticate - Callback to handle authentication.
+ * @param {AlertType} props.alert - Alert type.
+ * @return {ReactElement}
+ */
+const EmailOtp = ({alert, brandingProps, authenticator, handleAuthenticate}: EmailOtpProps): ReactElement => {
+  const [otp, setOtp] = useState<string>();
+
+  const {isLoading, t} = useTranslations({
+    componentLocaleOverride: brandingProps?.locale,
+    componentTextOverrides: brandingProps?.preference?.text,
+    screen: ScreenType.EmailOTP,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="circular-progress-holder">
+        <CircularProgress className="circular-progress" />
+      </div>
+    );
+  }
+
+  return (
+    <UISignIn.Paper>
+      <UISignIn.Typography title>{t(keys.emailOtp.email.otp.heading)}</UISignIn.Typography>
+
+      {alert && <UISignIn.Alert {...alert?.alertType}>{alert.key}</UISignIn.Alert>}
+
+      <UISignIn.TextField
+        fullWidth
+        autoComplete="off"
+        label={t(keys.emailOtp.enter.verification.code.got.by.device)}
+        name="text"
+        value={otp}
+        type="password"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>): void => setOtp(e.target.value)}
+      />
+
+      <UISignIn.Button
+        fullWidth
+        variant="contained"
+        type="submit"
+        onClick={(): void => {
+          handleAuthenticate();
+          setOtp('');
+        }}
+      >
+        {t(keys.emailOtp.continue)}
+      </UISignIn.Button>
+
+      <UISignIn.Button
+        className="email-otp-resend-button"
+        onClick={(): void => handleAuthenticate(authenticator.authenticatorId)}
+        color="secondary"
+        variant="contained"
+      >
+        {t(keys.emailOtp.resend.code)}
+      </UISignIn.Button>
+    </UISignIn.Paper>
+  );
+};
+
+export default EmailOtp;
diff --git a/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx b/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx
new file mode 100644
index 00000000..dec0358c
--- /dev/null
+++ b/packages/react/src/components/SignIn/fragments/LoginOptionsBox.tsx
@@ -0,0 +1,54 @@
+/**
+ * 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 emailSolid from '../../../assets/email-solid.svg';
+import facebook from '../../../assets/social-logins/facebook.svg';
+import github from '../../../assets/social-logins/github.svg';
+import google from '../../../assets/social-logins/google.svg';
+import microsoft from '../../../assets/social-logins/microsoft.svg';
+import LoginOptionsBoxProps from '../../../models/login-options-box-props';
+import {SignIn as UISignIn} from '../../../oxygen-ui-react-auth-components';
+
+const images: {[key: string]: string} = {
+  'Email OTP': emailSolid,
+  Facebook: facebook,
+  Github: github,
+  Google: google,
+  Microsoft: microsoft,
+};
+
+/**
+ * This component renders the login options box.
+ *
+ * @param {LoginOptionsBoxProps} props - Props injected to the component.
+ * @param {string} props.socialName - Name of the social login.
+ * @param {string} props.displayName - Display name of the social login.
+ * @param {Function} props.handleOnClick - On click handler.
+ * @return {JSX.Element}
+ */
+const LoginOptionsBox = ({socialName, displayName, handleOnClick}: LoginOptionsBoxProps): JSX.Element => (
+  <UISignIn.Button
+    social
+    startIcon={<img className="social-login-img" src={images[socialName]} alt={socialName} />}
+    onClick={handleOnClick}
+  >
+    Sign In with {displayName}
+  </UISignIn.Button>
+);
+
+export default LoginOptionsBox;
diff --git a/packages/react/src/components/SignIn/fragments/SmsOtp.tsx b/packages/react/src/components/SignIn/fragments/SmsOtp.tsx
new file mode 100644
index 00000000..518d8a8f
--- /dev/null
+++ b/packages/react/src/components/SignIn/fragments/SmsOtp.tsx
@@ -0,0 +1,77 @@
+/**
+ * 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-ui-core';
+import {CircularProgress} from '@oxygen-ui/react';
+import {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 [otp, setOtp] = useState<string>();
+
+  const {isLoading, t} = useTranslations({
+    componentLocaleOverride: brandingProps?.locale,
+    componentTextOverrides: brandingProps?.preference?.text,
+    screen: ScreenType.SMSOTP,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="circular-progress-holder">
+        <CircularProgress className="circular-progress" />
+      </div>
+    );
+  }
+
+  return (
+    <UISignIn.Paper>
+      <UISignIn.Typography title>{t(keys.smsOtp.sms.otp.heading)}</UISignIn.Typography>
+
+      <UISignIn.Typography subtitle>{t(keys.smsOtp.sms.otp.subheading)}</UISignIn.Typography>
+
+      {alert && <UISignIn.Alert {...alert?.alertType}>{alert.key}</UISignIn.Alert>}
+
+      <UISignIn.PinInput length={6} onPinChange={setOtp} />
+
+      <UISignIn.Button
+        fullWidth
+        variant="contained"
+        type="submit"
+        onClick={(): void => {
+          handleAuthenticate(authenticator.authenticatorId, {OTPCode: otp});
+          setOtp('');
+        }}
+      >
+        {t(keys.smsOtp.continue)}
+      </UISignIn.Button>
+
+      <UISignIn.Button
+        className="email-otp-resend-button"
+        onClick={(): void => handleAuthenticate(authenticator.authenticatorId)}
+        color="secondary"
+        variant="contained"
+      >
+        {t(keys.smsOtp.resend.code)}
+      </UISignIn.Button>
+    </UISignIn.Paper>
+  );
+};
+
+export default SmsOtp;
diff --git a/packages/react/src/components/SignIn/fragments/Totp.tsx b/packages/react/src/components/SignIn/fragments/Totp.tsx
new file mode 100644
index 00000000..5183e37c
--- /dev/null
+++ b/packages/react/src/components/SignIn/fragments/Totp.tsx
@@ -0,0 +1,86 @@
+/**
+ * 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-ui-core';
+import {CircularProgress} from '@oxygen-ui/react';
+import {useState, ReactElement} from 'react';
+import useTranslations from '../../../hooks/use-translations';
+import TotpProps from '../../../models/totp-props';
+import {SignIn as UISignIn} from '../../../oxygen-ui-react-auth-components';
+
+/**
+ * This component renders the TOTP authentication screen.
+ *
+ * @param {TotpProps} props - Props injected to the component.
+ * @param {AlertType} props.alert - Alert type.
+ * @param {string} props.authenticator - Authenticator.
+ * @param {BrandingProps} props.brandingProps - Branding props.
+ * @param {Function} props.handleAuthenticate - Callback to handle authentication.
+ *
+ * @return {ReactElement}
+ */
+const Totp = ({brandingProps, authenticator, handleAuthenticate, alert}: TotpProps): ReactElement => {
+  const [totp, setTotp] = useState<string>();
+
+  const {isLoading, t} = useTranslations({
+    componentLocaleOverride: brandingProps?.locale,
+    componentTextOverrides: brandingProps?.preference?.text,
+    screen: ScreenType.TOTP,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="circular-progress-holder">
+        <CircularProgress className="circular-progress" />
+      </div>
+    );
+  }
+
+  return (
+    <UISignIn.Paper>
+      <UISignIn.Typography title>{t(keys.totp.heading)}</UISignIn.Typography>
+
+      <UISignIn.Typography subtitle>{t(keys.totp.enter.verification.code.got.by.device)}</UISignIn.Typography>
+
+      {alert && <UISignIn.Alert {...alert?.alertType}>{alert.key}</UISignIn.Alert>}
+
+      <UISignIn.PinInput length={6} onPinChange={setTotp} />
+
+      <UISignIn.Button
+        color="primary"
+        variant="contained"
+        className="oxygen-sign-in-cta"
+        type="submit"
+        fullWidth
+        onClick={(): void => handleAuthenticate(authenticator.authenticatorId, {token: totp})}
+      >
+        totp.continue
+      </UISignIn.Button>
+
+      <UISignIn.Typography subtitle>
+        {t(keys.totp.enroll.message1)}
+        <br />
+        {t(keys.totp.enroll.message2)}
+      </UISignIn.Typography>
+
+      <UISignIn.Link href="./somewhere">{t(keys.totp.enroll.message2)}</UISignIn.Link>
+    </UISignIn.Paper>
+  );
+};
+
+export default Totp;
diff --git a/packages/react/src/components/SignIn/sign-in.scss b/packages/react/src/components/SignIn/sign-in.scss
new file mode 100644
index 00000000..c24aa658
--- /dev/null
+++ b/packages/react/src/components/SignIn/sign-in.scss
@@ -0,0 +1,45 @@
+/**
+ * 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.
+ */
+
+.asgardeo-sign-in {
+  min-width: 350px;
+  min-height: 200px;
+
+  .email-otp-resend-button {
+    margin-top: 0;
+  }
+
+  .multiple-otions-title {
+    margin: 16px 0 34px;
+  }
+
+  .multiple-options-paper {
+    padding-bottom: 64px;
+  }
+}
+
+.circular-progress-holder {
+  min-height: 0.7*100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .circular-progress {
+    color: rgb(214 211 211);
+  }
+}
diff --git a/packages/react/src/components/SignInButton/SignInButton.tsx b/packages/react/src/components/SignInButton/SignInButton.tsx
new file mode 100644
index 00000000..9bb78943
--- /dev/null
+++ b/packages/react/src/components/SignInButton/SignInButton.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * 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 {Box, Button} from '@oxygen-ui/react';
+import React, {ReactElement, useState} from 'react';
+import './sign-in-button.scss';
+import SignIn from '../SignIn/SignIn';
+
+/**
+ * SignInButton component. This button will render a modal with the SignIn component when clicked.
+ *
+ * @param {Object} props - Component props.
+ * @param {ReactElement} props.customComponent - Optional custom component to be rendered.
+ * @returns {ReactElement} Rendered SignInButton component.
+ */
+const SignInButton = ({customComponent}: {customComponent?: ReactElement}): ReactElement => {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const openModal = (): void => {
+    setModalVisible(true);
+  };
+
+  const closeModal = (): void => {
+    setModalVisible(false);
+  };
+
+  return (
+    <div className="asgardeo" style={{padding: '2rem'}}>
+      {customComponent ? (
+        React.cloneElement(customComponent, {
+          onClick: openModal,
+        })
+      ) : (
+        <Button className="asgardeo-sign-in-button" variant="contained" onClick={openModal}>
+          Sign In
+        </Button>
+      )}
+
+      {modalVisible && (
+        <Box className="popup-box">
+          <SignIn />
+        </Box>
+      )}
+
+      {modalVisible && <Box className="popup-box-overlay" onClick={closeModal} />}
+    </div>
+  );
+};
+
+export default SignInButton;
diff --git a/packages/react/src/components/SignInButton/sign-in-button.scss b/packages/react/src/components/SignInButton/sign-in-button.scss
new file mode 100644
index 00000000..7a59663c
--- /dev/null
+++ b/packages/react/src/components/SignInButton/sign-in-button.scss
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * 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.
+ */
+
+.asgardeo {
+  .asgardeo-sign-in-button {
+    color: var(--oxygen-palette-text-primary);
+  }
+
+  .OxygenSignInImage {
+    height: 45px;
+  }
+
+  .popup-box {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    min-height: 65%;
+    min-width: 35%;
+    max-height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: auto;
+    padding-top: 40px;
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    ::-webkit-scrollbar {
+      display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+
+  .popup-box-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 76.8%);
+    z-index: 100;
+  }
+}
diff --git a/packages/react/src/components/SignOutButton/SignOutButton.tsx b/packages/react/src/components/SignOutButton/SignOutButton.tsx
new file mode 100644
index 00000000..bd529209
--- /dev/null
+++ b/packages/react/src/components/SignOutButton/SignOutButton.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * 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 {Button} from '@oxygen-ui/react';
+import {ReactElement} from 'react';
+import useAuthentication from '../../hooks/use-authentication';
+
+/**
+ * SignOutButton component.
+ *
+ * This component renders a sign out button. When clicked, it triggers the sign out process.
+ *
+ * @returns {ReactElement} Rendered SignOutButton component.
+ */
+const SignOutButton = (): ReactElement => {
+  const {signOut} = useAuthentication();
+
+  return (
+    <div className="asgardeo">
+      <Button className="asgardeo-sign-out-button" variant="contained" onClick={(): void => signOut()}>
+        Sign Out
+      </Button>
+    </div>
+  );
+};
+
+export default SignOutButton;
diff --git a/packages/react/src/components/SignedIn/SignedIn.tsx b/packages/react/src/components/SignedIn/SignedIn.tsx
new file mode 100644
index 00000000..44ec80d5
--- /dev/null
+++ b/packages/react/src/components/SignedIn/SignedIn.tsx
@@ -0,0 +1,38 @@
+/**
+ * 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 {FC, PropsWithChildren} from 'react';
+import useAuthentication from '../../hooks/use-authentication';
+import SignedProps from '../../models/signed-props';
+
+/**
+ * This component renders its children if the user is signed out.
+ *
+ * @param {PropsWithChildren<SignedProps>} props - Props injected to the component.
+ * @param {ReactElement} props.fallback - Fallback element to render.
+ *
+ * @return {JSX.Element}
+ */
+const SignedIn: FC<PropsWithChildren<SignedProps>> = (props: PropsWithChildren<SignedProps>) => {
+  const {fallback, children} = props;
+  const {isAuthenticated} = useAuthentication();
+
+  return isAuthenticated ? children : fallback ?? null;
+};
+
+export default SignedIn;
diff --git a/packages/react/src/components/SignedOut/SignedOut.tsx b/packages/react/src/components/SignedOut/SignedOut.tsx
new file mode 100644
index 00000000..77664846
--- /dev/null
+++ b/packages/react/src/components/SignedOut/SignedOut.tsx
@@ -0,0 +1,38 @@
+/**
+ * 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 {FC, PropsWithChildren} from 'react';
+import useAuthentication from '../../hooks/use-authentication';
+import SignedProps from '../../models/signed-props';
+
+/**
+ * This component renders its children if the user is signed out.
+ *
+ * @param {PropsWithChildren<SignedProps>} props - Props injected to the component.
+ * @param {ReactElement} props.fallback - Fallback element to render.
+ *
+ * @return {JSX.Element}
+ */
+const SignedOut: FC<PropsWithChildren<SignedProps>> = (props: PropsWithChildren<SignedProps>) => {
+  const {fallback, children} = props;
+  const {isAuthenticated} = useAuthentication();
+
+  return !isAuthenticated ? children : fallback ?? null;
+};
+
+export default SignedOut;
diff --git a/packages/react/src/components/public-components.ts b/packages/react/src/components/public-components.ts
new file mode 100644
index 00000000..5e518d19
--- /dev/null
+++ b/packages/react/src/components/public-components.ts
@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+export {default as SignIn} from './SignIn/SignIn';
+export {default as SignedIn} from './SignedIn/SignedIn';
+export {default as SignedOut} from './SignedOut/SignedOut';
+export {default as SignInButton} from './SignInButton/SignInButton';
+export {default as SignOutButton} from './SignOutButton/SignOutButton';
diff --git a/packages/react/src/contexts/branding-preference-context.ts b/packages/react/src/contexts/branding-preference-context.ts
index 602111e5..1477b451 100644
--- a/packages/react/src/contexts/branding-preference-context.ts
+++ b/packages/react/src/contexts/branding-preference-context.ts
@@ -16,9 +16,9 @@
  * under the License.
  */
 
-import {BrandingProps} from '@asgardeo/js-ui-core';
+import {Branding} from '@asgardeo/js-ui-core';
 import {Context, createContext} from 'react';
 
-const BrandingPreferenceContext: Context<BrandingProps> = createContext<BrandingProps>(undefined);
+const BrandingPreferenceContext: Context<Branding> = createContext<Branding>(undefined);
 
 export default BrandingPreferenceContext;
diff --git a/packages/react/src/hooks/use-authentication.ts b/packages/react/src/hooks/use-authentication.ts
index 701093bc..f31d9352 100644
--- a/packages/react/src/hooks/use-authentication.ts
+++ b/packages/react/src/hooks/use-authentication.ts
@@ -35,9 +35,10 @@ const useAuthentication = (): UseAuthentication => {
   const {user, isAuthenticated, accessToken} = contextValue;
 
   const signOut: () => void = () => {
-    signOutApiCall();
-    sessionStorage.clear();
-    window.location.reload();
+    signOutApiCall().then(() => {
+      sessionStorage.clear();
+      window.location.reload();
+    });
   };
 
   return {accessToken, isAuthenticated, signOut, user};
diff --git a/packages/react/src/hooks/use-translations.ts b/packages/react/src/hooks/use-translations.ts
index f8750ca2..65e962a2 100644
--- a/packages/react/src/hooks/use-translations.ts
+++ b/packages/react/src/hooks/use-translations.ts
@@ -57,10 +57,10 @@ const useTranslations = (props: SetTranslationsProps): UseTranslations => {
    * @returns {string} The requested translation.
    */
   const t = (key: string): string => {
-    const parts: string[] = key.split('.');
+    const keySegments: string[] = key.split('.');
 
-    const screenKey: string = parts[0];
-    const rightPart: string = parts.slice(1).join('.');
+    const screenKey: string = keySegments[0];
+    const rightPart: string = keySegments.slice(1).join('.');
 
     return text[screenKey][rightPart];
   };
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
new file mode 100644
index 00000000..ee3020e7
--- /dev/null
+++ b/packages/react/src/index.ts
@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+export * from './components/public-components';
+export * from './models/public-models';
+export {default as AsgardeoProvider} from './providers/AsgardeoProvider';
+export {default as useAuthentication} from './hooks/use-authentication';
diff --git a/packages/react/src/models/asgardeo-provider-props.ts b/packages/react/src/models/asgardeo-provider-props.ts
index b080687b..8deb0965 100644
--- a/packages/react/src/models/asgardeo-provider-props.ts
+++ b/packages/react/src/models/asgardeo-provider-props.ts
@@ -18,10 +18,10 @@
 
 import {BrandingProps, Store, UIAuthConfig} from '@asgardeo/js-ui-core';
 
-interface AsgardeProviderProps {
+interface AsgardeoProviderProps {
   branding?: BrandingProps;
   config: UIAuthConfig;
   store?: Store;
 }
 
-export default AsgardeProviderProps;
+export default AsgardeoProviderProps;
diff --git a/packages/react/src/models/auth-context.ts b/packages/react/src/models/auth-context.ts
index 1960de6d..5a07ebeb 100644
--- a/packages/react/src/models/auth-context.ts
+++ b/packages/react/src/models/auth-context.ts
@@ -21,7 +21,6 @@ import {UIAuthConfig, MeAPIResponse} from '@asgardeo/js-ui-core';
 interface AuthContext {
   accessToken: string;
   config: UIAuthConfig;
-  customizationOptions?: any;
   isAuthenticated: boolean | undefined;
   setAuthentication: () => void;
   user: MeAPIResponse;
diff --git a/packages/react/src/models/basic-auth-props.ts b/packages/react/src/models/basic-auth-props.ts
new file mode 100644
index 00000000..e7f4feeb
--- /dev/null
+++ b/packages/react/src/models/basic-auth-props.ts
@@ -0,0 +1,32 @@
+/**
+ * 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 {Authenticator, BrandingProps} from '@asgardeo/js-ui-core';
+import {ReactElement} from 'react';
+import {AlertType} from './sign-in';
+
+interface BasicAuthProps {
+  alert?: AlertType;
+  authenticator: Authenticator;
+  brandingProps?: BrandingProps;
+  handleAuthenticate: Function;
+  renderLoginOptions?: ReactElement[];
+  showSelfSignUp: boolean;
+}
+
+export default BasicAuthProps;
diff --git a/packages/react/src/models/email-otp-props.ts b/packages/react/src/models/email-otp-props.ts
new file mode 100644
index 00000000..5936197b
--- /dev/null
+++ b/packages/react/src/models/email-otp-props.ts
@@ -0,0 +1,29 @@
+/**
+ * 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 {Authenticator, BrandingProps} from '@asgardeo/js-ui-core';
+import {AlertType} from './sign-in';
+
+interface EmailOtpProps {
+  alert?: AlertType;
+  authenticator?: Authenticator;
+  brandingProps?: BrandingProps;
+  handleAuthenticate: Function;
+}
+
+export default EmailOtpProps;
diff --git a/packages/react/src/models/i18n.ts b/packages/react/src/models/i18n.ts
index 343a78ff..36513c3d 100644
--- a/packages/react/src/models/i18n.ts
+++ b/packages/react/src/models/i18n.ts
@@ -27,7 +27,7 @@ export type I18nLocalization =
 export interface SetTranslationsProps {
   componentLocaleOverride?: string;
   componentTextOverrides?: BrandingPreferenceTextProps;
-  screen: ScreenType;
+  screen?: ScreenType;
 }
 export interface I18n {
   setTranslations: (props: SetTranslationsProps) => Promise<boolean>;
diff --git a/packages/react/src/models/login-options-box-props.ts b/packages/react/src/models/login-options-box-props.ts
new file mode 100644
index 00000000..62778bd2
--- /dev/null
+++ b/packages/react/src/models/login-options-box-props.ts
@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+
+interface LoginOptionsBoxProps {
+  displayName: string;
+  handleOnClick: () => void;
+  socialName: string;
+}
+
+export default LoginOptionsBoxProps;
diff --git a/packages/react/src/models/public-models.ts b/packages/react/src/models/public-models.ts
new file mode 100644
index 00000000..f51eee77
--- /dev/null
+++ b/packages/react/src/models/public-models.ts
@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+export type {UIAuthConfig} from '@asgardeo/js-ui-core';
diff --git a/packages/react/src/models/sign-in.ts b/packages/react/src/models/sign-in.ts
new file mode 100644
index 00000000..99c61414
--- /dev/null
+++ b/packages/react/src/models/sign-in.ts
@@ -0,0 +1,31 @@
+/**
+ * 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 {BrandingProps} from '@asgardeo/js-ui-core';
+
+export interface SignInProps {
+  brandingProps?: BrandingProps;
+}
+
+export type AlertType = {
+  alertType:
+    | {error?: boolean; info?: never; warning?: never}
+    | {error?: never; info?: boolean; warning?: never}
+    | {error?: never; infor?: never; warning?: boolean};
+  key: string;
+};
diff --git a/packages/react/src/models/signed-props.ts b/packages/react/src/models/signed-props.ts
new file mode 100644
index 00000000..acc02059
--- /dev/null
+++ b/packages/react/src/models/signed-props.ts
@@ -0,0 +1,25 @@
+/**
+ * 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';
+
+interface SignedProps {
+  fallback?: ReactElement;
+}
+
+export default SignedProps;
diff --git a/packages/react/src/models/totp-props.ts b/packages/react/src/models/totp-props.ts
new file mode 100644
index 00000000..d5da0c42
--- /dev/null
+++ b/packages/react/src/models/totp-props.ts
@@ -0,0 +1,29 @@
+/**
+ * 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 {Authenticator, BrandingProps} from '@asgardeo/js-ui-core';
+import {AlertType} from './sign-in';
+
+interface TotpProps {
+  alert?: AlertType;
+  authenticator: Authenticator;
+  brandingProps?: BrandingProps;
+  handleAuthenticate: Function;
+}
+
+export default TotpProps;
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss b/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss
index 0db727a4..609fac01 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignIn/sign-in.scss
@@ -24,4 +24,5 @@
   align-items: center;
   text-align: left;
   padding: 20px;
+  max-width: fit-content;
 }
diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
index 6498e7ab..315220b9 100644
--- a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
+++ b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss
@@ -27,6 +27,10 @@
   padding: 8px 0;
   box-shadow: 0 1px 1px 2px rgb(0 0 0 / 12%), 0 1px 1px 0 rgb(0 0 0 / 24%);
 
+  img {
+    max-height: 22px;
+  }
+
   &:hover {
     background: rgb(213 212 212);
     box-shadow: 0 1px 1px 2px rgb(0 0 0 / 12%), 0 1px 1px 0 rgb(0 0 0 / 24%);
diff --git a/packages/react/src/providers/AsgardeoProvider.tsx b/packages/react/src/providers/AsgardeoProvider.tsx
index bab24026..887d463c 100644
--- a/packages/react/src/providers/AsgardeoProvider.tsx
+++ b/packages/react/src/providers/AsgardeoProvider.tsx
@@ -21,7 +21,7 @@ import {FC, PropsWithChildren, useCallback, useEffect, useMemo, useState} from '
 import BrandingPreferenceProvider from './BrandingPreferenceProvider';
 import I18nProvider from './I18nProvider';
 import AsgardeoContext from '../contexts/asgardeo-context';
-import AsgardeProviderProps from '../models/asgardeo-provider-props';
+import AsgardeoProviderProps from '../models/asgardeo-provider-props';
 import AuthContext from '../models/auth-context';
 import SPACryptoUtils from '../utils/crypto-utils';
 import SessionStore from '../utils/session-store';
@@ -31,7 +31,7 @@ import SessionStore from '../utils/session-store';
  * It takes an object of type `AsgardeProviderProps` as props, which includes the children to render,
  * a configuration object, a store instance, and a branding object.
  *
- * @param {PropsWithChildren<AsgardeProviderProps>} props - The properties passed to the component.
+ * @param {PropsWithChildren<AsgardeoProviderProps>} props - The properties passed to the component.
  * @param {ReactNode} props.children - The children to render inside the provider.
  * @param {Config} props.config - The configuration object for the Asgardeo context.
  * @param {Store} [props.store] - An optional store instance. If not provided, a new SessionStore will be created.
@@ -39,8 +39,8 @@ import SessionStore from '../utils/session-store';
  *
  * @returns {ReactElement} A React element that provides the Asgardeo context to all its children.
  */
-const AsgardeoProvider: FC<PropsWithChildren<AsgardeProviderProps>> = (
-  props: PropsWithChildren<AsgardeProviderProps>,
+const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
+  props: PropsWithChildren<AsgardeoProviderProps>,
 ) => {
   const {children, config, store, branding} = props;
 
diff --git a/packages/react/src/providers/BrandingPreferenceProvider.tsx b/packages/react/src/providers/BrandingPreferenceProvider.tsx
index 845928e1..cb46a81b 100644
--- a/packages/react/src/providers/BrandingPreferenceProvider.tsx
+++ b/packages/react/src/providers/BrandingPreferenceProvider.tsx
@@ -17,7 +17,7 @@
  */
 
 import {Branding, getBranding} from '@asgardeo/js-ui-core';
-import {ThemeProvider} from '@oxygen-ui/react';
+import {CircularProgress, ThemeProvider} from '@oxygen-ui/react';
 import {FC, PropsWithChildren, useEffect, useState} from 'react';
 import BrandingPreferenceContext from '../contexts/branding-preference-context';
 import BrandingPreferenceProviderProps from '../models/branding-preference-provider-props';
@@ -47,6 +47,14 @@ const BrandingPreferenceProvider: FC<PropsWithChildren<BrandingPreferenceProvide
     });
   }, [branding]);
 
+  if (brandingPreference === undefined) {
+    return (
+      <div className="circular-progress-holder">
+        <CircularProgress className="circular-progress" />
+      </div>
+    );
+  }
+
   return (
     <BrandingPreferenceContext.Provider value={brandingPreference}>
       <ThemeProvider theme={generateTheme(brandingPreference?.preference.theme)}>{children}</ThemeProvider>
diff --git a/packages/react/src/theme/generate-theme-sign-in.ts b/packages/react/src/theme/generate-theme-sign-in.ts
new file mode 100644
index 00000000..05c457e3
--- /dev/null
+++ b/packages/react/src/theme/generate-theme-sign-in.ts
@@ -0,0 +1,154 @@
+/**
+ * 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 {BrandingPreferenceTheme, ThemeConfig} from '@asgardeo/js-ui-core';
+import {extendTheme, Theme} from '@oxygen-ui/react';
+
+/**
+ * This function generates the theme for the sign-in component.
+ *
+ * @param {BrandingPreferenceTheme} brandingPreferenceTheme - The branding preference theme.
+ *
+ * @return {Theme} The generated theme.
+ */
+const generateThemeSignIn: (brandingPreferenceTheme: BrandingPreferenceTheme) => Theme = (
+  brandingPreferenceTheme: BrandingPreferenceTheme,
+) => {
+  const mode: string = brandingPreferenceTheme?.activeTheme.toLowerCase() ?? 'light';
+  const brandingTheme: ThemeConfig = brandingPreferenceTheme[mode.toUpperCase()];
+
+  return extendTheme({
+    colorSchemes: {
+      dark: {
+        brand: {
+          logo: {
+            main: brandingTheme?.images?.myAccountLogo?.imgURL ?? `../assets/asgardeo-logo.svg`,
+          },
+        },
+        palette: {
+          primary: {
+            main: brandingTheme?.colors?.primary?.main ?? 'var(--oxygen-palette-primary-main)',
+          },
+        },
+      },
+      light: {
+        brand: {
+          logo: {
+            main: brandingTheme?.images?.myAccountLogo?.imgURL ?? `../assets/asgardeo-logo.svg`,
+          },
+        },
+        palette: {
+          primary: {
+            main: brandingTheme?.colors?.primary?.main ?? 'var(--oxygen-palette-primary-main)',
+          },
+        },
+      },
+    },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: brandingTheme?.buttons?.primary?.base?.border?.borderRadius,
+            color: brandingTheme?.buttons?.primary?.base?.font?.color,
+          },
+        },
+      },
+      MuiCircularProgress: {
+        styleOverrides: {
+          root: {
+            color: `${brandingTheme?.colors?.primary?.main} !important`,
+          },
+        },
+      },
+      MuiFormControl: {
+        styleOverrides: {
+          root: {
+            background: brandingTheme?.inputs?.base?.background?.backgroundColor,
+            borderColor: brandingTheme?.inputs?.base?.border?.borderColor,
+            borderRadius: brandingTheme?.inputs?.base?.border?.borderRadius,
+            color: brandingTheme?.inputs?.base?.font?.color,
+          },
+        },
+      },
+      MuiInputLabel: {
+        styleOverrides: {
+          root: {
+            color: `${
+              brandingTheme?.inputs?.base?.labels?.font?.color !== ''
+                ? brandingTheme?.inputs?.base?.labels?.font?.color
+                : brandingTheme?.colors?.text?.primary
+            } !important`,
+          },
+        },
+      },
+      MuiLink: {
+        styleOverrides: {
+          root: {
+            color: `${brandingTheme?.colors?.text?.primary} !important`,
+          },
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          input: {
+            padding: '0.67857143em 1em',
+          },
+        },
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            '.OxygenSignInButton-social': {
+              backgroundColor: brandingTheme?.buttons.externalConnection.base.background.backgroundColor,
+              borderRadius: brandingTheme?.buttons.externalConnection.base.border.borderRadius,
+              color: brandingTheme?.buttons.externalConnection.base.font.color,
+            },
+            background: brandingTheme?.colors?.background?.surface?.main,
+            borderColor: brandingTheme?.colors?.outlined?.default,
+            borderRadius: brandingTheme?.loginBox?.border?.borderRadius,
+          },
+        },
+      },
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            color: 'purple',
+          },
+        },
+      },
+      MuiTypography: {
+        styleOverrides: {
+          root: {
+            color: brandingTheme?.colors?.text?.primary,
+          },
+        },
+      },
+    },
+    shape: {
+      borderRadius: 4,
+    },
+    typography: {
+      fontFamily: brandingTheme?.typography.font.fontFamily ?? 'Gilmer, sans-serif',
+      h1: {
+        fontWeight: 700,
+      },
+    },
+  });
+};
+
+export default generateThemeSignIn;
diff --git a/packages/react/src/theme/generate-theme.ts b/packages/react/src/theme/generate-theme.ts
index 5f2cee55..f25efcad 100644
--- a/packages/react/src/theme/generate-theme.ts
+++ b/packages/react/src/theme/generate-theme.ts
@@ -43,6 +43,12 @@ const generateTheme: (brandingPreferenceTheme: BrandingPreferenceTheme) => Theme
           },
         },
         palette: {
+          gradients: {
+            primary: {
+              stop1: brandingTheme.colors.primary.main,
+              stop2: brandingTheme.colors.primary.main,
+            },
+          },
           primary: {
             main: brandingTheme?.colors?.primary?.main ?? 'var(--oxygen-palette-primary-main)',
           },
@@ -55,6 +61,12 @@ const generateTheme: (brandingPreferenceTheme: BrandingPreferenceTheme) => Theme
           },
         },
         palette: {
+          gradients: {
+            primary: {
+              stop1: brandingTheme.colors.primary.main,
+              stop2: brandingTheme.colors.primary.main,
+            },
+          },
           primary: {
             main: brandingTheme?.colors?.primary?.main ?? 'var(--oxygen-palette-primary-main)',
           },
@@ -70,6 +82,13 @@ const generateTheme: (brandingPreferenceTheme: BrandingPreferenceTheme) => Theme
           },
         },
       },
+      MuiCircularProgress: {
+        styleOverrides: {
+          root: {
+            color: `${brandingTheme?.colors?.primary?.main} !important`,
+          },
+        },
+      },
       MuiFormControl: {
         styleOverrides: {
           root: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87817104..fb8a4b15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2655,8 +2655,8 @@ packages:
       eslint: ^7.32.0 || ^8.2.0
       eslint-plugin-import: ^2.25.3
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)(typescript@5.1.6)
-      '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
       eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint@8.57.0)
@@ -2722,7 +2722,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5)
       debug: 3.2.7
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
@@ -2770,7 +2770,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6)
+      '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.4.5)
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
       array.prototype.flat: 1.3.2
diff --git a/recipes/react-vite/.eslintrc.cjs b/recipes/react-vite/.eslintrc.cjs
new file mode 100644
index 00000000..d6c95379
--- /dev/null
+++ b/recipes/react-vite/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/recipes/react-vite/.gitignore b/recipes/react-vite/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/recipes/react-vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/recipes/react-vite/README.md b/recipes/react-vite/README.md
new file mode 100644
index 00000000..408858c9
--- /dev/null
+++ b/recipes/react-vite/README.md
@@ -0,0 +1 @@
+# React + TypeScript + Vite Sample Application
diff --git a/recipes/react-vite/index.html b/recipes/react-vite/index.html
new file mode 100644
index 00000000..e4b78eae
--- /dev/null
+++ b/recipes/react-vite/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/recipes/react-vite/package.json b/recipes/react-vite/package.json
new file mode 100644
index 00000000..bbb9aa35
--- /dev/null
+++ b/recipes/react-vite/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "react-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-vite": "link:",
+    "vite-plugin-node-polyfills": "^0.21.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/recipes/react-vite/public/vite.svg b/recipes/react-vite/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/recipes/react-vite/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/recipes/react-vite/src/App.css b/recipes/react-vite/src/App.css
new file mode 100644
index 00000000..2eb1147c
--- /dev/null
+++ b/recipes/react-vite/src/App.css
@@ -0,0 +1,7 @@
+#root {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
diff --git a/recipes/react-vite/src/App.tsx b/recipes/react-vite/src/App.tsx
new file mode 100644
index 00000000..79b2b171
--- /dev/null
+++ b/recipes/react-vite/src/App.tsx
@@ -0,0 +1,47 @@
+import "./App.css";
+import {
+  SignIn,
+  SignedIn,
+  SignedOut,
+  SignInButton,
+  SignOutButton,
+  useAuthentication,
+} from "../../../packages/react/src"; // ToDO: temporary
+
+function App() {
+  const {user, accessToken} = useAuthentication();
+  console.log(user);
+  return (
+    <>
+      <SignIn />
+
+      <SignedIn fallback={<div>Fallback content</div>}>
+        <div>Protected content</div>
+        <SignOutButton />
+        <div style={{textAlign: 'left'}}>
+          {accessToken}
+          {user && (
+          <>
+            {
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: JSON.stringify(user, null, 2).replace(
+                    /\n/g,
+                    "<br />"
+                  ),
+                }}
+              />
+            }
+          </>
+        )}</div>
+      </SignedIn>
+
+      <SignedOut fallback={<div>signedout fallback</div>}>
+        <div>Public content</div>
+        <SignInButton/>
+      </SignedOut>
+    </>
+  );
+}
+
+export default App;
diff --git a/recipes/react-vite/src/main.tsx b/recipes/react-vite/src/main.tsx
new file mode 100644
index 00000000..b4319810
--- /dev/null
+++ b/recipes/react-vite/src/main.tsx
@@ -0,0 +1,24 @@
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { AsgardeoProvider, UIAuthConfig } from "../../../packages/react/src"; //TODO: temporary
+
+const config: UIAuthConfig = {
+  baseUrl: "https://localhost:9443",
+  clientID: "b1uRjwpqydvxjGR42Y6BnIdQMRMa",
+  scope: ["openid", "internal_login", "profile"],
+  signInRedirectURL: "https://localhost:5173",
+  enableConsoleTextBranding: true,
+};
+
+const devConfig: UIAuthConfig = {
+  baseUrl: "https://dev.api.asgardeo.io/t/movinorg",
+  clientID: "kH5OfXOvpGLOvp1iAw4zQmNvv4oa",
+  scope: ["openid", "internal_login", "profile"],
+  signInRedirectURL: "https://localhost:5173",
+};
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <AsgardeoProvider config={config}>
+    <App />
+  </AsgardeoProvider>
+);
diff --git a/recipes/react-vite/src/vite-env.d.ts b/recipes/react-vite/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/recipes/react-vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/recipes/react-vite/tsconfig.json b/recipes/react-vite/tsconfig.json
new file mode 100644
index 00000000..a7fc6fbf
--- /dev/null
+++ b/recipes/react-vite/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/recipes/react-vite/tsconfig.node.json b/recipes/react-vite/tsconfig.node.json
new file mode 100644
index 00000000..97ede7ee
--- /dev/null
+++ b/recipes/react-vite/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/recipes/react-vite/vite.config.ts b/recipes/react-vite/vite.config.ts
new file mode 100644
index 00000000..1c59cea3
--- /dev/null
+++ b/recipes/react-vite/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), basicSsl(), nodePolyfills()],
+})