Fix/docs 5320-update-ACUL-JS-Login-Classes

main/docs/libraries/acul/js-sdk.mdx

@@ -9,33 +9,29 @@ title: ACUL JS SDK
 'twitter:title': ACUL JS SDK
 ---
 
-The Auth0 ACUL JS SDK enables you to work with [Advanced Customization for Universal Login](/docs/customize/login-pages/advanced-customizations).
+The Auth0 ACUL JS SDK lets you build custom Universal Login experiences with mininal effort. Whether you are working with login, signup, passwordless, or passkey enrollment, this SDK is built to handle modern authentication flows with ease. 
 
-It simplifies integrating authentication screens (login, signup, passwordless, passkey enrollment, etc.) into your web applications, providing the necessary tools for seamless implementation.
+### Why Choose the Auth0 ACUL JS SDK?
 
-To get started install the ACUL JS SDK via npm:
+* **Fast Integration:** Drop in pre-built screens like `login-id` or `signup-password`.
+* **Modern Features:** Support passwordless, passkeys, and social logins. 
+* **Flexible Modules:** Import only what you need. 
+* **Unified State Management:** Use a single transaction object to handle all authentication flows.
 
-```bash
-npm install @auth0/auth0-acul-js
-```
+### Architecture
 
-After installing the SDK, you can import the screen classes to configure
-
-```bash
-// Default import of any particular screen, eg: login-id screen
-import  LoginId  from '@auth0/auth0-acul-js/login-id'; 
-
-// Named import of any screen
-import  { LoginId }  from '@auth0/auth0-acul-js'; 
-
-// Default import of all screens
-import  * as Screens  from '@auth0/auth0-acul-js';
-```
-
-Explore the [ACUL JS SDK screens classes and their methods](/docs/libraries/acul/js-sdk/Screens/classes/login).
-
-You can also get started with the [ACUL Quickstart](/docs/customize/login-pages/advanced-customizations/quickstart). 
+#### How it works? 
 
+The SDK is built with modularity and scability in mind. Here is how it fits together:
 
+* **Screens:** Each authentication flow, such as `login-id` and `signup-password`, is a standalone module. 
+* **Submit Handlers:** Manage form submissions and transitions.
+* **Dynamic Forms:** Adapt fields and validations based on screen configurations.
+* **Helper Properties:** Access common data, such as branding or transcation, in consistent way. 
 
+### Resources
 
+| Read... | To learn...                           |
+| -------- | ------------------------------------- |
+| [ACUL Quickstart Guide](/docs/customize/login-pages/advanced-customizations/quickstart)     | Start buliding with the SDK.                     |
+| [API Reference](/docs/libraries/acul/js-sdk/Screens/classes/login)      | Explore screens, methods, and properties.                           |

main/docs/libraries/acul/js-sdk/Screens/classes/Login.mdx

@@ -2,9 +2,13 @@
 title: "Login"
 ---
 
+The Login class implements the `login` screen functionality. This screen collects the user's identifier and password. Depending on your tenant, this identifer can be an email, phone number, or username. 
+
 <Frame><img style={{maxHeight:"400px"}} src="/docs/images/cdy7uua7fh8z/5be9XfnulShqeXa4MXfXky/f3a5dded3539d4d683a525dfb6ad8042/Screenshot_2025-01-28_at_10.49.07.png" alt="ACUL Login"/></Frame>
 
-Login screen implementation class
+## Constructors
+
+Creates an instance of Login screen manager
 
 ```ts Example
 import Login from "@auth0/auth0-acul-js/login";
@@ -15,40 +19,50 @@ loginManager.login({
 });
 ```
 
-## Constructors
-
-<ParamField body="Login" type="Constructor">
-
-Creates an instance of Login screen manager
-
-</ParamField>
 ## Properties
 
-<ParamField body='branding' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/BrandingMembers">BrandingMembers</a></span>}/>
+<ParamField body='branding' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/BrandingMembers">BrandingMembers</a></span>}>
+Provides branding-related configurations, such as theme settings for the `login` screen. 
+</ParamField>
 
-<ParamField body='client' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ClientMembers">ClientMembers</a></span>}/>
+<ParamField body='client' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ClientMembers">ClientMembers</a></span>}>
+Provides client-related configurations, such as `id`, `name`, and `logoUrl`, for the `login` screen. 
+</ParamField>
 
-<ParamField body='organization' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/OrganizationMembers">OrganizationMembers</a></span>}/>
+<ParamField body='organization' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/OrganizationMembers">OrganizationMembers</a></span>}>
+Provides information about the user's organization, such as organization `id` and `name`.
+</ParamField>
 
-<ParamField body='prompt' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/PromptMembers">PromptMembers</a></span>}/>
+<ParamField body='prompt' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/PromptMembers">PromptMembers</a></span>}>
+Contains data about the current prompt in the authentication flow. 
+</ParamField>
 
-<ParamField body='screen' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ScreenMembersOnLogin">ScreenMembersOnLogin</a></span>}/>
+<ParamField body='screen' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ScreenMembersOnLogin">ScreenMembersOnLogin</a></span>}>
+Contains details specific to the `login` screen, including its configuration and context.
+</ParamField>
 
-<ParamField body='tenant' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TenantMembers">TenantMembers</a></span>}/>
+<ParamField body='tenant' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TenantMembers">TenantMembers</a></span>}>
+Contains data related to the tenant, such as `id` and associated metadata.
+</ParamField>
 
-<ParamField body='transaction' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TransactionMembersOnLogin">TransactionMembersOnLogin</a></span>}/>
+<ParamField body='transaction' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TransactionMembersOnLogin">TransactionMembersOnLogin</a></span>}>
+Provides transaction-specific data for the `login` screen, such as active identifiers and flow states. 
+</ParamField>
 
-<ParamField body='untrustedData' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}/>
+<ParamField body='untrustedData' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}>
+Handles untrusted data passed to the SDK, such as user input during login.
+</ParamField>
 
-<ParamField body='user' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UserMembers">UserMembers</a></span>}/>
+<ParamField body='user' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UserMembers">UserMembers</a></span>}>
+Details of the active user, including `username`, `email`, and `roles`.
+</ParamField>
 
-<ParamField body='screenIdentifier' type='string'/>
 
 ## Methods
 
-<ParamField body='federatedLogin' type='Promise<void>'>
+<ParamField body='federatedLogin' type='(options ?)'/>
 
-Performs login with social provider
+This method redirects the user to the social or enterprise identity provider (Idp) for authentiction. 
 
 ```typescript Example
 import Login from "@auth0/auth0-acul-js/login";
@@ -58,52 +72,27 @@ loginManager.federatedLogin({
 });
 ```
 
-<Expandable title="Parameters">
-<ParamField body='payload' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/FederatedLoginPayloadOptions">FederatedLoginPayloadOptions</a></span>}>
-Options for performing social login operations
-
-**Properties**
-
-
+**Method Parameters**
 
-<ParamField body='connection' type='string'>
+<Expandable title="Parameters">
 
+<ParamField body='connection' type='string' required>
 The social connection name to use
-
 </ParamField>
 
+<ParamField body='[`key`: `string`]' type='"string" | "number" | "boolean" | "undefined"'>
+The authentication transaction state
 </ParamField>
 
 </Expandable>
-</ParamField>
 
-<ParamField body='getErrors' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/Error">Error</a>[]</span>}>
-
-Retrieves the array of transaction errors from the context, or an empty array if none exist.
 
-An array of error objects from the transaction context.
-
-</ParamField>
-
-<ParamField body='getLoginIdentifiers' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/type-aliases/ScreenIdentifierType">ScreenIdentifierType</a>[]</span>}>
-
-**`Utility Feature`**
-
-Gets the active identifier types for the login screen
-
-An array of active identifier types or null if none are active
-
-```typescript Example
-import Login from "@auth0/auth0-acul-js/login";
-const loginManager = new Login();
-loginManager.getLoginIdentifiers();
-```
+---
 
-</ParamField>
 
-<ParamField body='login' type='Promise<void>'>
+<ParamField body='login' type='(options ?)'/>
 
-Performs login with username/password
+This method authenticates the user based on the identifier and provided password.
 
 ```typescript Example
 import Login from "@auth0/auth0-acul-js/login";
@@ -114,46 +103,74 @@ loginManager.login({
 });
 ```
 
+**Method Parameters**
+
 <Expandable title="Parameters">
-<ParamField body='payload' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/LoginPayloadOptions">LoginPayloadOptions</a></span>}>
-Options for performing login operations
 
-**Properties**
+<ParamField body='username' type='string' required>
+The user's identifier.
+</ParamField>
 
-<ParamField body='captcha?' type='string'>
+<ParamField body='password' type='string' required>
+The user's password.
+</ParamField>
 
-Optional captcha value if required
+<ParamField body='captcha?' type='string' >
+The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled. 
+</ParamField>
 
+<ParamField body='[`key`: `string`]' type='"string" | "number" | "boolean" | "undefined"'>
+The authentication transaction state
 </ParamField>
 
-<ParamField body='password' type='string'>
+</Expandable>
 
-The password for authentication
+---
 
-</ParamField>
 
-<ParamField body='username' type='string'>
+<ParamField body='pickCountryCode' type='(options ?)'/>
 
-The username/email to login with
-</ParamField>
+This method redirects the user to the country code selection list, where they can update the country code prefix for their phone numnber. 
 
+```typescript Example
+import Login from "@auth0/auth0-acul-js/login";
+const loginManager = new Login();
+loginManager.pickCountryCode();
+```
+
+**Method Parameters**
+
+<Expandable title="Parameters">
+<ParamField body='[`key`: `string`]' type='"string" | "number" | "boolean" | "undefined"'>
+The authentication transaction state
 </ParamField>
 
 </Expandable>
+
+---
+
+<ParamField body='getErrors' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/Error">Error</a>[]</span>}>
+
+Retrieves the array of transaction errors from the context, or an empty array if none exist.
+
+An array of error objects from the transaction context.
+
 </ParamField>
 
-<ParamField body='pickCountryCode' type='Promise<void>'>
+---
 
-Picks country code for phone number input
+<ParamField body='getLoginIdentifiers' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/type-aliases/ScreenIdentifierType">ScreenIdentifierType</a>[]</span>}>
+
+**`Utility Feature`**
+
+Gets the active identifier types for the login screen
+
+An array of active identifier types or null if none are active
 
 ```typescript Example
 import Login from "@auth0/auth0-acul-js/login";
 const loginManager = new Login();
-loginManager.pickCountryCode();
+loginManager.getLoginIdentifiers();
 ```
 
-<Expandable title="Parameters">
-<ParamField body='payload?' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/CustomOptions">CustomOptions</a></span>}/>
-
-</Expandable>
-</ParamField>
+</ParamField>