Customers and accounts

Work with the logged-in customer from your own code: check the login, act for a customer as a sales agent, switch company section, refresh their data and query the GraphQL API. This page uses isLoggedIn, switchImpersonatingCustomer, setActiveCompanySection, refreshGlobalData, getActiveCustomerVerificationToken and fetch, plus the spark-redirect.js login redirect.

The examples use window.sparkReady: add the Wait for SparkLayer snippet before them. For every method's parameters and return values, see Customers and session in the SDK methods.

Check whether the customer is logged in

isLoggedIn() resolves to true when the customer is logged in to SparkLayer. The onReady hook runs for every visitor, so check it before you show B2B content or call pricing and cart methods:

const spark = await window.sparkReady;

if (await spark.isLoggedIn()) {
  // Show B2B content
}

Switch the customer a sales agent orders for

A sales agent can order on behalf of their customers. switchImpersonatingCustomer() changes the customer they're acting for, and null ends impersonation. Both resolve to the UserData for the active customer, or null.

const spark = await window.sparkReady;

// Act for a customer
const customer = await spark.switchImpersonatingCustomer('<CUSTOMER_ID>');

// End impersonation
await spark.switchImpersonatingCustomer(null);

While a sales agent is impersonating, pass true as the useImpersonatingCustomer argument of fetch() to run a query as the impersonated customer rather than the sales agent.

Select a company section

If a customer's company is split into sections, setActiveCompanySection() selects the one they're buying for. If the cart isn't empty, the customer is asked to confirm and the cart is cleared, then the page reloads. It resolves to false if the section isn't available to the customer, they cancel, or the cart couldn't be cleared.

const spark = await window.sparkReady;
const user = await spark.refreshGlobalData();
const section = user?.companySections[0];

if (section && !(await spark.setActiveCompanySection(section.id))) {
  // The section wasn't changed
}

Refresh customer and site data

SparkLayer caches the active customer and the site configuration. If they change while the page is open, for example after your own code updates the customer through the API, call refreshGlobalData() to fetch them again. It resolves to the active customer's UserData, or null.

const spark = await window.sparkReady;
const user = await spark.refreshGlobalData();

Get a customer verification token

getActiveCustomerVerificationToken() refetches the active customer and resolves to a fresh form customer verification token, or null. When a sales agent is impersonating, the token is for the impersonated customer; otherwise it's for the logged-in customer.

const spark = await window.sparkReady;
const token = await spark.getActiveCustomerVerificationToken();

Run a GraphQL query

spark.fetch runs a GraphQL query as the signed-in customer. This one reads their email address:

const spark = await window.sparkReady;
const response = await spark.fetch(`query {
  loggedInCustomer {
    id
    email
  }
}`);

if (response.status === 200) {
  const { data, errors } = await response.json();
  if (!errors?.length) console.log(data.loggedInCustomer.email);
}

fetch returns a standard Response: check status, then call json() for the data and errors. See fetch() for its other arguments.

Redirect to the login page

spark-redirect.js sends customers who aren't logged in to your login page when they follow a link that needs SparkLayer, such as the View order button in some emails. This lets SparkLayer open what the link was for once they've logged in.

Add it to your theme in addition to the Core Script. On Shopify, put it outside the {%- if customer.metafields.sparklayer.authentication -%} block, so it loads for customers who aren't logged in:

<script async src="https://cdn.sparklayer.io/spark-redirect.js"></script>

By default, customers are sent to /account/login. To use another path, set window.sparkRedirectLoginPath before the script:

<script>
  window.sparkRedirectLoginPath = '/account/login';
</script>
<script async src="https://cdn.sparklayer.io/spark-redirect.js"></script>

Next steps