From 319a7ce2a3315c2680e443b43b677c7ac89062c5 Mon Sep 17 00:00:00 2001 From: gabrielraeder Date: Tue, 7 Oct 2025 17:59:18 -0300 Subject: [PATCH] creates poc page --- .../reference/login-screen-classes.mdx | 2646 ++++------------- main/snippets/recipe.jsx | 16 + 2 files changed, 594 insertions(+), 2068 deletions(-) diff --git a/main/customize/login-pages/advanced-customizations/reference/login-screen-classes.mdx b/main/customize/login-pages/advanced-customizations/reference/login-screen-classes.mdx index 25695ac64..8158deefe 100644 --- a/main/customize/login-pages/advanced-customizations/reference/login-screen-classes.mdx +++ b/main/customize/login-pages/advanced-customizations/reference/login-screen-classes.mdx @@ -7,290 +7,80 @@ permalink: login-screen-classes title: Login screen classes 'twitter:description': Learn about ACUL Login Screen classes 'twitter:title': Login screen classes +mode: wide --- + +import { Recipe, Content, SectionWithoutStep, SideMenu, SideMenuSectionItem, SignUpForm } from "/snippets/recipe.jsx"; + +export const sections = [ + { id: "login-screen-class", title: "Login screen class" }, + { id: "login-options%3F", title: "Installer les dépendances" }, + { id: "federatedlogin-options%3F", title: "federatedLogin( options? )" }, + { id: "valider-les-permissions", title: "Valider les permissions" }, + { id: "protéger-les-points-de-terminaison-des-api", title: "Protéger les points de terminaison des API" }, + { id: "6", title: "Appeler votre API" }, + { id: "7", title: "Appeler votre API" }, + { id: "8", title: "Appeler votre API" }, + { id: "9", title: "Appeler votre API" }, + { id: "10", title: "Appeler votre API" }, + { id: "11", title: "Appeler votre API" }, + { id: "12", title: "Appeler votre API" }, + { id: "13", title: "Appeler votre API" }, + { id: "14", title: "Appeler votre API" }, + { id: "15", title: "Appeler votre API" }, + { id: "16", title: "Appeler votre API" }, + { id: "17", title: "Appeler votre API" }, + { id: "18", title: "Appeler votre API" }, + { id: "19", title: "Appeler votre API" }, +] + + + + + ## Login screen class The Login screen class is part of the [Identifier First Authentication](/authenticate/login/auth0-universal-login/identifier-first) flow and collects the user's identifier and password. Depending on your tenant setup, this identifier can be an email, phone number, or username. ![ACUL Login](/images/cdy7uua7fh8z/5be9XfnulShqeXa4MXfXky/f3a5dded3539d4d683a525dfb6ad8042/Screenshot_2025-01-28_at_10.49.07.png) -Import and instantiate the Login screen class: - -```js lines -import Login from "@auth0/auth0-acul-js/login"; -const loginManager = new Login(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -loginManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -loginManager.screenLinks(); -``` - - - - - - ### Properties The Login screen class properties are: - - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record; - colors: Record; - displayName: string; - fonts: Record; - pageBackground: Record; - widget: Record; - }; -} -``` - - - - - - - - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - - - - - - - - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - - - - - - - - -```ts lines -interface prompt{ - name: string; -} -``` - - - - - - - - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | {username?: string;}; - isCaptchaAvailable: boolean; - links: null | Record; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - - - - - - - - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - - - - - - - - -```ts lines expandable -interface transaction { - allowedIdentifiers: null | IdentifierType[]; - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isForgotPasswordEnabled: boolean; - isPasskeyEnabled: boolean; - isSignupEnabled: boolean; - locale: string; - passwordPolicy(): null | PasswordPolicy; - state: string; -} - -interface Connection { - metadata?: Record; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface PasswordPolicy { - minLength?: number; - policy: - | "low" - | "fair" - | "good" - | "excellent"; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -IdentifierType: "phone" | "email" | "username" -``` + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + - - - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - - - - - - - - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity: { - id: number; -} & Record -``` - - - - - - - - + + Provides branding-related configurations, such as theme settings for the Login screen. + + + ### Methods The Login screen class methods are: @@ -299,393 +89,94 @@ The Login screen class methods are: This method authenticates the user based on the identifier and provided password. Depending on the server configuration, this could be an email, username, or phone number. Review [Flexible Identifiers](/authenticate/database-connections/flexible-identifiers-and-attributes) for more details. -```js lines -loginManager.login({ - username: "testUser", - password: "testPassword" -}); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
usernamestringYesThe user’s identifier.
passwordstringYesThe user's password.
captchastringConditionallyThe captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
[key: string]string | number | boolean | undefinedNoAdditional data collected from the user. This data is accessible in the post-login Action trigger.
+ + + + The user’s identifier. + -#### federatedLogin( options? ) - -This method redirects the user to the social or enterprise identity provider (IdP) for authentication. Review [Social Identity Providers](/authenticate/identity-providers/social-identity-providers) and [Enterprise Identity Providers](/authenticate/identity-providers/enterprise-identity-providers) for details. - -```js lines -import Login from "@auth0/auth0-acul-js/login"; -const loginManager = new Login(); -loginManager.federatedLogin({ - connection: "google-oauth2" -}); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeRequiredDescription
connectionstringYesThe identifier for the connection.
[key: string]string | number | boolean | undefinedNoAdditional data collected from the user. This data is accessible in the post-login Action trigger.
+ + The user's password. + -## Login Email Verification screen class - -The Login Email Verification screen class provides methods associated with the login-email-verification screen. + + The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled. + -![](/images/cdy7uua7fh8z/2kIZmIlrAHoSTyaD8thnIL/515c6f940036953d2989c7b37b7f1fe2/Screenshot_2025-05-15_at_21.18.53.png) + + Additional data collected from the user. This data is accessible in the post-login Action trigger. + -Import and instantiate the Login Email Verification screen class: + + + -```js lines -import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification'; + -// Instantiate the manager for the login email verification screen -const loginEmailVerificationManager = new LoginEmailVerification(); +#### federatedLogin( options? ) -// Accessing screen-specific texts (e.g., for titles, labels, button texts) -const screenTexts = loginEmailVerificationManager.screen.texts; -const pageTitle = screenTexts?.title || 'Verify Your Email'; -const codePlaceholder = screenTexts?.codePlaceholder || 'Enter code here'; +This method redirects the user to the social or enterprise identity provider (IdP) for authentication. Review [Social Identity Providers](/authenticate/identity-providers/social-identity-providers) and [Enterprise Identity Providers](/authenticate/identity-providers/enterprise-identity-providers) for details. -// Accessing transaction errors from a previous attempt -const transactionErrors = loginEmailVerificationManager.transaction.errors; -if (transactionErrors && transactionErrors.length > 0) { - transactionErrors.forEach(error => { - console.error(`Error Code: ${error.code}, Message: ${error.message}`); - // Display these errors to the user appropriately. - }); -} -``` + + + + The identifier for the connection. + + + Additional data collected from the user. This data is accessible in the post-login Action trigger. + + + + + +## Login Email Verification screen class +The Login Email Verification screen class provides methods associated with the login-email-verification screen. +![](/images/cdy7uua7fh8z/2kIZmIlrAHoSTyaD8thnIL/515c6f940036953d2989c7b37b7f1fe2/Screenshot_2025-05-15_at_21.18.53.png) ### Properties The Login Email Verification screen class properties are: - - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record; - colors: Record; - displayName: string; - fonts: Record; - pageBackground: Record; - widget: Record; - }; -} -``` - - - - - - - - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - - - - - - - - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - - - - - - - - -```ts lines -interface prompt{ - name: string; -} -``` - - - - - - - + + Provides branding-related configurations, such as theme settings for the Login screen. + -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | Record - | Record>; - isCaptchaAvailable: boolean; - links: null | Record; - name: string; - texts: null | Record; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} -``` + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + - - - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - - - - - - - - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record; - name: string; - options: { - displayName?: string; - iconUrl?: string; - showAsButton: boolean; - }; - strategy: string; -} -``` - - - - - - - - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - - - - - - - - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity: { - id: number; -} & Record -``` - - - - - - - - + ### Methods The Login Email Verification screen class methods are: @@ -694,401 +185,80 @@ The Login Email Verification screen class methods are: This method submits the email verification code entered by the user to Auth0. -```javascript lines -const manager = new LoginEmailVerification(); -// Assuming 'userInputCode' is a string obtained from a form input -manager.continueWithCode({ code: userInputCode }) - .catch(err => { - // Handle unexpected submission errors - displayGlobalError("Could not submit your code. Please try again."); - }); -// After the operation, check manager.transaction.errors for validation messages. -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
codestringYesThe code entered by the user.
[key: string]string | number | boolean | undefinedNoOptional data collected from user.
+ + + + The code entered by the user. + + + Optional data collected from user. + + + + + + #### resendCode( options? ) This method requests Auth0 to send a new verification code to the user's email address. -```javascript lines -const manager = new LoginEmailVerification(); -manager.resendCode() - .then(() => { - // Inform the user that a new code has been sent. - showNotification("A new verification code is on its way!"); - }) - .catch(err => { - // Handle unexpected submission errors - displayGlobalError("Could not request a new code. Please try again later."); - }); -// After the operation, check manager.transaction.errors for specific issues. -``` - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
[key: string]string | number | boolean | undefinedNoOptional data collected from user.
+ + + + Optional data collected from user. + + + + + + + ## Login ID screen class The Login ID screen class is part of the [Identifier First Authentication](/authenticate/login/auth0-universal-login/identifier-first) flow and collects the user's identifier. Depending on your tenant setup, this identifier can be an email, phone number, or username. ![](/images/cdy7uua7fh8z/1nvMFmxC5ODCW2q7cByHv8/657d87ba1c2eb11316e6b0ef93737c99/LoginIDACUL.png) -Import and instantiate the Login ID screen class: - -```js lines -import LoginId from '@auth0/auth0-acul-js/login-id'; -const loginIdManager = new LoginId(); - -// SDK Properties return a string, number or boolean -// ex. "login-id" -loginIdManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -loginIdManager.screenLinks(); -``` - - - - - - ### Properties The Login ID screen class properties are: - - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record; - colors: Record; - displayName: string; - fonts: Record; - pageBackground: Record; - widget: Record; - }; -} -``` - - - - - - - - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - - - - - + + Provides branding-related configurations, such as theme settings for the Login screen. + - + + Provides branding-related configurations, such as theme settings for the Login screen. + -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + - - -```ts lines -interface prompt{ - name: string; -} -``` - - - - - - - - -```ts lines expandable -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: - |null - | Record< - string, - | string - | boolean - | PasskeyCreate - | string[] - | Record - | PhonePrefix[], - >; - isCaptchaAvailable: boolean; - links: null | Record; - name: string; - publicKey: null | { challenge: string }; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} - -interface PasskeyCreate { - public_key: { - authenticatorSelection: { - residentKey: string; - userVerification: string; - }; - challenge: string; - pubKeyCredParams: [{ alg: number; type: string }]; - rp: { id: string; name: string }; - user: { displayName: string; id: string; name: string }; - }; -} - -interface PhonePrefix { - country: string; - country_code: string; - phone_prefix: string; -} -``` - - - - - - - - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - - - - - - - - -```ts lines expandable -interface transaction { - allowedIdentifiers: null | IdentifierType[]; - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isForgotPasswordEnabled: boolean; - isPasskeyEnabled: boolean; - isSignupEnabled: boolean; - isUsernameRequired: boolean; - locale: string; - state: string; - usernamePolicy: null | UsernamePolicy; -} - -interface Connection { - metadata?: Record; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} - -interface UsernamePolicy { - allowedFormats: { - usernameInEmailFormat: boolean; - usernameInPhoneFormat: boolean; - }; - maxLength: number; - minLength: number; -} - -IdentifierType: "phone" | "email" | "username" -``` - - - - - - - - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - - - - - - - - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity: { - id: number; -} & Record -``` - - - - - - - - + ### Methods The Login ID screen class methods are: @@ -1097,421 +267,100 @@ The Login ID screen class methods are: This method takes the user to the next step where they can enter their password or one-time password (OTP) code. Depending on the server configuration, this could be an email, username, or phone number. Review [Flexible Identifiers](/authenticate/database-connections/flexible-identifiers-and-attributes) for more details. -```text lines -loginIdManager.login({ - username: -}); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
usernamestringYesThe user’s identifier.
captchastringConditionallyThe captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
[key: string]string | number | boolean | undefinedNoAdditional data collected from the user. This data is accessible in the post-login Action trigger.
- -#### passkeyLogin( options? ) - -This method authenticates the user using the provided passkey and, if successful, redirects them to the `redirect_url`. - -```javascript lines -// This method does not support any parameters -loginIdManager.passkeyLogin(); -``` + + + + The user’s identifier. + + + The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled. + + + Additional data collected from the user. This data is accessible in the post-login Action trigger. + + + + + +#### passkeyLogin( options? ) +This method authenticates the user using the provided passkey and, if successful, redirects them to the `redirect_url`. + + #### federatedLogin( options? ) This method redirects the user to the social or enterprise identity provider (IdP) for authentication. Review [Social Identity Providers](/authenticate/identity-providers/social-identity-providers) and [Enterprise Identity Providers](/authenticate/identity-providers/enterprise-identity-providers) for details. -```js lines -import LoginId from "@auth0/auth0-acul-js/login-id"; -const loginIdManager = new LoginId(); - -// Check if alternateConnections is available and has at least one item -if (!loginIdManager.transaction.alternateConnections) { - console.error('No alternate connections available.'); -} - -// Select the first available connection (users can select any available connection) -const selectedConnection = alternateConnections[0]; - -// Log the chosen connection for debugging or informational purposes -console.log(`Selected connection: ${selectedConnection.name}`); -// Proceed with federated login using the selected connection -loginIdManager.federatedLogin({ - connection: selectedConnection.name, -}); -``` + + + + The identifier for the connection. + + + Additional data collected from the user. This data is accessible in the post-login Action trigger. + - - - - - - - - - - - - - - - - - - - - - - - - - - -
ParameterTypeRequiredDescription
connectionstringYesThe identifier for the connection.
[key: string]string | number | boolean | undefinedNoAdditional data collected from the user. This data is accessible in the post-login Action trigger.
- + + + + + #### pickCountryCode( options? ) This method redirects the user to the country code selection list, where they can update the country code prefix for their phone number. - -```javascript lines -// This method does not support any parameters -loginIdManager.pickCountryCode(); -``` - - - - - - + ## Login Password screen class The Login Password screen class is part of the [Identifier First Authentication](/authenticate/login/auth0-universal-login/identifier-first) flow and collects the user's password. ![](/images/cdy7uua7fh8z/Em8VqaD4fPUx6FRevD8fh/a9133a19565d5d9ddc1454535a0a7a11/loginpassword.png) -Import and instantiate the Login Password screen class - -```js lines -import LoginPassword from "@auth0/auth0-acul-js/login-password"; -const loginPasswordManager = new LoginPassword(); - -// SDK Properties return a string, number or boolean -// ex. "login-password" -loginPasswordManager.screen.name; - -// SDK Methods return an object or array -// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} -loginPasswordManager.screenLinks(); -``` - - - - ### Properties The Login Password screen class properties are: - - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record; - colors: Record; - displayName: string; - fonts: Record; - pageBackground: Record; - widget: Record; - }; -} -``` - - - - - - - - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - - - - - - - - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - - - - - - - - -```ts lines -interface prompt{ - name: string; -} -``` - - - - - - - - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { username: string; }; - editIdentifierLink: null | string; - isCaptchaAvailable: boolean; - links: null | Record; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - - - - - - - - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - - - - - - - - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isForgotPasswordEnabled: boolean; - isPasskeyEnabled: boolean; - isSignupEnabled: boolean; - locale: string; - state: string; - getAllowedIdentifiers(): null | ("email" | "username" | "phone")[]; - getPasswordPolicy(): null | PasswordPolicy; - getUsernamePolicy(): null | UsernamePolicy; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface Connection { - metadata?: Record; - name: string; - strategy: string; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface EnterpriseConnection { - metadata?: Record; - name: string; - options: { - displayName?: string; - iconURL?: string; - showAsButton: boolean; - }; - strategy: string; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface PasswordPolicy { - minLength?: number; - policy: - | "low" - | "fair" - | "good" - | "excellent"; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface UsernamePolicy { - allowedFormats: { - usernameInEmailFormat: boolean; - usernameInPhoneFormat: boolean; - }; - maxLength: number; - minLength: number; -} -``` + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + - - - - - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - - - - - - - - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity: { - id: number; -} & Record -``` - - - - - - - - + + Provides branding-related configurations, such as theme settings for the Login screen. + + + ### Methods The Login Password screen class method is: @@ -1520,326 +369,73 @@ The Login Password screen class method is: This method authenticates the user based on the identifier from the previous step and the provided password. Once authenticated, the user is directed to the next step. -```text lines -loginPasswordManager.login({ - username: , - password: ******** -}); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
captchastringConditionallyThe captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
usernamestringYesThe user’s identifier.
passwordstringYesThe user's password.
[key: string]string | number | boolean | undefinedNoAdditional data collected from the user. This data is accessible in the post-login Action trigger.
- -## Login Passwordless Email Code screen class - -The Login Passwordless Email Code screen class is part of the [Identifier First Authentication](/authenticate/login/auth0-universal-login/identifier-first) flow. It allows the user to authenticate with a one-time password (OTP) code sent to the email provided in their previous step. - -![Login Passwordless Email Code](/images/cdy7uua7fh8z/4DKgjU2dGw0mpLJKGfGhp0/470b29266da87f9bfc3e7eef55069620/Login_Passwordless_Email_Code.png) - -Import and instantiate the Login Passwordless Email Code screen class - -```js lines -import LoginPasswordlessEmailCode from '@auth0/auth0-acul-js/login-passwordless-email-code'; -const loginPasswordlessEmailCodeManager = new LoginPasswordlessEmailCode(); + + + + The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled. + -// SDK Properties return a string, number or boolean -// ex. "login-passwordless-email-code" -loginPasswordlessEmailCodeManager.screen.name; + + The user’s identifier. + -// SDK Methods return an object or array -// ex. { edit_identifier: "/edit_url" } -loginPasswordlessEmailCodeManager.screenLinks(); -``` + + The user's password. + + + Additional data collected from the user. This data is accessible in the post-login Action trigger. + + + + + +## Login Passwordless Email Code screen class +The Login Passwordless Email Code screen class is part of the [Identifier First Authentication](/authenticate/login/auth0-universal-login/identifier-first) flow. It allows the user to authenticate with a one-time password (OTP) code sent to the email provided in their previous step. +![Login Passwordless Email Code](/images/cdy7uua7fh8z/4DKgjU2dGw0mpLJKGfGhp0/470b29266da87f9bfc3e7eef55069620/Login_Passwordless_Email_Code.png) ### Properties The Login Passwordless Email Code screen class properties are: - - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record; - colors: Record; - displayName: string; - fonts: Record; - pageBackground: Record; - widget: Record; - }; -} -``` - - - - - - - - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` - - - - - - - - -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - - - - - - - - -```ts lines -interface prompt{ - name: string; -} -``` - - - - - - - - -```ts lines -interface screen { - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: null | { - email?: string; - username?: string; - }; - editIdentifierLink: null | string; - isCaptchaAvailable: boolean; - links: null | Record; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record; -} + + Provides branding-related configurations, such as theme settings for the Login screen. + -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + - - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - - - - - - - - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isSignupEnabled: null | boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} -``` - - - - - - - - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - - - - - - - - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity: { - id: number; -} & Record -``` - - - - - - - + + Provides branding-related configurations, such as theme settings for the Login screen. + + + ### Methods The Login Passwordless Email Code screen class method are: @@ -1848,349 +444,82 @@ The Login Passwordless Email Code screen class method are: This method sends a new OTP code to the email provided in the previous step. -```javascript lines -// This method does not support any parameters -loginPasswordlessEmailCode.resendCode(); -``` - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
[key: string]string | number | boolean | undefinedNoOptional data collected from user.
+ + + + Optional data collected from user. + + + + + #### SubmitCode( options? ) This method authenticates the user based on the provided email address and OTP code. -```js lines -loginPasswordlessEmailCode.submitCode({ - email: ; - code: ; -}); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
captchastringConditionallyThe captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
codestring numberYesThe OTP code sent to the email.
[key: string]string | number | boolean | undefinedNoAdditional data collected from the user. This data is accessible in the post-login Action trigger.
+ + + + The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled. + + + The OTP code sent to the email. + + + + Additional data collected from the user. This data is accessible in the post-login Action trigger. + + + + + + ## Login Passwordless SMS OTP screen class The Login Passwordless SMS OTP screen class is part of the [Identifier First Authentication](/authenticate/login/auth0-universal-login/identifier-first) flow. It allows the user to authenticate with a one-time password (OTP) code sent to the phone number provided in the previous step. ![](/images/cdy7uua7fh8z/7CNCkaU1uPRbEUsAyqlj8u/8461823cf224471d19656e4dd9027a87/Screenshot_2025-04-24_at_11.31.00.png) -Import and instantiate the Login Passwordless Email Code screen class - -```js lines -import LoginPasswordlessSmsOtp from '@auth0/auth0-acul-js/login-passwordless-sms-otp'; -const loginPasswordlessSmsOtpManager = new LoginPasswordlessSmsOtp(); - -// SDK Properties return a string, number or boolean -// ex. "login-passwordless-sms-otp" -loginPasswordlessSmsOtpManager.screen.name; - -// SDK Methods return an object or array -// ex. { edit_identifier: "/edit_url" } -loginPasswordlessSmsOtpManager.screenLinks(); -``` - - - - - - ### Properties The Login Passwordless SMS OTP screen class properties are: - - -```ts lines expandable -interface branding { - settings: null | BrandingSettings; - themes: null | BrandingThemes; -} - -interface BrandingSettings { - colors?: { - pageBackground?: string | { - angleDeg: number; - end: string; - start: string; - type: string; - }; - primary?: string; - }; - faviconUrl?: string; - font?: {url: string;}; - logoUrl?: string; -} - -interface BrandingThemes { - default: { - borders: Record; - colors: Record; - displayName: string; - fonts: Record; - pageBackground: Record; - widget: Record; - }; -} -``` - - - - - - - - -```ts lines -interface client { - description: null | string; - id: string; - logoUrl: null | string; - name: string; - metadata: null | {[key: string]: string;}; -} -``` + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + + + Provides branding-related configurations, such as theme settings for the Login screen. + - + + Provides branding-related configurations, such as theme settings for the Login screen. + -```ts lines -interface organization { - branding: null | { - colors?: { - pageBackground?: string; - primary?: string; - }; - logoUrl?: string; - }; - displayName: null | string; - id: null | string; - metadata: null | {[key: string]: string;}; - name: null | string; - usage: null | string; -} -``` - - - - - - - - -```ts lines -interface prompt{ - name: string; -} -``` - - - - - - - - -```ts lines -interface screen { - backLink: null | string; - captcha: null | CaptchaContext; - captchaImage: null | string; - captchaProvider: null | string; - captchaSiteKey: null | string; - data: {username: string;}; - isCaptchaAvailable: boolean; - links: null | Record; - name: string; - resetPasswordLink: null | string; - signupLink: null | string; - texts: null | Record; -} - -interface CaptchaContext { - image?: string; - provider: string; - siteKey?: string; -} -``` - - - - - - - - -```ts lines -interface tenant { - enabledFactors: null | string[]; - enabledLocales: null | string[]; - friendlyName: null | string; - name: null | string; -} -``` - - - - - - - - -```ts lines expandable -interface transaction { - alternateConnections: null | (Connection | EnterpriseConnection)[]; - connectionStrategy: null | string; - countryCode: null | string; - countryPrefix: null | string; - currentConnection: null | Connection; - errors: null | Error[]; - hasErrors: boolean; - isSignupEnabled: boolean; - locale: string; - state: string; -} - -interface Connection { - metadata?: Record; - name: string; - strategy: string; -} - -interface EnterpriseConnection { - metadata?: Record; - name: string; - options: { - display_name?: string; - icon_url?: string; - show_as_button: boolean; - }; - strategy: string; -} -``` - - - - - - - - -```ts lines -interface untrustedData { - authorizationParams: null | { - login_hint?: string; - screen_hint?: string; - ui_locales?: string; - [key: `ext-${string}`]: string; - }; - submittedFormData: null | { - [key: string]: - | string - | number - | boolean - | undefined; - }; -} -``` - - - - - - - - -```ts lines -interface user { - appMetadata: null | {[key: string]: string;}; - email: null | string; - enrolledDevices: null | ShortEntity<"device">[]; - enrolledEmails: null | ShortEntity<"email">[]; - enrolledFactors: null | string[]; - enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[]; - id: null | string; - organizations: null | { - branding: undefined | {logoUrl: undefined | string;}; - displayName: undefined | string; - organizationId: undefined | string; - organizationName: undefined | string; - }[]; - phoneNumber: null | string; - picture: null | string; - userMetadata: null | {[key: string]: string;}; - username: null | string; -} - -ShortEntity: { - id: number; -} & Record -``` - - - - - - - + + Provides branding-related configurations, such as theme settings for the Login screen. + + + ### Methods The Login Passwordless SMS OTP screen class method are: @@ -2199,82 +528,263 @@ The Login Passwordless SMS OTP screen class method are: This method sends a new OTP code to the email provided in the previous step. -```javascript lines -// This method does not support any parameters -loginPasswordlessSmsOtpManager.resendOTP() -``` - - + + + + Optional data collected from user. + + + + + - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
[key: string]string | number | boolean | undefinedNoOptional data collected from user.
- + + #### submitOTP( options? ) This method authenticates the user based on the provided phone number and OTP code. -```js lines -loginPasswordlessSmsOtpManager.submitOTP({ - username: ; - otp: ; -}) -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Parameter                 TypeRequiredDescription
captchastringConditionallyThe captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
otpstringYesThe OTP code sent to the phone number.
usernamestringYesThe phone number from the previous step.
[key: string]string | number | boolean | undefinedNoOptional data collected from the user.
\ No newline at end of file + + + + + The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled. + + + + The OTP code sent to the phone number. + + + + The phone number from the previous step. + + + + Optional data collected from the user. + + + + + + + + + + + ```js "Import and instantiate the Login screen class" + import Login from "@auth0/auth0-acul-js/login"; + const loginManager = new Login(); + + // SDK Properties return a string, number or boolean + // ex. "login-id" + loginManager.screen.name; + + // SDK Methods return an object or array + // ex. { signup: "/signup_url", reset_password: "/reset_password_url"} + loginManager.screenLinks(); + ``` + + + + ```js lines + loginManager.login({ + username: "testUser", + password: "testPassword" + }); + ``` + + + ```js "Import and instantiate the Login screen class" + import Login from "@auth0/auth0-acul-js/login"; + const loginManager = new Login(); + loginManager.federatedLogin({ + connection: "google-oauth2" + }); + ``` + + + ```js "Import and instantiate the Login Email Verification screen class" + import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification'; + + // Instantiate the manager for the login email verification screen + const loginEmailVerificationManager = new LoginEmailVerification(); + + // Accessing screen-specific texts (e.g., for titles, labels, button texts) + const screenTexts = loginEmailVerificationManager.screen.texts; + const pageTitle = screenTexts?.title || 'Verify Your Email'; + const codePlaceholder = screenTexts?.codePlaceholder || 'Enter code here'; + + // Accessing transaction errors from a previous attempt + const transactionErrors = loginEmailVerificationManager.transaction.errors; + if (transactionErrors && transactionErrors.length > 0) { + transactionErrors.forEach(error => { + console.error(`Error Code: ${error.code}, Message: ${error.message}`); + // Display these errors to the user appropriately. + }); + } + ``` + + + ```javascript "Submit verification code" + const manager = new LoginEmailVerification(); + // Assuming 'userInputCode' is a string obtained from a form input + manager.continueWithCode({ code: userInputCode }) + .catch(err => { + // Handle unexpected submission errors + displayGlobalError("Could not submit your code. Please try again."); + }); + // After the operation, check manager.transaction.errors for validation messages. + ``` + + + ```javascript "Request a new verification code" + const manager = new LoginEmailVerification(); + manager.resendCode() + .then(() => { + // Inform the user that a new code has been sent. + showNotification("A new verification code is on its way!"); + }) + .catch(err => { + // Handle unexpected submission errors + displayGlobalError("Could not request a new code. Please try again later."); + }); + // After the operation, check manager.transaction.errors for specific issues. + ``` + + + ```js "Import and instantiate the Login ID screen class" + import LoginId from '@auth0/auth0-acul-js/login-id'; + const loginIdManager = new LoginId(); + + // SDK Properties return a string, number or boolean + // ex. "login-id" + loginIdManager.screen.name; + + // SDK Methods return an object or array + // ex. { signup: "/signup_url", reset_password: "/reset_password_url"} + loginIdManager.screenLinks(); + ``` + + + ```js lines + loginIdManager.login({ + username: + }); + ``` + + + ```javascript "Authenticate a user with an identifier and password" + // This method does not support any parameters + loginIdManager.passkeyLogin(); + ``` + + + ```js lines + import LoginId from "@auth0/auth0-acul-js/login-id"; + const loginIdManager = new LoginId(); + + // Check if alternateConnections is available and has at least one item + if (!loginIdManager.transaction.alternateConnections) { + console.error('No alternate connections available.'); + } + + // Select the first available connection (users can select any available connection) + const selectedConnection = alternateConnections[0]; + + // Log the chosen connection for debugging or informational purposes + console.log(`Selected connection: ${selectedConnection.name}`); + + // Proceed with federated login using the selected connection + loginIdManager.federatedLogin({ + connection: selectedConnection.name, + }); + ``` + + + ```javascript "redirects the user to the country code selection l" + // This method does not support any parameters + loginIdManager.pickCountryCode(); + ``` + + + ```js "Import and instantiate the Login Password screen class" + import LoginPassword from "@auth0/auth0-acul-js/login-password"; + const loginPasswordManager = new LoginPassword(); + + // SDK Properties return a string, number or boolean + // ex. "login-password" + loginPasswordManager.screen.name; + + // SDK Methods return an object or array + // ex. { signup: "/signup_url", reset_password: "/reset_password_url"} + loginPasswordManager.screenLinks(); + ``` + + + ```js lines + loginPasswordManager.login({ + username: , + password: ******** + }); + ``` + + + ```js "Import and instantiate the Login Passwordless Email Code screen class" + import LoginPasswordlessEmailCode from '@auth0/auth0-acul-js/login-passwordless-email-code'; + const loginPasswordlessEmailCodeManager = new LoginPasswordlessEmailCode(); + + // SDK Properties return a string, number or boolean + // ex. "login-passwordless-email-code" + loginPasswordlessEmailCodeManager.screen.name; + + // SDK Methods return an object or array + // ex. { edit_identifier: "/edit_url" } + loginPasswordlessEmailCodeManager.screenLinks(); + ``` + + + ```javascript "Request a new verification code" + // This method does not support any parameters + loginPasswordlessEmailCode.resendCode(); + ``` + + + ```js "Authenticate a user with an identifier and password" + loginPasswordlessEmailCode.submitCode({ + email: ; + code: ; + }); + ``` + + + ```js "Import and instantiate the Login Passwordless Email Code screen class" + import LoginPasswordlessSmsOtp from '@auth0/auth0-acul-js/login-passwordless-sms-otp'; + const loginPasswordlessSmsOtpManager = new LoginPasswordlessSmsOtp(); + + // SDK Properties return a string, number or boolean + // ex. "login-passwordless-sms-otp" + loginPasswordlessSmsOtpManager.screen.name; + + // SDK Methods return an object or array + // ex. { edit_identifier: "/edit_url" } + loginPasswordlessSmsOtpManager.screenLinks(); + ``` + + + ```javascript "Request a new verification code" + // This method does not support any parameters + loginPasswordlessSmsOtpManager.resendOTP() + ``` + + + ```js "Authenticate a user with an identifier and password" + loginPasswordlessSmsOtpManager.submitOTP({ + username: ; + otp: ; + }) + ``` + + + \ No newline at end of file diff --git a/main/snippets/recipe.jsx b/main/snippets/recipe.jsx index ea6bb17d2..0f3eba5c9 100644 --- a/main/snippets/recipe.jsx +++ b/main/snippets/recipe.jsx @@ -37,6 +37,22 @@ export const Section = ({ id, title, stepNumber, children, isSingleColumn = fals ); }; +export const SectionWithoutStep = ({ id, title, stepNumber, children, isSingleColumn = false }) => { + return ( +
+ {/* + OPTION WITH OPACITY +
*/} + {children} +
+ ); +}; + export const SideMenu = ({ sections, children }) => { const [visibleSection, setVisibleSection] = useState(sections[0]?.id ?? null);