Render IO app that replaces vtex.login to support the alternative login with username method (a temporary B2B solution created for the ODP project).

1. Add the Login app to your theme's dependencies in the manifest.json file:

Now, you are able to use all the blocks exported by the Login with Alternative Key app. Check out the full list below:

Block name	Description
login	Only renders a "Login" button that redirects to the login page.
login-content	Renders the complete login form.

2. Add the vtex.login-alternative-key app to your custom store theme dependencies:

manifest.json

If you used the vtex.store-theme template, remove the vtex.login dependency.

3. Add the login-content block to your custom store theme's login page. It must implement the store.login interface from vtex.store:

blocks.json

Ensure the store.login implementation is only declared once. If you used the vtex.store-theme template, remove the login-content#default block and its props.

4. Optionally, add the login block to your store's header. For example:

The Login with Alternative Key app reads the following query-string parameters:

• returnUrl - Redirects users to the given returnUrl once they are logged in. Caution: This parameter only works for the store's domain and should be UTF-8 encoded (as in javascript's encodeURIComponent).

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
loginContainer
userIdentificationContainer
userIdentificationTitle
userIdentificationForm
userIdentificationInput
userIdentificationOptions
userIdentificationSignUp
userIdentificationContinueButton
passwordLoginContainer
passwordLoginTitle
passwordLoginForm
passwordLoginInputs
passwordLoginError
passwordLoginOptions
passwordLoginButtons
passwordLoginSignUp
passwordLoginBackButton
passwordLoginSignInButton
passwordCreationContainer
passwordCreationTexts
passwordCreationTitle
passwordCreationDescription
passwordCreationForm
passwordCreationInputs
passwordCreationInputPassword
passwordCreationOptions
passwordCreationBackButton
passwordCreationSignInButton
passwordCreationPasswordRequirementsContainer
passwordCreationPasswordRequirementsTitle
passwordCreationPasswordRequirementsList
passwordCreationPasswordRequirementsItem
passwordCreationError

After logging into a test account and using a custom workspace, to see the changes made to that app, we need to link it with the command:

vtex link

However, since this app is not included in the default store theme, you'll need to modify an additional app to test these changes.

1. Clone the app from this repository

2. Edit the blocks.jsonc file:

3. Edit the manifest.json file:

4. Link the app

vtex link

You just need to link that once per workspace, so you don't need to keep this linked while making your changes to the login-alternative-key app.