Skip to content

Commit 12f1fda

Browse files
BcnCarlosBcnCarlos
authored
Fix/docs 5320-update-ACUL-JS-Login-Classes (#417)
* Update js-sdk.mdx * Update react-sdk.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update Login.mdx * Update LoginId.mdx * Update LoginId.mdx * Update LoginEmailVerification.mdx * Update LoginEmailVerification.mdx * Update LoginEmailVerification.mdx * Update Login.mdx * Update LoginId.mdx * Update Login.mdx * Update LoginPassword.mdx * Update LoginPassword.mdx * Update LoginPassword.mdx * Update LoginPasswordlessEmailCode.mdx * Update LoginPasswordlessEmailCode.mdx * Update LoginPasswordlessEmailCode.mdx * Update LoginPasswordlessEmailCode.mdx * Update LoginPasswordlessSmsOtp.mdx * Update LoginPasswordlessEmailCode.mdx * Update LoginPasswordlessSmsOtp.mdx * Update LoginPasswordlessSmsOtp.mdx * Update LoginPasswordlessEmailCode.mdx * Update Logout.mdx * Update LogoutAborted.mdx * Update LogoutComplete.mdx * Update Logout.mdx * Update Logout.mdx * Update Logout.mdx * Update LoginPasswordlessSmsOtp.mdx * Update LoginPasswordlessEmailCode.mdx * Update LoginPassword.mdx * Update LoginId.mdx * Update LoginEmailVerification.mdx * Update Login.mdx
1 parent 98a473a commit 12f1fda

File tree

11 files changed

+660
-486
lines changed

11 files changed

+660
-486
lines changed

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

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,29 @@ title: ACUL JS SDK
99
'twitter:title': ACUL JS SDK
1010
---
1111

12-
The Auth0 ACUL JS SDK enables you to work with [Advanced Customization for Universal Login](/docs/customize/login-pages/advanced-customizations).
12+
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.
1313

14-
It simplifies integrating authentication screens (login, signup, passwordless, passkey enrollment, etc.) into your web applications, providing the necessary tools for seamless implementation.
14+
### Why Choose the Auth0 ACUL JS SDK?
1515

16-
To get started install the ACUL JS SDK via npm:
16+
* **Fast Integration:** Drop in pre-built screens like `login-id` or `signup-password`.
17+
* **Modern Features:** Support passwordless, passkeys, and social logins.
18+
* **Flexible Modules:** Import only what you need.
19+
* **Unified State Management:** Use a single transaction object to handle all authentication flows.
1720

18-
```bash
19-
npm install @auth0/auth0-acul-js
20-
```
21+
### Architecture
2122

22-
After installing the SDK, you can import the screen classes to configure
23-
24-
```bash
25-
// Default import of any particular screen, eg: login-id screen
26-
import LoginId from '@auth0/auth0-acul-js/login-id';
27-
28-
// Named import of any screen
29-
import { LoginId } from '@auth0/auth0-acul-js';
30-
31-
// Default import of all screens
32-
import * as Screens from '@auth0/auth0-acul-js';
33-
```
34-
35-
Explore the [ACUL JS SDK screens classes and their methods](/docs/libraries/acul/js-sdk/Screens/classes/login).
36-
37-
You can also get started with the [ACUL Quickstart](/docs/customize/login-pages/advanced-customizations/quickstart).
23+
#### How it works?
3824

25+
The SDK is built with modularity and scability in mind. Here is how it fits together:
3926

27+
* **Screens:** Each authentication flow, such as `login-id` and `signup-password`, is a standalone module.
28+
* **Submit Handlers:** Manage form submissions and transitions.
29+
* **Dynamic Forms:** Adapt fields and validations based on screen configurations.
30+
* **Helper Properties:** Access common data, such as branding or transcation, in consistent way.
4031

32+
### Resources
4133

34+
| Read... | To learn... |
35+
| -------- | ------------------------------------- |
36+
| [ACUL Quickstart Guide](/docs/customize/login-pages/advanced-customizations/quickstart) | Start buliding with the SDK. |
37+
| [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‎

Lines changed: 89 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
title: "Login"
33
---
44

5+
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.
6+
57
<Frame><img style={{maxHeight:"400px"}} src="/docs/images/cdy7uua7fh8z/5be9XfnulShqeXa4MXfXky/f3a5dded3539d4d683a525dfb6ad8042/Screenshot_2025-01-28_at_10.49.07.png" alt="ACUL Login"/></Frame>
68

7-
Login screen implementation class
9+
## Constructors
10+
11+
Creates an instance of Login screen manager
812

913
```ts Example
1014
import Login from "@auth0/auth0-acul-js/login";
@@ -15,40 +19,50 @@ loginManager.login({
1519
});
1620
```
1721

18-
## Constructors
19-
20-
<ParamField body="Login" type="Constructor">
21-
22-
Creates an instance of Login screen manager
23-
24-
</ParamField>
2522
## Properties
2623

27-
<ParamField body='branding' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/BrandingMembers">BrandingMembers</a></span>}/>
24+
<ParamField body='branding' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/BrandingMembers">BrandingMembers</a></span>}>
25+
Provides branding-related configurations, such as theme settings for the `login` screen.
26+
</ParamField>
2827

29-
<ParamField body='client' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ClientMembers">ClientMembers</a></span>}/>
28+
<ParamField body='client' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ClientMembers">ClientMembers</a></span>}>
29+
Provides client-related configurations, such as `id`, `name`, and `logoUrl`, for the `login` screen.
30+
</ParamField>
3031

31-
<ParamField body='organization' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/OrganizationMembers">OrganizationMembers</a></span>}/>
32+
<ParamField body='organization' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/OrganizationMembers">OrganizationMembers</a></span>}>
33+
Provides information about the user's organization, such as organization `id` and `name`.
34+
</ParamField>
3235

33-
<ParamField body='prompt' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/PromptMembers">PromptMembers</a></span>}/>
36+
<ParamField body='prompt' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/PromptMembers">PromptMembers</a></span>}>
37+
Contains data about the current prompt in the authentication flow.
38+
</ParamField>
3439

35-
<ParamField body='screen' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ScreenMembersOnLogin">ScreenMembersOnLogin</a></span>}/>
40+
<ParamField body='screen' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/ScreenMembersOnLogin">ScreenMembersOnLogin</a></span>}>
41+
Contains details specific to the `login` screen, including its configuration and context.
42+
</ParamField>
3643

37-
<ParamField body='tenant' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TenantMembers">TenantMembers</a></span>}/>
44+
<ParamField body='tenant' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TenantMembers">TenantMembers</a></span>}>
45+
Contains data related to the tenant, such as `id` and associated metadata.
46+
</ParamField>
3847

39-
<ParamField body='transaction' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TransactionMembersOnLogin">TransactionMembersOnLogin</a></span>}/>
48+
<ParamField body='transaction' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/TransactionMembersOnLogin">TransactionMembersOnLogin</a></span>}>
49+
Provides transaction-specific data for the `login` screen, such as active identifiers and flow states.
50+
</ParamField>
4051

41-
<ParamField body='untrustedData' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}/>
52+
<ParamField body='untrustedData' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>}>
53+
Handles untrusted data passed to the SDK, such as user input during login.
54+
</ParamField>
4255

43-
<ParamField body='user' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UserMembers">UserMembers</a></span>}/>
56+
<ParamField body='user' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/UserMembers">UserMembers</a></span>}>
57+
Details of the active user, including `username`, `email`, and `roles`.
58+
</ParamField>
4459

45-
<ParamField body='screenIdentifier' type='string'/>
4660

4761
## Methods
4862

49-
<ParamField body='federatedLogin' type='Promise<void>'>
63+
<ParamField body='federatedLogin' type='(options ?)'/>
5064

51-
Performs login with social provider
65+
This method redirects the user to the social or enterprise identity provider (Idp) for authentiction.
5266

5367
```typescript Example
5468
import Login from "@auth0/auth0-acul-js/login";
@@ -58,52 +72,27 @@ loginManager.federatedLogin({
5872
});
5973
```
6074

61-
<Expandable title="Parameters">
62-
<ParamField body='payload' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/FederatedLoginPayloadOptions">FederatedLoginPayloadOptions</a></span>}>
63-
Options for performing social login operations
64-
65-
**Properties**
66-
67-
75+
**Method Parameters**
6876

69-
<ParamField body='connection' type='string'>
77+
<Expandable title="Parameters">
7078

79+
<ParamField body='connection' type='string' required>
7180
The social connection name to use
72-
7381
</ParamField>
7482

83+
<ParamField body='[`key`: `string`]' type='"string" | "number" | "boolean" | "undefined"'>
84+
The authentication transaction state
7585
</ParamField>
7686

7787
</Expandable>
78-
</ParamField>
7988

80-
<ParamField body='getErrors' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/Error">Error</a>[]</span>}>
81-
82-
Retrieves the array of transaction errors from the context, or an empty array if none exist.
8389

84-
An array of error objects from the transaction context.
85-
86-
</ParamField>
87-
88-
<ParamField body='getLoginIdentifiers' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/type-aliases/ScreenIdentifierType">ScreenIdentifierType</a>[]</span>}>
89-
90-
**`Utility Feature`**
91-
92-
Gets the active identifier types for the login screen
93-
94-
An array of active identifier types or null if none are active
95-
96-
```typescript Example
97-
import Login from "@auth0/auth0-acul-js/login";
98-
const loginManager = new Login();
99-
loginManager.getLoginIdentifiers();
100-
```
90+
---
10191

102-
</ParamField>
10392

104-
<ParamField body='login' type='Promise<void>'>
93+
<ParamField body='login' type='(options ?)'/>
10594

106-
Performs login with username/password
95+
This method authenticates the user based on the identifier and provided password.
10796

10897
```typescript Example
10998
import Login from "@auth0/auth0-acul-js/login";
@@ -114,46 +103,74 @@ loginManager.login({
114103
});
115104
```
116105

106+
**Method Parameters**
107+
117108
<Expandable title="Parameters">
118-
<ParamField body='payload' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/LoginPayloadOptions">LoginPayloadOptions</a></span>}>
119-
Options for performing login operations
120109

121-
**Properties**
110+
<ParamField body='username' type='string' required>
111+
The user's identifier.
112+
</ParamField>
122113

123-
<ParamField body='captcha?' type='string'>
114+
<ParamField body='password' type='string' required>
115+
The user's password.
116+
</ParamField>
124117

125-
Optional captcha value if required
118+
<ParamField body='captcha?' type='string' >
119+
The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
120+
</ParamField>
126121

122+
<ParamField body='[`key`: `string`]' type='"string" | "number" | "boolean" | "undefined"'>
123+
The authentication transaction state
127124
</ParamField>
128125

129-
<ParamField body='password' type='string'>
126+
</Expandable>
130127

131-
The password for authentication
128+
---
132129

133-
</ParamField>
134130

135-
<ParamField body='username' type='string'>
131+
<ParamField body='pickCountryCode' type='(options ?)'/>
136132

137-
The username/email to login with
138-
</ParamField>
133+
This method redirects the user to the country code selection list, where they can update the country code prefix for their phone numnber.
139134

135+
```typescript Example
136+
import Login from "@auth0/auth0-acul-js/login";
137+
const loginManager = new Login();
138+
loginManager.pickCountryCode();
139+
```
140+
141+
**Method Parameters**
142+
143+
<Expandable title="Parameters">
144+
<ParamField body='[`key`: `string`]' type='"string" | "number" | "boolean" | "undefined"'>
145+
The authentication transaction state
140146
</ParamField>
141147

142148
</Expandable>
149+
150+
---
151+
152+
<ParamField body='getErrors' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/Error">Error</a>[]</span>}>
153+
154+
Retrieves the array of transaction errors from the context, or an empty array if none exist.
155+
156+
An array of error objects from the transaction context.
157+
143158
</ParamField>
144159

145-
<ParamField body='pickCountryCode' type='Promise<void>'>
160+
---
146161

147-
Picks country code for phone number input
162+
<ParamField body='getLoginIdentifiers' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/type-aliases/ScreenIdentifierType">ScreenIdentifierType</a>[]</span>}>
163+
164+
**`Utility Feature`**
165+
166+
Gets the active identifier types for the login screen
167+
168+
An array of active identifier types or null if none are active
148169

149170
```typescript Example
150171
import Login from "@auth0/auth0-acul-js/login";
151172
const loginManager = new Login();
152-
loginManager.pickCountryCode();
173+
loginManager.getLoginIdentifiers();
153174
```
154175

155-
<Expandable title="Parameters">
156-
<ParamField body='payload?' type={<span><a href="/docs/libraries/acul/js-sdk/Screens/interfaces/CustomOptions">CustomOptions</a></span>}/>
157-
158-
</Expandable>
159-
</ParamField>
176+
</ParamField>

0 commit comments

Comments
 (0)