My Authentication

This VTEX IO app extends the MyAccount app to add authentication-related menu options (Authentication tab). It is installed by default in every VTEX account. Just like MyAccount, this can be used in either IO or Portal stores.

{"base64":" ","img":{"width":1251,"height":624,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":48311,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-my-authentication-0.png"}}

Usage
- Visibility
Customization
- IO Stores
- Portal Stores
CSS Handles List
Contributors

Usage

Visibility

By default, the Authentication tab is not visible in the left-side menu of the MyAccount UI.

To make it visible, go into

https://{{accountName}}.myvtex.com/admin/apps/

and search for My Account among the installed apps. Then click Settings.

{"base64":" ","img":{"width":299,"height":182,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":9457,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-my-authentication-1.png"}}

Set Authentication option to :white_check_mark: Visible, then click Save.

{"base64":" ","img":{"width":152,"height":72,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2819,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-my-authentication-2.png"}}

📢 Disclaimer: in a close future, the Authentication tab visibility will become always true.

Before making this tab visible, you should customize it to match your store visual identity

Customization

IO Stores

In order to apply CSS customizations to the app, follow the instructions given in the recipe on Using CSS Handles for store customization (you don't have to worry about block or blockClass).

A list of all CSS Handles is in this section.

You can see the Authentication UI being customized in:

https://{{workspaceName}}--{{accountName}}.myvtex.com/account#/authentication

Portal Stores

In order to customize the app, create a .css file with your own rules. Your class selectors should reference the UI's pre-existing classes.

A list of all CSS Handles is in this section.

📢 Avoid using element or position-based selectors, as the customization may break in the face of the smallest UI changes.

To upload your .css file, go to the VTEX CMS (/admin/a) and open the CMS/Files Manager/.css file. Click Add and you'll be able to upload it. This file is accessible from VTEX Legacy CMS Portal storage.

Lastly, you should link that .css file to the Account Page HTML Head by editing the "Account" CMS template.

You can see the Authentication UI being customized in:

https://{{accountName}}.vtexcommercestable.com.br/_secure/account#/authentication

(if you want to use IO workspaces, just add the query string "?workspace={{workspaceName}}")

CSS Handles List

If you're in a Portal Store, append the prefix vtex_my-authentication_ to each handle for your CSS class selectors.