VTEX Login App

repository·main·Indexed 41 days ago

Provides components and logic to handle user authentication and login flows in a VTEX store. Includes the `login` and `login-content` blocks (version 2.x), support for Google One Tap, and query-string parameters for controlling redirects and OAuth flows.

Tokens: 2.4K
Snippets: 3
Records: 8
Agent score: 2%

What's inside VTEX Login

Overview of the VTEX Login app
main
The VTEX Login app is responsible for managing and handling user authentication and login processes within your VTEX store.
https://github.com/vtex-apps/login/blob/main/docs/README.md
Install the Login app
main
To use the Login blocks in your theme, add vtex.login version 2.x to your manifest.json dependencies.
Available blocks:
- login: Renders the full Login component (Mandatory).
- login-content: Renders only the login form.
```
"dependencies": {
  "vtex.login": "2.x"
}
```
https://github.com/vtex-apps/login/blob/main/docs/README.md

Control Login behavior via query-string parameters

main

You can customize the behavior of the Login app by appending specific query-string parameters to the URL. This allows you to control redirects, OAuth flows, and the initial state of the login process.

Supported Parameters

Parameter	Description
`returnUrl`	Redirects users to the specified URL after a successful login. Note: This only works for the store domain and must be UTF-8 encoded (e.g., using `encodeURIComponent`).
`oAuthRedirect`	Bypasses the native login options to redirect directly to an OAuth provider. The provider must be enabled in the component. Values are case-sensitive: `Google`, `Facebook`, or the specific name of the chosen provider.
`userEmail`	Provides the user's email information.
`flowState`	Sets the default state of the login flow. Use `createPass` to trigger an email containing a code for creating a new password. Note: Using `createPass` requires the `userEmail` parameter to be present in the same URL.

Configure the `login` block

main

Add the login block to your store header and configure its properties. Common props include titles, placeholders, and behavior settings.

Example configuration:

"login": {
  "props": {
    "emailAndPasswordTitle": "LOG-IN",
    "accessCodeTitle": "Acess Code LOG-IN",
    "emailPlaceholder": "e-mail",
    "passwordPlaceholder": "password",
    "showPasswordVerificationIntoTooltip": true
  }
}

"login": {
  "props": {
    "emailAndPasswordTitle": "LOG-IN",
    "accessCodeTitle": "Acess Code LOG-IN",
    "emailPlaceholder": "e-mail",
    "passwordPlaceholder": "password",
    "showPasswordVerificationIntoTooltip": true,
  }
}

Reference: `login` block props

main

The following properties are available for the login block to customize the component's appearance and behavior.

Prop name	Type	Description	Default
`optionsTitle`	`string`	Title text for login options.	`undefined`
`emailAndPasswordTitle`	`string`	Text for email and password option.	`undefined`
`accessCodeTitle`	`string`	Text for access code option.	`undefined`
`emailPlaceholder`	`string`	Placeholder for email input.	`undefined`
`passwordPlaceholder`	`string`	Placeholder for password input.	`undefined`
`acessCodePlaceholder`	`string`	Placeholder for access code input.	`undefined`
`showPasswordVerificationIntoTooltip`	`boolean`	Show password format tooltip.	`true`
`showIconProfile`	`boolean`	Display `hpa-profile` icon.	`true`
`iconLabel`	`string`	Title text for the Login icon.	`undefined`
`hideIconLabel`	`boolean`	Hide the Login icon text.	`false`
`labelClasses`	`[string]`	Login icon classnames.	`undefined`
`providerPasswordButtonLabel`	`string`	Password button label.	`undefined`
`hasIdentifierExtension`	`boolean`	Enable identifier extension configurations.	`true`
`identifierPlaceholder`	`string`	Placeholder for the extension input.	`undefined`
`invalidIdentifierError`	`string`	Error message for invalid identifier.	`undefined`
`mirrorTooltipToRight`	`boolean`	Open tooltip on the right side.	`false`
`logInButtonBehavior`	`enum`	`popover` (opens popover) or `link` (redirects to `/login`).	`popover`
`accountOptionsButtonBehavior`	`enum`	`popover` (opens popover) or `link` (redirects to `/account`).	`popover`
`accountOptionLinks`	`[object]`	Custom link object to replace default `/account` behavior.	`undefined`
`termsAndConditions`	`string`	Text displayed below login options.	`undefined`
`hasGoogleOneTap`	`boolean`	Beta: Enable Google One Tap sign-up/auto sign-in.	`false`
`googleOneTapAlignment`	`enum`	Beta: `left` or `right`.	`right`
`googleOneTapMarginTop`	`string`	Beta: CSS `top` value for pop-up margin.	`3rem`
`disabledEmailInputs`	`boolean`	Allow/disallow user email editing.	`false`

Reference: `login-content` block props

main

The login-content block is used when you only want to render the login form. It supports a subset of the login block props.

Prop name	Type	Description	Default
`isInitialScreenOptionOnly`	`boolean`	Show only login options on initial screen.	`true`
`defaultOption`	`enum`	`0` (access code), `1` (email/password), `2` (corporate).	`0`
`optionsTitle`	`string`	Title text for login options.	`undefined`
`emailAndPasswordTitle`	`string`	Text for email/password option.	`undefined`
`accessCodeTitle`	`string`	Text for access code option.	`undefined`
`emailPlaceholder`	`string`	Placeholder for email input.	`undefined`
`passwordPlaceholder`	`string`	Placeholder for password input.	`undefined`
`showPasswordVerificationIntoTooltip`	`boolean`	Show password format tooltip.	`true`
`acessCodePlaceholder`	`string`	Placeholder for access code input.	`undefined`
`providerPasswordButtonLabel`	`string`	Password button label.	`undefined`
`hasIdentifierExtension`	`boolean`	Enable identifier extension configurations.	`true`
`identifierPlaceholder`	`string`	Placeholder for the extension input.	`undefined`
`invalidIdentifierError`	`string`	Error message for invalid identifier.	`undefined`
`termsAndConditions`	`string`	Text displayed below login options.	`undefined`
`disabledEmailInputs`	`boolean`	Allow/disallow user email editing.	`false`

Reference: `accountOptionLinks` object props
main
When customizing accountOptionsButtonBehavior to link, use this object to define custom links.
Prop name Type Description
label string Text label for the custom link.
path string Custom link path.
cssClass [string] Login icon classnames.
https://github.com/vtex-apps/login/blob/main/docs/README.md

Prop name	Type	Description
`label`	`string`	Text label for the custom link.
`path`	`string`	Custom link path.
`cssClass`	`[string]`	Login icon classnames.

Customize Login app styles using CSS handles

main

The Login app supports customization via CSS handles. To apply custom styles, follow the standard VTEX IO recipe for Using CSS handles for store customization.

Below is the complete list of available CSS handles for this app:

`container`
  `contentInitialScreen`
  `contentFormVisible`
    `profile`
      `label`
    `optionsSticky`
    `optionsList`
    `optionsListItem`
    `optionsListItemContainer`
      `accessCodeOptionBtn`
      `emailPasswordOptionBtn`
      `corporateOptionBtn`
      `facebookOptionBtn`
      `googleOptionBtn`
      `customOAuthOptionBtn`
        `oauthProvider`
        `inputContainer`
          `inputContainerAccessCode`
          `inputContainerPassword`
          `inputContainerEmail`
          `emailVerification`
            `emailForm`
          `emailAndPasswordForm`
          `forgotPasswordForm`
          `formLinkContainer`
            `arrowUp`
            `buttonLink`
            `formError`
            `content`
  `content--emailVerification`
  `content--emailAndPassword`
  `content--codeConfirmation`
  `content--accountOptions`
  `content--recoveryPassword`
    `button`
      `sendButton`
      `buttonSocial`
      `buttonDanger`
      `backButton`
    `accountOptions`
    `codeConfirmation`
    `corporateEmail`
      `formTitle`
      `formSubtitle`
        `box`
    `contentContainer`
    `formFooter`
    `contentForm`
      `contentAlwaysWithOptions`
        `options`
    `tooltipContainer`
      `tooltipContainerTop`
      `tooltipContainerLeft`
    `loginOptionsContainer`
      `termsAndConditions`
      `forgotPasswordLink`
      `dontHaveAccount`
        `eyeIcon`