User Auth Installation

Version: 2.1.1 | 6 containers

Step-by-step

Use the following steps to install the User Auth component:

Note

These steps are specific for Edge Delivery Services projects, and may not necessarily be the same for other frameworks such as static HTML or React.

Install the packages

Install the required packages using npm:

npm install @dropins/tools @dropins/storefront-auth

Tip

All drop-in components require the @dropins/tools package. This package contains the libraries that drop-in components need to initialize and communicate, including fetch-graphql, event-bus, and initializer utilities.

Map the packages

Add the drop-in to your importmap in the head.html file:

<script nonce="aem" type="importmap">
{
  "imports": {
    "@dropins/storefront-auth/": "/scripts/__dropins__/@dropins/storefront-auth/",
    "@dropins/tools/": "/scripts/__dropins__/tools/"
  }
}
</script>

With the importmap defined, you can now import the required files from these packages into your block as described in the next step.

Import the required files

Import the necessary components and utilities:

// GraphQL Client
import * as mesh from '@dropins/tools/fetch-graphql.js';

// Component tools
import { initializers } from '@dropins/tools/initializer.js';

// Drop-in component provider
import { render as provider } from '@dropins/storefront-auth/render.js';

// Drop-in component API functions
import * as api from '@dropins/storefront-auth/api.js';

// Drop-in component containers
import { AuthCombine } from '@dropins/storefront-auth';

Connect to the endpoint

Configure the GraphQL endpoint:

// Set endpoint configuration
mesh.setEndpoint('https://<graphql-service-endpoint>/graphql');

// Set store code header
mesh.setFetchGraphQlHeader('store', '<default>');

Note

This setting is specific for GraphQL Mesh. Refer to the Commerce GraphQL Service for direct connections.

Register and load the drop-in

Mount the initializers after the page has loaded:

// Register drop-in initializer
initializers.register(api.initialize, {});

// Mount initializers (must be called after all initializers are registered)
initializers.mountImmediately(initialize, { langDefinitions });

Render the drop-in

Render the AuthCombine container on your page:

// Render User Auth
provider.render(AuthCombine, {
  // Add configuration options here
})(document.getElementById('your-dropin-element'));

Tip

See the [Containers documentation](/dropins/User Auth/containers/) for a complete list of available containers and their configuration options.

Next steps

• Explore the [API functions](/dropins/User Auth/functions/) available for programmatic control
• Customize the appearance using [slots](/dropins/User Auth/slots/)
• Learn about [events](/dropins/User Auth/events/) for integration with other components