Authenticate using the Wix Client in Custom Elements for Self-Hosted Site Extensions

In a custom element for a self-hosted site widget or site plugin, you need to use a Wix Client to call Wix APIs using the SDK.

Create a client

You need to provide Wix with a function that injects your client with the access token:

  1. Create a client using Site host context and Site authentication.
  2. In your class component's constructor, add:
    Copy
    this.accessTokenListener = wixClient.auth.getAccessTokenInjector();
    Wix calls this function to inject your client with an access token.

With this setup, Wix injects your client with an access token and you can use your client to call SDK methods.

Example

The following example uses an authenticated client to call:

  • products.queryProducts from the @wix/stores backend module
  • seo.title from the @wix/site-seo frontend module
Copy
import { site } from "@wix/site";
import { createClient } from "@wix/sdk";
import { products } from "@wix/stores";
import { seo } from "@wix/site-seo";

const myWixClient = createClient({
  auth: site.auth(),
  host: site.host({ applicationId: "<your_app_id>" }),
  modules: {
    products,
    seo,
  },
});

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.accessTokenListener = myWixClient.auth.getAccessTokenInjector();
  }

  connectedCallback() {
    myWixClient.products
      .queryProducts()
      .find()
      .then((productsQueryResult) => {
        console.log("Products query result:", productsQueryResult);
      });

    myWixClient.seo.title().then((title) => {
      console.log("Site title:", title);
    });
  }
}
customElements.define(tagName, MyCustomElement);
Did this help?